Charla en el marco del a tercera Buenos Aires Front-end Meetup. Miles de líneas de código CSS pueden significar la locura en proyectos grandes. Mostraremos una metodología para lograr código fácil de mantener: CSS Atómico con la ayuda de OOCSS y SASS.

1. ATOMIC CSS
@ L U C A S M O U R E L L E
# B A F r o n t e n d

2. Lucas Mourelle
@ l u c a s m o u r e l l e
* Líder de diseño en OmbuLabs
* Profesor en FADU/UBA y Fundación Gutenberg
d i s e ñ a d o r · f r o n t e n d e r · p r o f e s o r

3. PROBLEMA

7. ?

8. FILOSOFÍA TECNOLOGÍA ESTRUCTURA

9. FILOSOFÍA
OOCSS
Object Oriented CSS

10. DISEÑAR SISTEMAS,
NO PÁGINAS
Design systems, not pages

11. ESTRUCTURA COSMÉTICA

12. .default-button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
text-decoration: none;
background: #0f0;
color: #000;
}
.button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
text-decoration: none;
background: #ddd;
color: #000;
}

13. .default-button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
text-decoration: none;
background: #0f0;
color: #000;
}
.button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
text-decoration: none;
background: #ddd;
color: #000;
}

14. .button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
text-decoration: none;
background: #ddd;
color: #000;
}
.button.default {
background: #0f0;
color: #000;
}
.button.big {
font-size: 2em;
}
.button.small {
font-size: .6em;
}

15. C O N T E N E D O R
CONTENIDO

16. .dialog {
border-radius: 5px;
background: #fff;
box-shadow: rgba(0,0,0,0.3) 0px 2px 6px;
overflow: hidden;
max-width: 760px;
margin: 1em auto 1em;
padding: 1em;
}
.dialog header h1 {
font-size: 1.5625em;
font-weight: 700;
color: #fff;
text-align: center;
padding: 1em;
}

17. .dialog {
border-radius: 5px;
background: #fff;
box-shadow: rgba(0,0,0,0.3) 0px 2px 6px;
overflow: hidden;
max-width: 760px;
margin: 1em auto 1em;
padding: 1em;
}
.dialog header h1 {
font-size: 1.5625em;
font-weight: 700;
color: #fff;
text-align: center;
padding: 1em;
}

18. .dialog {
border-radius: 5px;
background: #fff;
box-shadow: rgba(0,0,0,0.3) 0px 2px 6px;
overflow: hidden;
max-width: 760px;
margin: 1em auto 1em;
padding: 1em;
}
.heading {
font-size: 1.5625em;
font-weight: 700;
color: #fff;
text-align: center;
padding: 1em;
}

19. DRY
DON’T REPEAT YOURSELF
DON’T REPEAT YOURSELF
DON’T REPEAT YOURSELF
DON’T REPEAT YOURSELF
DON’T REPEAT YOURSELF
DON’T REPEAT YOURSELF
DON’T REPEAT YOURSELF

20. TECNOLOGÍA
SASS
Syntactically Awesome Style Sheets

21. SCSS CSS
SASS
LESS

22. VARIABLES

23. .button {
background: #66ffcc;
font-size: 1.2em;
margin-right: 20px;
}
.header {
color: #66ffcc;
font-weight: 700;
margin-bottom: 20px;
}

24. .button {
background: #66ffcc;
font-size: 1.2em;
margin-right: 20px;
}
.header {
color: #66ffcc;
font-weight: 700;
margin-bottom: 20px;
}

25. $brand-color: #66ffcc;
$module: 20px;
!
.button {
background: $brand-color;
font-size: 1.2em;
margin-right: $module;
}
.header {
color: $brand-color;
font-weight: 700;
margin-bottom: $module;
}

26. CÁLCULOS

27. $brand-color: #66ffcc;
$module: 20px;
!
.button {
background: $brand-color;
font-size: 1.2em;
margin-right: $module;
}
.header {
color: $brand-color;
font-weight: 700;
margin-bottom: 40px;
}

28. $brand-color: #66ffcc;
$module: 20px;
!
.button {
background: $brand-color;
font-size: 1.2em;
margin-right: $module;
}
.header {
color: $brand-color;
font-weight: 700;
margin-bottom: $module*2;
}

29. NESTING

30. .button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
background: #ddd;
}
.button:hover {
background: #fff;
}
.button:active {
background: #bbb;
}

31. .button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
background: #ddd;
}
.button:hover {
background: #fff;
}
.button:active {
background: #bbb;
}

32. .button {
display: inline-block;
border-radius: 3px;
padding: .4em .8em;
border: none;
background: #ddd;
&:hover {
background: #fff;
}
&:active {
background: #bbb;
}
}

33. IMPORT PARTIALS

34. .main-content {
float: left;
width: 65%;
}
.secondary-content {
float: right;
width: 30%;
}
CSS
_layout.scss style.scss style.css
import "layout";
!
.button {
background: #6f0;
font-size: 1.2em;
padding: .2em;
}
.main-content {
float: left;
width: 65%;
}
.secondary-content {
float: right;
width: 30%;
}
.button {
background: #6f0;
font-size: 1.2em;
padding: .2em;
}

35. MIXINS & HERENCIA

