CSS architecture

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 final style.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

• Andy Bell: Browser’s Mentor, Not Micromanager + Cube CSS
• CUBE CSS Methodology
• Why are we bad at CSS?

Don't Start With Visuals

By Jerome Kalumbu

A creative approach with UX design tips to help you design effective and engaging websites.

Discover E-book