CSS patterns

Something to make
order in your CSS

A little diversion from last week:
What is code?

Room stats

(hands up!)

What is
CSS?

Programming language?

Mmmh, not so much

p {
  color: beige;
}

(yes, CSS has more then 16 colors, use them)

Elements of CSS

Rules, selectors, properties.
And you are (almost) good to go!

Different types of basic selector

/* Element */
h1 {}

/* Class */
.isolated {}

/* Identifier */
#products {}

There's more, much more, but stick with that, for the moment.

Power comes from composition

/*
 * Composition allows to take advantage of
 * the HTML hierarchies (section and header
 * are HTML5 elements).
 */
.main-column section header h1 {}

Everything is in the specificity

<header id="excerpt" class="important">
  <h1>I'm the title of the excerpt</h1>
</header>

/*
 * Who wins?
 */
h1            { color: slategrey; }
header h1     { color: bisque;    }
.important h1 { color: lavender;  }
#excerpt h1   { color: chocolate; }

Specificity calculator and specificity hack may be useful.

CSS from the real world: stats!

Thousands of rules and selectors?

The smaller the set of tools a language provides, the more the burden to decide how to use them lies with the developer

Choose you're best practice
and stick with it!

Taming the beast: patterns (or, maybe better, "architectural framework"):

They use different approaches

OOCSS says: split content from presentation, do it with classes.

.media {}
.media .img {}
.media .img img {}
.bd {}

SMACSS

Is all about categorizing CSS rules

/* Base rules */
html, body, form {
  margin: 0; padding: 0;
}

input[type=text] {
  border: 1px solid #999;
}

a {
  color: #039;
}

/* Layout rules */
#header, #article, #footer {
  width: 960px;
  margin: auto;
}

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

/* Module rules */
.module > h2 {
    padding: 5px;
}

.module span {
    padding: 5px;
}

/* State rules */
.is-tab-active {
  background-color: white;
  color: black;
}

BEM moves on and says: select blocks, select elements inside them, when necessary modify them

.media {}
.media__img {}
.media__img img {}
.media__bd {}

.media--reverse {}

(and do all this stuff respecting a strict convention on class names)

All these techniques use classes.

That's fine, but… what if you decide to use a front-end framework based on classes too? Like, let's say:

Hell of
classes!

<div class="row">
  <div class="col-md-8 col-main">
    <p class="text-lowercase">A</p>
  </div>
  <div class="col-md-4">
    <p class="text-lowercase">B</p>
  </div>
</div>
<div class="row">
  <div class="col-md-8">Entry level</div>
  <div class="col-md-4">1234</div>
</div>

"semantic" framework
and a CSS preprocessor

Bourbon plus Neat plus SASS or Less

In HTML:

<section>
  <aside>What is it about?</aside>
  <article>Semantic grid framework...</article>
</section>

And in CSS:

section {
  @include outer-container;

  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}

AMCSS

A different direction

Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements.

In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS.

/* From: */
<a class="btn btn-primary btn-lg">Click me!</a>

/* To: */
<a am-Button="primary large">Click me!</a>

/* Or: */
<a data-am-Button="primary large">Click me!</a>

/* In CSS: */
[am-Button] {}
[am-Button~="primary"] {}
[am-Button~="large"] {}

So perfect!