More of less (take 2)

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.
2.
3.
4.

Have too much stuff
Don’t know what you have
Don’t know where it is
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.

So, stuff, huh?
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!

Which begs the question...

How on Earth do we organise CSS?

The problem
Easy syntax

Cascading Style Sheets (CSS) is a simple mechanism
for adding style (e.g., fonts, colors, spacing) to Web
documents.”

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

Gentle learning curve
Conceptually minimalistic

The problem
Easy syntax

C”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

Gentle learning curve
Conceptually minimalistic
Also minimal support for software engineering

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 Modularization
Separation of Concerns (classitis)

Repetition
button.addComment {

button.search {

color: #ccc;
background: #333;

background: #333;

padding: 10px;
}

color: #ccc;
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”>

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: #ea5430;

button {

}

background-color: @btnColor;
}

label {

label {
background-color: @btnColor;
}

}

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

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

button {
.border-radius();
}

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

label {
.border-radius(5px);
}

Mixins - combined rules
.hide-offscreen() {
position: absolute;
left: -999em;
}

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

button {
.hide-offscreen();
}

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

a.skipToContent {
.hide-offscreen();
}

Nested Rules
p{

p{
text-indent: 1em;
em {

text-indent: 1em;
}

color: #ea5430;

p em {

}
}

color: #ea5430;
}

The ”&” Combinator
The ”this” of CSS

The “&” Combinator
a{

a{
color: #ea5430;

color: #ea5430;

text-decoration: none;

text-decoration: none;

&:hover {

}

text-decoration: underline;
}

a:hover {

&.someClass {
background-color: #ccc;

text-decoration: underline;
}

}
}

a:someClass {
background-color: #ccc;
}

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


.hide-offscreen();

position: absolute;

& + label {

left: -999em;


}

&:before {

input[type=checkbox] + label {

content: ””;
.icon();

}

}

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

&:hover {

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

background-color: #cc4b29;
}
&:active {
background-color: #cc4b29;
}
}
}

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

Really wild...


.hide-offscreen();

position: absolute;

& + label {

left: -999em;


}

&:before {…}

input[type=checkbox] + label {

&:hover {…}
&:active {…}

}

}

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

&:checked + label {

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

&:before {…}
&:hover {…}

}

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

&:active {…}
}

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

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

Even backwards...

input[type=checkbox] { … }

.style-1();
.someParent & {
.style-2();
}
}

.someParent input[type=checkbox] { … }

Operations
@colorRegular: #ea5430;

@colorRegular: #ea5430;

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

@colorHover: #d9431f;

p {color: @colorRegular}
p {color: @colorHover}
p {color: @colorActive}

@colorActive: #c8320e;

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!

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

More of less (take 2)

More Related Content

Viewers also liked (9)

Similar to More of less (take 2) (20)

Recently uploaded (20)

More of less (take 2)