Modular designwith CSS

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

@bengie

Freelance HTML & CSS architect/consultant @ diezjietal

I suck @ JavaScript

Once upon a time …

<div class="fields">
    <div class="field-a" id="field-a-id-here">
        <div class="field-b" id="field-b-id-here">
            <div class="field-c" id="field-c-id-here">
                <div class="field-d" id="field-d-id-here">
                    <div class="field-e" id="field-e-id-here">
                        <div class="field-f" id="field-f-id-here">
                            Lorem ipsum dolor sit amet.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

* 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 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';
}

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

<article class="article">
    <header class="article__header">...</header>
    <div class="article__body">...</div>
    <footer class="article__footer">...</footer>
</article>

... with modifier

<!-- note: class chaining -->
<article class="article article--primary">
    <header class="article__header">...</header>
    <div class="article__body">...</div>
    <footer class="article__footer">...</footer>
</article>

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?