Modular design
with CSS

Gregory Van Looy / Fronteers meetup — 22/05/2014

@bengie

Freelance HTML & CSS architect/consultant @ diezjietal

I suck @ JavaScript

Once upon a time …




    

        

            

                

                    

                        

                            Lorem ipsum dolor sit amet.

* Any resemblance to a real CMS is purely coincidental.


header nav#main-nav > ul.nav li ul li {}

Meanwhile ...

  • Programming languages got OOP and MV* frameworks
  • JS started adopting those principles. JS Frameworks started to emerge.
  • ... in CSS world … NOTHING

Disclaimer

CSS wasn't totally neglected.

People started bulletproofing, handcrafting and hardboiling CSS.

Present day

Modular and scalable CSS

Why?

Every site gets bigger.

Normalizing

To: Gregory Van Looy
From: some@designer.com
Subject: Designs

Hi Greg,
I've attached the design to this email.

Good luck,
some designer

attachment: home-final-v2-update.jpg

To: Gregory Van Looy
From: some@designer.com
Subject: Styleguide

Hi Greg,
This is the styleguide:

  • Body: 'Comic Sans' 12px #000
  • Link color: #090
  • h1: 54px
  • …

Have fun,
some designer

attachment: design-styleguide.psd

To: Gregory Van Looy
From: crazy@designer.com
Subject: Styleguide

Hi Greg,
This is the styleguide:

Have fun,
a crazy designer

attachment: Book-A-general-components.pdf attachment: Book-B-mobile-styleguide.pdf attachment: Book-C-desktop-styleguide.pdf 


ul {
    margin-bottom: 24px;
}
p {
    margin: 18px 0;
}
h2 {
    margin-bottom: 20px;
}

                    

ul, h2 {
    margin-bottom: 20px;
}
p {
    margin: 20px 0;
}
                    

/* Sass */
$base-spacing-unit: 20px;
ul, h2 {
    margin-bottom: $base-spacing-unit;
}
p {
    margin: $base-spacing-unit 0;
}
                    

p {
    font-size: 16px;
}
figcaption {
    font-size: 15px;
}
h6 {
    font-size: 17px;
}
                    

p,
figcaption,
h6 {
    font-size: 16px;
}

/* Sass */
$base-font-size: 16px;

p,
figcaption,
h6 {
    font-size: $base-font-size;
}

80:20

© Harry Roberts

Modularizing


.article-teaser {}
.carousel {}
.tabs {}

Dig deeper


.tag {}
.more-link {}
.icon {}

How?

SMACSS

Scalable and Modular Architecture for CSS

Categorizing CSS rules

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

1. Base rules


/* no classes here, only element selectors */
body {}
p {}
a {}

2. Layout rules


/* grid  */
.col {}
.col--2 {}
.col--primary {}

/* layout specific: .layout-- prefix */
.layout--homepage {}

.layout--XXXX classes are added to the html tag

3. Module rules

Biggest chunk of your CSS file


/* skip the prefix, it's too verbose */
.module-carousel {}

/* that's the way, uhu uhu */
.carousel {}

4. State rules


/* .is- prefix */
.is-active {}
.is-hidden {}
.is-collapsed {}
.is-expanded {}

4b. State rules

JavaScript: easier to debug


/* .js-is- prefix */
.js-is-active {}
.js-is-hidden {}
.js-is-collapsed {}
.js-is-expanded {}

5. Theme rules

Will you need this one?

YES!!!!


.theme--culture .article {}
.theme--x-mas blockquote:before {
    content: 'hohoho';
}

.theme-- classes are added to the html tag

Folder structure

in combination with Sass


| - sass
  |- base
     _base.scss
     _normalize.scss
     _defaults.scss
     _webfonts.scss
    ...
  |- layout
     _layout.scss
     _grid.scss
     _sections.scss
    ...
  |- modules
    _modules.scss
    _carousel.scss
    _pagination.scss
    ...
  |- state
    _state.scss
    ...
  |- theme
    _theme.scss
    _x-mas.scss
    ...
  _site-settings.scss
  _mixins.scss
  main.scss

Level up

BEM

Block - Element - Modifier


.block {}
.block__element {} /* note: double underscore */
.block--modifier {} /* note: double hyphen */

More on BEM: here, here, here and here

Old skool


header nav#main-nav > ul.nav li ul li {}

Example




    
...

    
...

    
...

... with modifier





    
...

    
...

    
...

Naming conventions


/* Bad */
.pageHeader {}
.button--blue {}

/* Good */
.page-header {}
.button--primary {}
                    

/* This is OK! */
.article__header--no-border {}
.teaser--large--primary {}

Advantages

  • It's clear what each selector's purpose is
  • Less chance of colliding with CSS of third party plugins
  • Lesser nesting of selectors (especially when used with SMACSS theming) 
    
/* old skool */
article > header {}
/* old skool + Smacss theming */
.theme--x-mas article > header {}
/* BEM */
.article__header {}
/* BEM + SMACSS theming */
.theme--x-mas .article__header {}
  • … thus, your CSS rendering is faster

THE END

Questions?