CSS Architecture

(How Not To Shoot Yourself In The Foot)

jonas.ninja/talks/css-architecture

Quick Survey!

These strategies work best on large, long-lived project that need to
change over time

Overview

  • The problem(s) of CSS
  • Some helpful techniques
  • Practical applications for existing projects

Common CSS Problems 

"Why does this rule exist?"

"The CSS file keeps getting bigger!"

"How are there 4000 lines of CSS for so little styling?"

"I have no idea whether I can modify/delete this rule."

In CSS:

"What are these classes for? Styling? Javascript? Are they even doing anything?"

"Do they relate to each other?"

"I need to refactor this structure. Will it break styling or javascript if I move this class to another element?"

In HTML:

"I feel overwhelmed by the sheer size of these files and the thousands of classes in them!"

"I don't look forward to writing styles for my new feature."

"The thought of refactoring CSS makes me sick in the pit of my stomach."

Emotional turmoil:

  • Code with opaque purpose
  • CSS keeps overriding itself
  • Lots of rules repeat the same groups of properties
  • Too much code, and it keeps getting bigger
  • Overwhelming and demotivating CSS makes contributors less effective

Why do we experience these problems?

(It's CSS's fault!)

  • Easy to make mistakes (and never know it until it's too late)

  • Everything is global

  • Highly order-sensitive

  • Difficult to communicate intent

  • Specificity can ruin everything

The Fundamental Problem of CSS

Too much flexibility,

not enough guidance

The Solution
for CSS

High-level disciplines to create

order out of chaos

The Goal

To know:

  • Where to add new rules
  • How to modify rules
  • Whether you can delete rules

Flavors of Methodologies

  • OOCSS
  • BEM
  • SMACSS
  • SUIT CSS
  • Atomic CSS
  • ITCSS

They're just collections of methods!

We will cover:

Single-class selectors

Additive Cascade

Namespacing

Layers of intent

Separation of structure and skin

Components

Single-Class Selectors

Source: Specificity Calculator

Specificity Graph

https://jonassebastianohlsson.com/specificity-graph/

0,0,6,0

0,0,2,0

0,1,0,0

Additive Cascade

  • Less "undo CSS"
  • More reusable rules
  • Smaller stylesheets

Layers of Intent

Layout/Structure

Source: xfive.co/blog/itcss-scalable-maintainable-css-architecture/

A quick note on
the Object layer 

                                        // layers 1 and 2 (Settings and Tools) are imported into each file that needs it.
        // _variables.less
        // _mixins.less

        // layer 3 (Generic)
        @import "generic/reset.less";

        // layer 4 (Elements)
        @import "element/_element.less";

        // layer 5 (Objects)
        @import "layout/grid.less";
        @import "layout/grid-fifths.less";
        @import "layout/alignment.less";
        @import "layout/pagesection.less";
        @import "layout/flex.less";

        // layer 6 (Components)
        @import "component/Nav.less";
        @import "component/Tab.less";
        @import "component/Card.less";
        @import "component/Form.less";
        @import "component/Tile.less";
        @import "component/List.less";
        @import "component/Badge.less";
        @import "component/Label.less";
        @import "component/Dollar.less";
        @import "component/Footer.less";
        @import "component/Buttons.less";
        @import "component/Example.less";
        @import "component/Spinner.less";
        @import "component/Tooltip.less";
        @import "component/Parallax.less";
        @import "component/OrderForm.less";
        @import "component/VerticalNav.less";

        // layer 7 (Trumps)
        @import "trumps/utility.less";
        @import "trumps/integrations.less";
        @import "shame/prettyPhoto.less";
        @import "theme/brandcolors.less";

Namespacing

Source: BEMIT: Taking the BEM Naming Convention a Step Further​ 

                                        <div class="media  user  premium">
        <img class="img  photo  avatar" ... />
        <p class="body  bio">...</p>
        </div>
                                        <div class="media  user  user--premium">
        <img class="media__img  user__photo  avatar" ... />
        <p class="media__body  user__bio">...</p>
        </div>
                                        <div class="o-media  c-user  c-user--premium">
        <img class="o-media__img  c-user__photo  c-avatar" ... />
        <p class="o-media__body  c-user__bio">...</p>
        </div>

Harry Roberts on namespacing classes

  • Object
  • Component
  • Utility
  • Theme
  • Hack
  • State
  • JavaScript hook
  • External (QA, etc)
  • .o-*
  • .c-*
  • .u-*
  • .t-*
  • ._*
  • .is-*, .has-*
  • .js-*
  • .qa-*

Separate Skin From Layout

An example of non-separation

Modular Components

A specific part of the UI. Includes HTML, CSS, JS, and other assets required to render the component in any context.

A note on naming conventions

SMACSS

BEM

SUIT CSS

                                        <div class="Tile Tile--centered  u-pad">
            <div class="Tile-header u-color-gray">
                ...
            </div>
            <div class="Tile-body">
                <div class="Media">
                    <div class="Media-left"></div>
                    <div class="Media-body">
                        ...
                        <input class="Tile-body-field is-selected">
                        ...
                    </div>
                </div>
            </div>
        </div>
                                        <div class="tile tile--centered pad">
            <div class="tile__header color-gray">
                ...
            </div>
            <div class="tile__body">
                <div class="media">
                    <div class="media__left"></div>
                    <div class="media__body">
                        ...
                        <input class="tile__body__field selected">
                        ...
                    </div>
                </div>
            </div>
        </div>
                                        <div class="tile tile-centered pad">
            <div class="tile-header color-gray">
                ...
            </div>
            <div class="tile-body">
                <div class="l-media">
                    <div class="l-media-left"></div>
                    <div class="l-media-body">
                        ...
                        <input class="tile-body-field is-selected">
                        ...
                    </div>
                </div>
            </div>
        </div>

Implementing in existing projects

Like Changing a Tire at 70mph

Option 1:
Don't.

Option 2:
​Just Do It

(One method at a time)

Option 3:
Two Systems

Create a new set of styles.

Some pages use the old styles and some pages use the new styles.

Users have to download two sets of CSS.

Adds complexity before simplifying.

END

?

References

Methodologies:

More References

(video) Managing CSS Projects with ITCSS

BEMIT Naming Convention

Namespaces

ivan@jonas.ninja

Contact

@i2nj3s

Ivan Jonas Gomes