Advanced CSS

Laurynas Veržukauskas

NFQ Akademija, 2014

What's wrong with CSS? 

OOCSS
Sprites/Fonts
Precompilers

Goals

• Maintainable

• Reusable

• Lots of classes
• Lot of helper classes
• Shorter selectors
• Namespacing built-in into selector naming

<div class="widget helper1 helper2 helper3">
...
</div>

.widget { 
}

.helper1 {
}

.helper2 {
}

.helper3 {
}

Object Oriented CSS

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
		<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"></li>
	</ul>
</div>

• Lots of classes
• Lot of helper classes
• Shorter selectors
• Namespacing built-in into selector naming

Object Oriented CSS

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

Small helper classes

https://github.com/twbs/bootstrap

Problems

<div class="widget helper1 helper2 helper3">
...
</div>


<div class="widget2 helper2 helper3">
...
</div>

.widget { 
}

.helper1 {
}

.helper2 {
 padding:5px
 color:blue
}

.helper3 {
 padding:10px
 color:red
}

Widget2 needs color:blue & padding:10px

h1.primary { 
 color: blue 
}

p {
 color: blue 
}

a {
 color: blue 
}

div.widget {
 color: blue 
}

<h1 class="primary>...</h1>
...
<p></p>
<a></a>
...
...
<p></p>
<p></p>
...
<div class="widget"></div>

Without helper classes

.brand-color {
 color: blue
}

<h1 class="primary brand-color">...</h1>
...
<p class="brand-color"></p>
<a class="brand-color"></a>
...
...
<p class="brand-color"></p>
<p class="brand-color"></p>
...
<div class="widget brand-color"></div>

Helper classes

h1.primary { 
 color: blue 
}

p {
 color: blue 
}

a {
 color: blue 
}

div.widget {
 color: blue 
}

<h1 class="primary>...</h1>
...
<p></p>
<a></a>
...
...
<p></p>
<p></p>
...
<div class="widget"></div>

With preprocessor

@mixin brand-color {
 color: blue
}

h1.primary { 
 include brand-color(); 
}

p {
 include brand-color(); 
}

a {
 include brand-color(); 
}

div.widget {
 include brand-color(); 
}

Questions

and

Workshop