Scalable and maintainable stylesheets

“Don’t Reinvent The Wheel, Unless You Plan on Learning More About Wheels”

— Jeff Atwood, Read the full article

“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

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";

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;

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

NEVER USE ID’S FOR STYLING!

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

    
<div class="module">

    <h1 class="module__title">This is a title</h1>

    <a href="#" class="button button--alpha">Link</a>

</div>
    

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

    
<div class="c-modal is-hidden" id="modal">
    <div class="o-container c-modal__content">
        <div class="c-island">
            <h1>Modal</h1>
            <p>
                Modal paragraph text.
            </p>
            <p>
                <button class="c-btn js-toggle" data-target="#modal">
                    Close modal
                </button>
            </p>
        </div>
     </div>
</div>
    

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