John Craddock

CSS Architecture

Why is this talk in a javascript meet-up group?

  • No-one else is going to do it
  • Good CSS architecture will help your JS

What's not in this talk

  • CSS Tricks / CSS3 etc...
  • Specific technologies
    • SASS
    • Grunt
    • Angular

What is in this talk

  • Bad Practices
  • Good Practices
  • Adaptemy Architecture

Bad Practice


Bad Practice

  • This file just keeps getting bigger
  • Unable to remove / refactor code
  • New code produces unwanted side affects

Inability to refactor


            position: relative;

            top: 5%;


            transform: translateX(0) translateY(-5%);


DRY principles?

A 2011 survey by Nicole Sullivan showed facebook had 'facebook blue' (#3B5998) declared 261 times in their css.


What's the scope of your style rules?

Is every variable a global variable?

Would you write your javascript like this?

Specificity Wars

  • Each new style has to overwrite existing styles
  • Selectors get longer and longer
  • Eventually someone cracks and uses inline styles or !important

Good Practice



Global Styles
  • Base
  • Layout
  • State
  • Theme
Local Styles
  • Modules

Module namespacing


  /* logo styles */



  /* dropdown styles */



  /* link styles */



Adaptemy CSS Architecture

  • Separate global and local styles
    • Pages are Objects
    • Objects are Objects
  • Keep CSS beside HTML
  • Custom grid

Pages are Objects

Namespace each page

            //SCSS Code


              background-color: $color-background;


              .input-details input{


                margin: .5em 0 1em 0;


              .input-details em{

                font-weight: bold;



              button {



            } // #forgotpw-page


Namespace each page

            /* Compiled CSS */

            #forgotpw-page {

              background-color: #e2e2e2;

              height: 100vh; }

              #forgotpw-page .input-details input {

                padding: .5em;

                margin: .5em 0 1em 0; }

              #forgotpw-page .input-details em {

                font-weight: bold;

                cursor: pointer; }

              #forgotpw-page button {

                margin: 1em; }


Namespace each page


Keep your css beside your html

angular seed folder structure showing css separate from html     adaptemy folder structure showing css alongside html

Custom Grid

  • Easier to write your own than edit a plugin
  • lemonade.css

Work Practices

  • Someone needs to be good with css
  • Noone is in charge of page styles
  • Someone is in charge of global styles
  • Constantly Refactoring
  • Stress test your architecture


You need to be able to refactor your code.