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.

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.

                            
                                // 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.

                            
                                $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.

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.

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

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

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