OOCSS + Sass

Takeshi Takatsudo (@Takazudo)

OOCSS

Nicole Sullivan

CSS is too fragile

Not Semantic!!

<a href="#" class="blackborder redbg">Twitter</a>
<a href="#" class="blackborder bluebg">Facebook</a>
Twitter Facebook

Classes should be semantic!

<a href="#" class="twitterbtn">Twitter</a>
<a href="#" class="facebookbtn">Facebook</a>
Twitter Facebook

Hum... It's... semantic... yes...

.twitterbtn {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
  background:red;
}
.facebookbtn {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
  background:blue;
}
Twitter Facebook

OOCSS

<a href="#" class="btnbase twitter">Twitter</a>
<a href="#" class="btnbase facebook">Facebook</a>
Twitter Facebook

Extend base with skin.
Reuse code.

.btnbase {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}
.twitter {
  background:red;
}
.facebook {
  background:blue;
}
Twitter Facebook

Again. Sematic? Humm...

<a href="#" class="btnbase twitter">Twitter</a>
<a href="#" class="btnbase facebook">Facebook</a>
Twitter Facebook

This is "Semantic". But...

<a href="#" class="twitterbtn">Twitter</a>
<a href="#" class="facebookbtn">Facebook</a>
Twitter Facebook

Why OOCSS?

Because CSS is too far from perfect.
Almost impossible to do everything well.
within itself.

What Sass resolves

extending classes in pre-CSS layer

mixin

<a href="#" class="twitterbtn">Twitter</a>
<a href="#" class="facebookbtn">Facebook</a>
@mixin btnbase {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}
.twitterbtn {
  @include btnbase;
  background:red;
}
.facebookbtn {
  @include btnbase;
  background:blue;
}

extend

<a href="#" class="twitterbtn">Twitter</a>
<a href="#" class="facebookbtn">Facebook</a>
.btnbase {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}
.twitterbtn {
  @extend .btnbase;
  background:red;
}
.facebookbtn {
  @extend .btnbase;
  background:blue;
}

Tips. extend is better than mixin

/* mixin result */

.twitterbtn {
  border: 3px solid #000;
  padding: 10px 20px;
  color: #fff;
  border-radius: 10px;
  background: red; }

.facebookbtn {
  border: 3px solid #000;
  padding: 10px 20px;
  color: #fff;
  border-radius: 10px;
  background: blue; }
/* extend result */

.btnbase, .twitterbtn, .facebookbtn {
  border: 3px solid #000;
  padding: 10px 20px;
  color: #fff;
  border-radius: 10px; }

.twitterbtn {
  background: red; }

.facebookbtn {
  background: blue; }

Conclusion

  • CSS is too fragile. Hard to maintain.
  • OOCSS helps it, using multiple classes.
  • Sass does it pre-CSS layer.
  • THIS IS WHY SASS ROCKS!

+α

silent class (Sass3.2)

Abstract class as silent class

%btnbase {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}
.twitterbtn {
  @extend %btnbase;
  background:red;
}
.facebookbtn {
  @extend %btnbase;
  background:blue;
}

Silent classes don't appear in CSS

/* extend result */

.btnbase, .twitterbtn, .facebookbtn {
  border: 3px solid #000;
  padding: 10px 20px;
  color: #fff;
  border-radius: 10px; }

.twitterbtn {
  background: red; }

.facebookbtn {
  background: blue; }
/* with silent */

.twitterbtn, .facebookbtn {
  border: 3px solid #000;
  padding: 10px 20px;
  color: #fff;
  border-radius: 10px; }

.twitterbtn {
  background: red; }

.facebookbtn {
  background: blue; }
999