John Craddock

adaptemy.com

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

styles.css

Bad Practice

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

Inability to refactor

.v-center{

            position: relative;

            top: 5%;

            display:block;

            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.

Closure?

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

  • OOCSS
  • SMACSS

SMACSS

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

Module namespacing



.header-logo{

  /* logo styles */

}

.header-dropdown{

  /* dropdown styles */

}

.header-link{

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

            #forgotpw-page{

              background-color: $color-background;

              height:100vh;

              .input-details input{

                padding:.5em;

                margin: .5em 0 1em 0;

              }

              .input-details em{

                font-weight: bold;

                cursor:pointer;

              }

              button {

                margin:1em;

              }

            } // #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

Questions?

tl;dr
You need to be able to refactor your code.