Post on 13-Dec-2014
description
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