ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

More of less (take 2)

?
?
Guilherme Z¨¹hlke O'Connor
Guilherme Z¨¹hlke O'Connor

This document discusses using CSS preprocessors like Less to organize complex CSS for modern web apps. It outlines problems with traditional CSS like repetition and lack of variables/nesting. CSS preprocessors allow features like variables, mixins, nested rules and operations to organize CSS into logical, reusable components. This improves maintainability by reducing repetition and separating structure from skin. The document gives examples of how preprocessor features can be combined to build a robust CSS architecture.

1 of 42
Download to read offline
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!
More of less (take 2)
Which begs the question...
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
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 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¡±>
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: #ea5430; button { } background-color: @btnColor; } label { label { background-color: @btnColor; } background-color: #ea5430; }
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] { input[type=checkbox] { .hide-offscreen(); position: absolute; & + label { left: -999em; background-color: #ea5430; } &:before { input[type=checkbox] + label { content: ¡±¡±; .icon(); background-color: #ea5430; } } 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... input[type=checkbox] { input[type=checkbox] { .hide-offscreen(); position: absolute; & + label { left: -999em; background-color: #ea5430; } &:before {¡­} input[type=checkbox] + label { &:hover {¡­} &:active {¡­} background-color: #ea5430; } } 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] { 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;
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

More Related Content

More of less (take 2)

  • 1. More of {less} Guilherme Z¨¹hlke O¡¯Connor
  • 2. The Author Head of front end development at Snupps
  • 3. 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.
  • 4. 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
  • 5. 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.
  • 6. So, stuff, huh? Lots of it... Scattered around... Difficult to find¡­
  • 7. So, stuff, huh? Lots of it... Scattered around... Difficult to find¡­ Surely I¡¯m not the only one who sees a resemblance with CSS!
  • 9. Which begs the question...
  • 10. Which begs the question... How on Earth do we organise CSS?
  • 11. 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
  • 12. 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
  • 14. 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.
  • 15. Every element may itself depend on an amalgamation of different techniques, glued together for the overall effect.
  • 16. Each element on the page may be used more than once. Maybe on different pages. Maybe variations of its basic form.
  • 17. Oh, did I just say Web App instead of Web document?
  • 18. Oh, did I just say Web App instead of Web document? Oops...
  • 19. 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)
  • 20. Repetition button.addComment { button.search { color: #ccc; background: #333; background: #333; padding: 10px; } color: #ccc; padding: 10px; }
  • 21. Don¡¯t Repeat Yourself Every piece of knowledge must have a single, unambiguous, authoritative representation within a system
  • 22. 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; }
  • 23. 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¡±>
  • 25. 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.
  • 26. 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.
  • 27. Variables @btnColor: #ea5430 button { background-color: #ea5430; button { } background-color: @btnColor; } label { label { background-color: @btnColor; } background-color: #ea5430; }
  • 28. 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); }
  • 29. 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(); }
  • 30. Nested Rules p{ p{ text-indent: 1em; em { text-indent: 1em; } color: #ea5430; p em { } } color: #ea5430; }
  • 31. The ¡±&¡± Combinator The ¡±this¡± of CSS
  • 32. 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; }
  • 33. Going wild... input[type=checkbox] { input[type=checkbox] { .hide-offscreen(); position: absolute; & + label { left: -999em; background-color: #ea5430; } &:before { input[type=checkbox] + label { content: ¡±¡±; .icon(); background-color: #ea5430; } } input[type=checkbox] + label:before { ¡­ } &:hover { input[type=checkbox] + label:hover { ¡­ } background-color: #cc4b29; } &:active { background-color: #cc4b29; } } } input[type=checkbox] + label:active { ¡­ }
  • 34. Really wild... input[type=checkbox] { input[type=checkbox] { .hide-offscreen(); position: absolute; & + label { left: -999em; background-color: #ea5430; } &:before {¡­} input[type=checkbox] + label { &:hover {¡­} &:active {¡­} background-color: #ea5430; } } 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 { ¡­ }
  • 35. Even backwards... input[type=checkbox] { input[type=checkbox] { ¡­ } .style-1(); .someParent & { .style-2(); } } .someParent input[type=checkbox] { ¡­ }
  • 36. Operations @colorRegular: #ea5430; @colorRegular: #ea5430; @colorHover: @colorRegular - #111; @colorActive: @colorRegular - #222; @colorHover: #d9431f; p {color: @colorRegular} p {color: @colorHover} p {color: @colorActive} @colorActive: #c8320e;
  • 38. 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.
  • 39. 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.
  • 40. 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!