Best Practice CSS

Rimian Perkins @rimian Senior Drupal Developer at PreviousNext: previousnext.com.au @previousnext

It's about...

Representing design faithfully.

Enforcing the graphic designer's rules. Giving CSS more structure

I CSS

Abstracts design from content Simple language structure (insert buzz word) Cascades Tolerates errors

It's a jungle out there...

A typical project may have:

Many CSS files More than one developer A distributed team The natural tendency for information to become chaotic.

Beware of Software Entropy

But wait. There's more.

Imposed Duplication

Attributes and Values must be re applied Block hierarchy unlike DOM

Duplication of values
Designer's idea: I really like blue .a { color: #00c; } .b { border-bottom: #00c; } .c { background-color: #00c; }

A bit more complicated

Designer: I really like blue colour schemes. .fav_color { color: #005; border-color: #00f; } .contrast { color: #660; }

Complicated
Colours for <table> in garland theme: #d3e7f4, #494949, #6f9dbd, #d3e7f4, #edf5fa #fff, #ffb, #ffd, #ddecf5, #e6f1f7, #fff, #b4d7f0 #d4e7f3, #455067

Repetition of spacing
Designer: I want all my margins 10 pixels .container { margin: 10px; } .. h2 { margin-bottom: 10px; }

The Reverse: Ambiguity

The image is 200 pixels x 100 pixels .a { width: 200px; height: 100px; } The columns are 200 pixels wide .b { width: 200px; }

Context of Block Declarations

.a {} .a .b { } .a .b .c{ } .a .b .d{ } .a .x { }

It's just an expression

.col-1 { width: 80px; } .col-2 { width: 160px; } .col-3 { width: 240px; } .col-4 { width: 320px; }

Technical Cost
The overhead of managing CSS

Design knowledge must be stored outside CSS Developers have to reverse engineer. Flat structure increases name collisions The Original Design Idea is lost in the implementation. Software Entropy

Definitions
A Framework

An abstraction in which common code providing generic functionality can be overridden by user code, thus providing specific functionality. A way of hiding the implementation details of a particular set of functionality

An Abstraction Layer

Drum Roll Please

Why not write CSS through an abstraction layer?

Hide the evils of duplication Enhance the good features Write the code that writes the code.

Sass - Syntactically Awesome Stylesheets

sass-lang.com

It's a Ruby Gem Sass is an extension of CSS. Its translated to well-formatted, standard CSS.

Related to: Less

Features of Sass

Variables Operations Control Structures Functions Selector Inheritance and Mixins Nested Classes Firebug plugin and console thingy

How do I get it?

$ gem install haml $ mv style.css style.scss $ sass --watch style.scss:style.css OR Drupal Projects: Sass, Less, xCSS OR (for mac OSX) incident57.com/less

Variables
$hex: #9cc; $grid: 10px; .a {color: $hex; margin: $grid;} .a {color: #9cc; margin: 10px;}

Operations
$hex: #67ef54; .a { color: $hex + #111; } $grid: 10px; img.thumb { width: $grid * 16; height: $grid * 9 }

Selector Inheritance
.a { color: red; } .b { width: 100px; } .my_class{ @extend .a; @extend .b; } .. .my_class { color: red; width: 100px; }

Mixins
@mixin spacer ($arg) { padding: $arg; } .b { @include spacer(10px); color: red; }

.b { padding: 10px; color: red; }

Here's one I prepared earlier.

Define units Create reusable things Compose the things like design requirement Grids are good! Run UI prototype in parallel to graphic design.

https://github.com/rimian/css-framework

HTML5 Document
<div id="container"> <header></header> <aside id="sidebar-first"> <div class="content"><h2></h2></div> </aside> <div id="content"> <div class="content"><h2></h2></div> </div> <aside id="sidebar-second"> <div class="content"><h2></h2></div> </aside> </div> <footer></footer>

Create Elements
@mixin positioning() { // Position containers on the page } @mixin space($option) { // Apply default white space around things // Option for top & bottom or sides or whatever } @mixin coloring($option) { //Apply colour. With reverse out option. } @mixin corners() { // Handle browser support and apply corners } @mixin bordering() { // Apply a standard border to some things }

Define Units
grid: 10px; $page_width: $grid * 120; $col_width: $grid * 20; $hex_bg: #efefef; $hex_fg: #111; $hex_content: white; $hex_low: darken($hex_bg, 30%); $corners: $grid * 0.8; $small: $grid * 0.9; @import 'components.scss';

Compose CSS
header { @include corners(); @include space(sides); div { @include space(ends); } } aside { @include positioning(column); div.content { @include corners(); @include space(all); }

FIN
Sass - sass-lang.com Less - lesscss.org Less Framework - lessframework.com Less.app - incident57.com/less xCSS (php) - xcss.antpaw.org The Pragmatic Programmer pragprog.com https://github.com/rimian/css-framework