36. @mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
!
.button {
@include border-radius(5px);
}
.dialog {
@include border-radius(10px);
}
.button {
-webkit-border-radius: 5px;
border-radius: 5px;
}
.dialog {
-webkit-border-radius: 10px;
border-radius: 10px;
}
CSSSCSS

37. %alert-base {
display: inline-block;
padding: .3em;
text-decoration: none;
}
!
.alert-warning {
@extend %alert-base;
background: #ffffdf;
color: #000;
}
.alert-error {
@extend %alert-base;
background: #f00;
color: #fff;
}
.alert-warning, .alert-error {
display: inline-block;
padding: .3em;
text-decoration: none;
}
!
.alert-warning {
background: #ffffdf;
color: #000;
}
.alert-error {
background: #f00;
color: #fff;
}
CSSSCSS

38. COLOR FUNCTIONS

39. CSS
SCSS
$brand-color: #ff0000;
!
.alert {
border: 1px solid $brand-color;
color: darken($brand-color, 20%);
background: lighten($brand-color, 40%);
}
.alert {
border: 1px solid #ff0000;
color: #990000;
background: #ffcccc;
}

40. You got me at variables!

41. ESTRUCTURA
ATOMIC

43. DIVIDE & CONQUER

44. ATOMIC DESIGN
VERSIÓN ORIGINAL
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
by Brad Frost

45. Brad Frost
@brad_frost
bradfrostweb.com
https://vimeo.com/95626309 =P
REALLY COOL ATOMIC DESIGN TALK
patternlab.io

46. ATOMIC CSS
ATOMS MOLECULES PAGESQUARKSUTILITIES
VERSIÓN ALTERNATIVA
Robin Rendle y otros

47. ATOMS MOLECULES PAGESQUARKSUTILITIES

48. ATOMS MOLECULES PAGESQUARKSUTILITIES

49. ATOMS MOLECULES PAGESQUARKSUTILITIES

50. ATOMS MOLECULES PAGESQUARKSUTILITIES

51. ATOMS MOLECULES PAGESQUARKSUTILITIES

52. 1-utilities
2-quarks
3-atoms
4-molecules
5-pages
SCSS
style.scss

53. 1-utilities
SCSS
style.scss
_variables.scss
_mixins.scss
_placeholders.scss
_grid.scss
!
_typography.scss
_forms.scss
!
_brand.scss
_buttons.scss
_errors.scss
!
_dialog.scss
_footer.scss
_navbar.scss
!
_home.scss
_features.scss
_examples.scss
2-quarks
3-atoms
4-molecules
5-pages

54. // 1-UTILITIES
@import "1-utilities/variables";
@import "1-utilities/mixins";
@import "1-utilities/placeholders";
@import "1-utilities/grid";
!
// 2-QUARKS
@import "2-quarks/typography";
@import "2-quarks/forms";
!
// 3-ATOMS
@import "3-atoms/brand";
@import "3-atoms/buttons";
@import "3-atoms/errors";
!
// 4-MOLECULES
@import "4-molecules/dialog";
@import "4-molecules/footer";
@import "4-molecules/navbar";
!
// 5-PAGES
@import "5-pages/home";
@import "5-pages/features";
@import "5-pages/examples";
SCSS style.scss

55. // Componente
.button {
display: inline-block;
border-radius: $global-radius;
padding: .4em .8em;
border: none;
text-decoration: none;
background: $button-background-color;
color: $button-text-color;
// Modificadores
&.default {
background: $button-default—background-color;
color: $button-default-text-color;
}
&.big {
font-size: 2em;
}
&.small {
font-size: .6em;
}
}
SCSS _buttons.scss
3-atoms

56. // Componente
.component {
!
!
!
!
!
!
!
// Modificadores
!
!
!
!
!
!
!
!
!
!
}
SCSS _component.scss
n-layer
ESTRUCTURAL
COSMÉTICO
modificadores, estados, contextos

57. ATOMIC CSS
ATOMS MOLECULES PAGESQUARKSUTILITIES
VERSIÓN ALTERNATIVA

58. FILOSOFÍA TECNOLOGÍA ESTRUCTURA
OOCSS SASS ATOMIC

59. GRACIAS!
L U C A S M O U R E L L E
# B A F r o n t e n d

60. AT O M I C D E S I G N
B r a d F r o s t ( @ b r a d _ f r o s t )
h t t p : / / p a t t e r n l a b . i o /
h t t p : / / b r a d f r o s t w e b . c o m / b l o g / p o s t / a t o m i c - w e b - d e s i g n /
AT O M I C C S S ( w i t h S A S S )
R o b i n R e n d l e ( @ r o b i n r e n d l e )
h t t p : / / w w w. s m a s h i n g m a g a z i n e . c o m / 2 0 1 3 / 0 8 / 0 2 / o t h e r- i n t e r f a c e - a t o m i c -
d e s i g n - s a s s /
O O C S S
N a t i D e v a l l e ( @ t a l y )
h t t p : / / e s . s l i d e s h a r e . n e t / n d e v a l l e / a n - i n t r o d u c t i o n - t o - o b j e c t - o r i e n t e d - c s s
C S S AT Ó M I C O
O m b u S h o p B l o g
h t t p : / / w w w. o m b u s h o p . c o m / b l o g / d i s e n o - w e b / c s s - a t o m i c o . h t m l

61. ¿PREGUNTAS?

62. GRACIAS!
L U C A S M O U R E L L E
@ l u c a s m o u r e l l e
# B A F r o n t e n d