UX Camp

John Craddock

adaptemy.com

CSS Architecture

or

How to keep your CSS files from becoming a complete mess

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
  • Work Practices

Bad Practices

Don't Repeat Yourself
-
Don't copy and paste code.

Bad Practices

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

Scope & Closure

What's the scope of your style rules?

Is every style a global style?

Inability to refactor

.v-center{

            position: relative;

            top: 5%;

            display:block;

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

          }

Bad Practice

styles.css
  • This file just keeps getting bigger

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 - Object Orientated CSS
  • SMACSS - Scalable Modular Architecture for CSS
  • BEM - Block Element Modifier

OOCSS

  • single use classes
  • familiar pattern (bootstrap etc...)
  • examples
    • center-vertically
    • primary-button
    • pull-right

SMACSS

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

Module namespacing



.header-logo{

  /* logo styles */

}

.header-dropdown{

  /* dropdown styles */

}

.header-link{

  /* link styles */

}

          

BEM

A naming convention for CSS classes


.header--dropdown{

  /* dropdown styles */

}

.header--dropdown__visible{

  display:block;

}

          

Adaptemy CSS Architecture

  • Separate global and local styles
    • Pages are Modules
    • Modules are Modules
  • Separate development and deploy architecture
  • Keep CSS beside HTML

Global Styles

  • global.css
  • arrows.css
  • buttons.css
  • dropdown.css
  • grid.css
  • grades.css
  • layout.css
  • print.css
  • progress-bars.css
  • reset.css
  • tables.css
  • tooltips.css
  • triangles.css

Local Styes

Namespace each page and module



            

Namespace each page



            #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



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

          

Nesting & ID Selectors

BEM style



.header--dropdown{

  /* dropdown styles */

}

.header--dropdown__visible{

  display:block;

}

          

Adaptemy style



#header .dropdown{

  /* dropdown styles */

}

#header .dropdown.visible{

  display:block;

}

          

Work Practices

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

Refactoring Example


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <span class="bold-and-clickable">click me</span> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est aborum.</p>

Refactoring Example


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <span class="bold clickable">click me</span> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est aborum.</p>

Refactoring Example


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <span class="clickable"><em>click me</em></span> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est aborum.</p>

Refactoring Example


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <a href="..."><em>click me</em></a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est aborum.</p>

Refactoring Example


#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

          

Refactoring Example


#forgotpw-page{

  background-color: $color-background;

  height:100vh;

  .input-details input{

    padding:.5em;

    margin: .5em 0 1em 0;

  }

  button {

    margin:1em;

  }

} // #forgotpw-page

          

Another Refactoring Example


#forgotpw-page{

  background-color: $color-background;

  height:100vh;

  .input-details input{

    padding:.5em;

    margin: .5em 0 1em 0;

  }

  button {

    margin:1em;

  }

} // #forgotpw-page

          


            

Another Refactoring Example


#forgotpw-page{

  .input-details input{

    padding:.5em;

    margin: .5em 0 1em 0;

  }

  button {

    margin:1em;

  }

} // #forgotpw-page



//somewhere in our global styles

.public-page{

  background-color: $color-background;

  height:100vh;

}


            

Stress Testing Your Setup

Stress Testing Your Setup


#forgotpw-page{

  .input-details input{

    padding:.5em;

    margin: .5em 0 1em 0;

  }

  button {

    margin:1em;

  }

} // #forgotpw-page

Stress Testing Your Setup


#forgotpw-page{

  

} // #forgotpw-page

Questions?

tl;dr
You need to refactor your code.