More of {less}Guilherme Zühlke O’Connor

The Author

Head of front end development at Snupps

Snupps

We are a B2C, cross platform app on the web and mobile that helps you organise your stuff.

We are an early stage startup.We are getting ready to launch.

The problem

When you get to a certain point in life, you

1. Have too much stuff2. Don’t know what you have3. Don’t know where it is4. Don’t have quick access to the details

The solution

Snupps is the one place for you to store and keep track of your stuff and have it at your fingertips at

all times.

Lots of it...Scattered around...Difficult to find…

So, stuff, huh?

Lots of it...Scattered around...Difficult to find…

Surely I’m not the only one who sees a resemblance with CSS!

So, stuff, huh?

Which begs the question...

Which begs the question...

How on Earth do we organise CSS?

The problem

Easy syntaxGentle learning curveConceptually minimalistic

”Cascading Style Sheets (CSS) is a simple mechanism

for adding style (e.g., fonts, colors, spacing) to Web documents.”

http://www.w3.org/Style/CSS/Overview.en.html

The problem

Easy syntaxGentle learning curveConceptually minimalistic

Also minimal support for software engineering

CC”Cascading Style Sheets (CSS) is a simple

mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.”

hhttp://www.w3.org/Style/CSS/Overview.en.html

Simple enough

CSS is simple enough for a simple document, but today’s average page on a web app is an amalgamation of several heavily complex design elements.

Every element may itself depend on an amalgamation of different techniques, glued together for the overall effect.

Each element on the page may be used more than once. Maybe on different pages. Maybe variations of its basic form.

Oh, did I just say Web App instead of Web document?

Oh, did I just say Web App instead of Web document?

Oops...

Compromises

Invariably, writing enough CSS for a website will require that at least one of the following is compromised

DRY (Don’t Repeat Yourself)CSS ModularizationSeparation of Concerns (classitis)

Repetition

button.addComment {

color: #ccc;

background: #333;

padding: 10px;

}

button.search {

color: #ccc;

background: #333;

padding: 10px;

}

Don’t Repeat Yourself

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system

Poor Grouping

button.addComment,button.search,button.login {

color: #ccc;background: #333;padding: 10px;

}

.comment .timestamp,

.notification .timestamp,

.creation .timestamp {color: #ccc;background: #333;padding: 10px;

}

DOM pollution and classitis.button-1 {

color: #ccc;background: #333;padding: 10px;

} <button class=”addComment button-1”>

<button class=”search button-1”>

<button class=”login button-1”>

Enter CSS preprocessing

A CSS preprocessor is an augmentation of the CSS language that can be run through a script to generate native CSS a browser can understand.

Why CSS preprocesing?

CSS preprocessing gives the developer tools to organize their code and create reusable components. It allows for the code to be grouped in semantic, logical components that can be defined elsewhere than where they are being used.

Variables@btnColor: #ea5430

button {background-color: @btnColor;

}

label {background-color: @btnColor;

}

button {background-color: #ea5430;

}

label {background-color: #ea5430;

}

Mixins - browser prefixes.border-radius(@n: 3px) { -webkit-border-radius: @n; -moz-border-radius: @n; border-radius: @n;}

button {.border-radius();

}

label {.border-radius(5px);

}

button { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

label { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

Mixins - combined rules.hide-offscreen() {

position: absolute;left: -999em;

}

button {.hide-offscreen();

}

a.skipToContent {.hide-offscreen();

}

button {position: absolute;left: -999em;

}

a.skipToContent {position: absolute;left: -999em;

}

Nested Rulesp {

text-indent: 1em;

em {

color: #ea5430;

}

}

p {

text-indent: 1em;

}

p em {

color: #ea5430;

}

The ”&” CombinatorThe ”this” of CSS

The “&” Combinatora {

color: #ea5430;

text-decoration: none;

&:hover {

text-decoration: underline;

}

&.someClass {

background-color: #ccc;

}

}

a {

color: #ea5430;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

a:someClass {

background-color: #ccc;

}

Going wild...input[type=checkbox] {

.hide-offscreen();

& + label {

background-color: #ea5430;

&:before {

content: ””;

.icon();

}

&:hover {

background-color: #cc4b29;

}

&:active {

background-color: #cc4b29;

}

}

}

input[type=checkbox] {

position: absolute;

left: -999em;

}

input[type=checkbox] + label {

background-color: #ea5430;

}

input[type=checkbox] + label:before { … }

input[type=checkbox] + label:hover { … }

input[type=checkbox] + label:active { … }

Really wild...input[type=checkbox] {

.hide-offscreen();

& + label {

background-color: #ea5430;

&:before {…}

&:hover {…}

&:active {…}

}

&:checked + label {

&:before {…}

&:hover {…}

&:active {…}

}

}

input[type=checkbox] {

position: absolute;

left: -999em;

}

input[type=checkbox] + label {

background-color: #ea5430;

}

input[type=checkbox] + label:before { … }

input[type=checkbox] + label:hover { … }

input[type=checkbox] + label:active { … }

input[type=checkbox]:checked + label:before { … }

input[type=checkbox]:checked + label:hover { … }

input[type=checkbox]:checked + label:active { … }

Even backwards...input[type=checkbox] {

.style-1();

.someParent & {

.style-2();

}

}

input[type=checkbox] { … }

.someParent input[type=checkbox] { … }

Operations

@colorRegular: #ea5430;

@colorHover: @colorRegular - #111; @colorActive: @colorRegular - #222;

p {color: @colorRegular}

p {color: @colorHover}

p {color: @colorActive}

@colorRegular: #ea5430; @

@colorHover: #d9431f;@

@colorActive: #c8320e;

All together now!

There’s much more...

Guarded mixins, client side usage, watch mode, javascript functions, reading parameters from other properties, debuggable in Web Inspector…

The list goes on.

What about SASS?

Less is not the only CSS preprocessor. There are different flavours of preprocessors with pros and cons. What we covered here, can be used on SASS as well, though the syntax may differ.

Architecture

This presentation is not meant to be an exhaustive overview of less syntax but a display of how it can be used to build a powerful CSS architecture for modern day, complex web apps.

Less is almost as easy to learn as CSS. Go nuts!

Questions?

Guilherme Zühlke O’Connor, London, Nov/2013