Scalable and maintainable stylesheets

# Scalable and maintainable stylesheets Fork CMS meetup, 9 september 2015

## Hi [@DieterPeirs](https://twitter.com/DieterPeirs), designer and front-end developer [@vreewijs](https://twitter.com/vreewijs)

#### Prelude ## Which framework?

## “Don’t Reinvent The Wheel, Unless You Plan on Learning More About Wheels” — Jeff Atwood, [Read the full article](http://blog.codinghorror.com/dont-reinvent-the-wheel-unless-you-plan-on-learning-more-about-wheels/)

To framework or not to framework?

Use a framework if it makes sense but don't blindly adopt something.
Keep reinventing, keep learning, question everything!
Try this: use a set of micro-libraries (normalize.css, OOCSS objects, bootstrap components) combined with custom components for the best of both worlds.

## “There’s the whole Buddhist thing about the essence of a bowl being its emptiness — that’s why it’s useful. Its emptiness allows it to hold something …” — Frank Chimero Note: - Architecture is more important. - It is the “how” vs the “what”

#### Part 1 ## Tools

Pre- and postprocessors

Sass is the most popular. (Bootstrap 4 switched to Sass)
PostCSS is gaining popularity fast. (Bootstrap 5 will probably be written in POSTCSS)
Recommended: Sass (.scss flavor) combined with PostCSS for tasks like automatic vendor prefixes.

Imports

Facilitates combining different libraries, plugins and custom styles.
Enables working with multiple people on the same project.
Is an essential tool for a scalable architecture as it allows you to easily insert new blocks of code.

#### In use

                            
                                // Core variables and mixins
                                @import "bootstrap/variables";
                                @import "bootstrap/mixins";

                                // Reset and dependencies
                                @import "bootstrap/normalize";

                                // Core CSS
                                @import "bootstrap/type";

                                // Components
                                @import "bootstrap/dropdowns";

                                // Components w/ JavaScript
                                @import "bootstrap/modals";

                                // Utility classes
                                @import "bootstrap/utilities";

Variables

Create reusable values. (colors, spacing, fonts, …)
Quickly customize or tweak an entire project.
CSS supports variables but browser support is still lacking.

#### In use

                            
                                $brand-primary:           darken(#428bca, 6.5%) !default;
                                $brand-success:           #5cb85c !default;
                                $brand-info:              #5bc0de !default;
                                $brand-warning:           #f0ad4e !default;
                                $brand-danger:            #d9534f !default;

                                $btn-default-color:       #333 !default;
                                $btn-default-bg:          #fff !default;
                                $btn-default-border:      #ccc !default;

                                $font-size-base:          14px !default;

                                $font-size-h1:            floor(($font-size-base * 2.6)) !default;
                                $font-size-h2:            floor(($font-size-base * 2.15)) !default;
                                $font-size-h3:            ceil(($font-size-base * 1.7)) !default;
                                $font-size-h4:            ceil(($font-size-base * 1.25)) !default;
                                $font-size-h5:            $font-size-base !default;
                                $font-size-h6:            ceil(($font-size-base * 0.85)) !default;

Why preprocessors suck ...

Nesting: creates too much specificity.
@extends: generate bloated code.
Always check your generated files.

#### Part 2 ## Specificity and selector intent

Problem

    
        h1 {
            font-size: 2em;
            color: red;
        }

        .module h1 {
            color: blue
        }

Solution

    
        h1 {
            font-size: 2em;
        }

        .page-title {
            color: blue
        }



        /* Exception for editors, ...: Use a child selector */
        .editor > h1 {
            color: blue;
        }

Summary

Respect the cascade.
Don't overdo styling of html elements.
CSS reads from right to left.
The more you specify something the bigger the depth of your selector gets and the harder it gets to override.
Depth has a real impact on selector performance.

## NEVER USE ID’S FOR STYLING!

BEM

Block__element--modifier

Naming methodology invented by Yandex.
Blocks are the base selector.
Elements are childs. (delimited by __)
Modifiers are extensions. (delimited by --)

BEM (Block__element--modifier)

    
        /* Blocks */
        .module {
            padding: 10px;
        }

        .button {
            border-radius: 3px;
        }

        /* Elements */
        .module__title {
            color: blue;
        }

        /* Modifiers */
        .button--alpha {
            background-color: grey;
        }

        .button--beta {
            background-color: grey;
        }

BEM is great for understanding selectors in HTML

    


    This is a title

    Link

#### Part 3 ## Front-end architecture

Create order in CSS & HTML

Order selectors based on ascending specificity.
Create layers to group styles in the same category.
Use a namespace prefix so classes are easy to read in HTML and quickly located in CSS.
Further reading.

#### Namespace layers // 0. Settings @import "settings.typography"; // 0. Tools @import "tools.grid"; /* 1. Generic */ @import "generic.normalize"; /* 2. Elements */ @import "elements.page"; /* 3. Objects */ @import "objects.grid"; /* 4. Components */ @import "components.buttons"; /* 5. Plugins */ @import "plugin.flexslider"; /* 6. Utilities */ @import "utilities.widths";

Namespace prefixes

    
/* o-  Objects: reusable design patterns with no styling */
.o-grid { }

/* c-  Components: designed components, custom UI design */
.c-navigation { }

/* p-  Plugins: seperate your code from the plugin */
.p-flexslider { }

/* u-  Utilities: single-purpose helper classes */
.u-margin-reset { }

/* is-/has-  States: temporary states */
.is-hidden { }
.has-mobile-nav { }

/* js-  Javascript hooks: only functionality, no styling */
.js-modal { }

Namespaces in HTML

    

    
        
            Modal
            
                Modal paragraph text.

Open/closed principle

    
/* Design tweak: remove the margin on a module in some cases */

/* Never touch the original module! */
.c-module {
    margin: 1em;
}

/* Option 1: use a modifier to extend the existing module */
.c-module--margin-reset {
    margin: 0;
}

/* Option 2: use a utility class for exceptions or quick fixes */
.u-margin-reset {
    margin: 0 !important;
}

## Thank you [@DieterPeirs](https://twitter.com/DieterPeirs) [@GetChopstick](https://twitter.com/GetChopstick)