As websites can get bigger, keeping your CSS codebase clean, scalable, maintainable, and light is critical to support performance and speed-up development time.
Problem: Bad CSS structure leads to chaos
Without a clear logic for organising your CSS, you will end up with a chaotic system, including hard-to-maintain and heavy CSS files.
Also, a bad structure will impact the performance of your website because it will encourage you to use CSS overrides instead of embracing CSS inheritance and cascading.
Solution: Embrace CSS Cascading and inheritance
Structure your CSS in a way that embraces the power of the CSS cascade algorithm and inheritance to build a clean and easy-to-mantain CSS codebase.
Our process of writing and structuring CSS files is based on SASS (CSS pre-processor) and takes inspiration from the CUBE CSS Methodology.
Sample overview of our CSS files architecture
Sass/
1. base/
_mixins.scss
_reset.scss
_settings.scss
_system.scss
page/
_global.scss
_header.scss
_footer.scss
typography/
_links.scss
_paragraphs.scss
_headings.scss
_lists.scss
_tables.scss
_other.scss
2. utilities/
_colour.scss
_center.scss
_container.scss
_dropcap.scss
_grid.scss
_radius.scss
…
3. blocks/
_buttons
_hero.scss
_footer
_header.scss
…
4. site-specific/
_about.scss
_article.scss
…
styles.scss
File structure breakdown
Let’s detail each folder and files:
-
1. Base
This layer includes the high-level CSS rules, the foundation styles and global custom properties variables of the design.
_settings.scss:
This file includes the foundational style variables that are used globally throughout the project.(e.g. spacings, colors, typography…).
_mixings.scss
This file includes chunks of reusable CSS rules like media query breakpoints or a rule for specifying static font sizes.
In other words, SASS mixins are reusable blocks allowing you to define styles that can be re-used throughout your stylesheet.
_reset.scss
This file contains the Modern CSS Reset file from Andy Bell to reset the default browsers’ styles and avoid any inconsistencies across different browsers.
_system.scss
This file contains all the CSS rules required to adjust the styles of the admin interface of your website. In case you plug your CSS / prototypr on Wordpress or Drupal we sude this file to style admin interface, admin forms, edit buttons etc..
page/
This folder contains page global, header and footer layout styles. These rules are organised under the following partial files:
- _global.scss
- _header.scss
- _footer.scss
typography/
This folder contains partial files with CSS rules of common typographic elements such as paragraphs, links or headings.
- _links.scss
- _paragraphs.scss
- _headings.scss
- _lists.scss
- _tables.scss
- _other.scss
-
2. Utilities
This layer includes a list of helper classes that consist of a single CSS rule or a group of related CSS rules useful to style multiple elements consistently and quickly.
To avoid repeating CSS rules, we use utility classes when appropriate to style HTML elements consistently.
Utility classes can contain a single property or a group of related CSS properties to define text colors, background colours, border radius, drop caps, borders or any other reusable style.
- .content-list
- .center
- .l-rs
-
3. Blocks
This layer contains files with specific CSS rules for each Building blocks that compose the layout.
Blocks refer to a simple UI element like a button or a group of UI elements like a card, hero section or menu. The CSS rules are applied using the parent block class.
The benefit of styling a component using the block class is that the block will maintain its original style, regardless of the context it's placed in.
-
4. Site specific
This layer contains the CSS rules applied with the parent body class to style specific page—or content type layouts.
This folder contains the partials files of individual pages, content-types or templates, including their specific CSS rules required to adjust/override the layout styles.
our-team.scss, article.scss, speaker-page ...
-
styles.scss
This file includes the imported partials to generate the final
style.css
file.The
style.scss
file is the source file where we import the required.scss
partials. The .scss file will get compiled and a finalstyle.css
will be created file that the browser will use to load the styles of your website.➜ assets sass --watch sass:css
This command tells SASS to preprocess the SASS files that are located inside
/assets
and output the final css inside the folder /css.
Takeaways
- Write high-level CSS and global variables inside
/base
- Use utility classes to style common elements consistently
- Add content-block styles inside their partial file inside
/blocks
- Add page or template-specific CSS inside
/site-specific
- Keep your CSS styles light
Resources
Don't Start With Visuals
By Jerome Kalumbu