CSS Architecture

Modules, semantics and grids

Import

SASS allows us to seamlessly separate css code to different files, and then import them all together on pre-pocessing into one:

No additional queries on the page load.

Code sharing

And it brings two more awesome tools for making our css DRY:

Mixins

Extend

Which one is better?

Modules

What is a module?

So, Module is just a discrete component of the page.

Organizing code with modules

  • Each Module is meant to exist as a standalone component

  • Modules are designed to be reused across the project

    If done right, Modules can easily be moved to different parts of the layout without breaking
  • Modules should have short, unique and expressive names

    This is where semantics comes in
  • Modules can sometimes sit within other Modules

    Not breaking anything
  • Modules are everything except the Layout

Sometimes css organized with modules is called object-oriented css.

Components

Special case of the modules are components.

We can learn a lot of how to write our modules by simply looking at famous component libraries' source code. Like Bootstrap, Foundation, etc.

Folder structure

What else apart from the modules and components do we need?

If the module is specific to a certain page only, not reusable, - we can place it with an _ inside the respective page's folder.

Do not override

Describe the possible variations inside the module, not outside.

Grids

What are grids?

A typographic grid is a two-dimensional structure of axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.

Horizontal grid

Refer to foundation-grid.css for more options.

Vertical grid

What is baseline?

Baseline is the line upon which most letters "sit" and below which descenders extend

What is css line-height?

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

Baseline grid utophy

When all the fonts sit perfectly on the lines.
Utophy, not even possible in the printed typography, since the font sized and line-heights differ.

Where baseline grid fails

Baseline grid

Vertical rhythm

Vertical rhythm

We have something smarter than baseline grid in our toolbox. First let's see the result:

Vertical rhythm toolbox

To establish the vertical rhythm for the project:

/

#