SMACSS – TIPS & TRICKS – How our client did their CSS?

CSS2

.block {}               /*higher level of an abstraction or component */
.block__element {}      /*descendent of block, usually would be .block .element */
.block--modifier {}     /*different state version of block, usually would be .block.modifier */

/* module overview */
.module-overview {}
            

Hypen and Underscores?

/* paragraph descendant inside module overview */ 
.module-overview__p {}

/* module overview with current state*/
.module-overview--current {}

/* paragraph descendant inside module overview in which the paragraph is in current state*/
.module-overview__p--current {}  
          

HTML with regular CSS

<section class="module-overview current"><!-- the current class can have hidden properties -->     
  <p>Content 1</p>
  <div class="content"><!-- this content class is very general and easy to confuse -->
    <p class="current">Content 2</p>
  </div>
</section>
            

BEM

<section class="module-overview module-overview--current">
  <p class="module-overview__p">Content 1</p>
  <div class="module-overview__content">
    <p class="content__p--current">Content 2</p>
  </div>
</section>
            

current class can have hidden properties not for module-overview

It looks ugly.

And if you overdo it

.module-1--show-content{
  min-height: 280px;
  transform: translatey(0);
}

.module-1__languageDropdown{
  @include clearfix;
  pointer-events: auto;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
}

.module-1__content {
  padding-top: 1px;
  position: relative;
  pointer-events: none;
  width: 100%;
  margin: 0 auto;
  transition: opacity 1s;
  z-index: 5;
}

.module-1__content--hide-content {
  opacity: 0;
}

.module-1__content__logo {
  margin: 0 auto 5px auto;
}

          

It can get really ugly

.module-1__content__headline-container {
  position: relative;
}

.module-1__content__headline-container__headline {
  width: 100%;
  overflow: hidden;
  transition: opacity 1s;
  text-align: center;
}

.module-1__content__headline-container__headline__main-headline {
  display: block;
}

.module-1__content__headline-container__headline__alt-headline {
  display: none;
}

.module-1__content__headline-container__headline--show-headline__headline-0 {
  opacity: 1; height: auto;
}

.module-1__content__headline-container__headline--show-headline__headline-1 {
  opacity: 0; height: 0;
}

.module-1__content__headline-container__headline--show-headline__headline-2 {
  opacity: 0; height: 0;
}

.module-1__content__headline-container__headline--show-headline__headline-3 {
  opacity: 0; height: 0;
}
          

For starter, take it with a grain of salt and don't overdo it

// Embrace SASS

.module-1 {
  .show-headline__headline-3 {
    opacity: 0; 
    height: 0;
  }
}
           

You will start liking it.

SMACSS

5 Main Categories

• BASE
• LAYOUT
• MODULE
• STATE
• THEME

BASE

Are basically, base styles.

html, body, form { 
  margin: 0; padding: 0;
}

a {
  color: black;
}
                
            

LAYOUT

Major components

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

.section {
  display: block;
  position: relative;
  width: 100%;
}
                
            

MODULE

Re-usable minor components

.callouts {
  background: rgb(100,100,100);
  color: white;
  display: block;
  width: 300px;
  height: 300px;
}

.product {
  width: 100%;
  height: 100px;
} 

.module > h2 {
    padding: 5px;
}

.module span {
    padding: 5px;
}
            

STATE

State that overrides default styles

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}
            

THEME

Generally you won't use theme

But it's useful when you have multiple theme, typography and localization.

NOT DRY

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;                      /*NOT DRY*/
  background: linear-gradient(#ccc, #222);     /*NOT DRY*/
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;   /*NOT DRY*/
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;                       /*NOT DRY*/
  background: linear-gradient(#ccc, #222);      /*NOT DRY*/
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;    /*NOT DRY*/
}
           

with OOCSS

.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
            

Even better with SASS

@mixin skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

.button {
  @include skin;
  width: 200px;
  height: 50px;
}

.box {
  @include skin;
  width: 400px;
  overflow: hidden;
}
            

TIPS & TRICKS

• Use these techniques according to your needs.
• Mix, match and cherry pick them.
• BE CONSISTENT with your team.

How our client did their CSS?

SALESFORCE (2013)

• Custom YUI CSS Frameworks
• Lose OOCSS and without SASS

APPLE (2014)

• Custom Foundation CSS Frameworks
• Strict OOCSS with SASS

How AKQA SF do CSS?

Audi/ Visa

• Custom Twitter Bootstrap
• OOCSS with SASS

Others

• Some OOCSS
• SMACSS

TL ; DR

• Use BEM for good naming convention but make sure to use other technique too in medium to large project.
• Use SMACSS for organizing and modularizing your CSS structure, but don’t over organize it in small projects.
• Use OOCSS to make your project scalable and object oriented, use it for all projects.