1. Un mejor CSS
Planeando para no sufrir en el futuro.
DrupalCon Latin America - Febrero 2015

2. Jose Leiva
@leivajd // leivajd.com

3. 2007 web

4. 2010 Drupal

7. Objetivo

8. Que nuestro “yo” del futuro
no nos odie ;)
Objetivo

9. 1CSS es fácil

10. selector

11. selector{
propiedad: valor;
}

12. selector{
propiedad: valor;
propiedad: valor;
}

13. selector{
propiedad: valor;
}
selector{
propiedad: valor;
}
selector{
propiedad: valor;
}
selector{
propiedad: valor;
}
} .css

14. CSS es fácil, verdad?

15. Escribir CSS es sencillo.
Pero...

16. .headerMenu ul.menu li.active-trail a {
background: #D0DFEF;
}

17. .view-news-and-press.news-right-side-bar-
block .views-row {
position: relative;
min-height: 60px;
}

18. .item-title,
#main-column .item-title,
#second-column .item-title,
.primary-lead-area .item-title,
.second-lead-area .item-title {
font-size: 18px;
border: 0;
font-family: Georgia;
margin: 0;
clear: none;
padding-bottom: 5px;
}

19. • Alta especificidad

20. • Alta especificidad
• Alta dependencia HTML

21. • Alta especificidad
• Alta dependencia HTML
• Golpea performance

22. • Alta especificidad
• Alta dependencia HTML
• Golpea performance
• Difícil de reutilizar

23. • Alta especificidad
• Alta dependencia HTML
• Golpea performance
• Difícil de reutilizar
:(

24. Escribir CSS es sencillo.
La arquitectura no.

25. Arquitectura
Herramientas, planear & escribir
CSS de manera que el código sea
de calidad

26. • Performance

27. • Performance
• Reusable

28. • Performance
• Reusable
• Hace lo que debería?

29. • Performance
• Reusable
• Hace lo que debería?
• Mantenible y escalable

30. • Performance
• Reusable
• Hace lo que debería?
• Mantenible y escalable

31. • Performance
• Reusable
• Hace lo que debería?
• Mantenible y escalable
:)

32. 2Procesos & herramientas

33. Pensemos en nuestros amigos del
back-end. Organización, variables,
parciales, objetos y abstracción.

34. Cambio & complejidad.

35. OOCSS, BEM & SMACSS, no
son librerías o framework, son
metodologías.

36. • Entender el todo y sus partes.
• Organización y estructura.
• Vanilla CSS o prepocesadores.

37. CSS preprocesadores, llenan
vacíos.

38. CSS preprocesadores, llenan
vacíos. Son una abstracción.

39. .scss

40. .scss
Sass
->

41. .css.scss
Sass
-> ->

42. • Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan CSS o arquitectura

43. • Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan CSS o arquitectura

44. foo {
...
}
foo zaa {
...
}

45. foo {
...
zaa {
...
}
}

46. .home_page_at_work {
.views-field-field-primary-image-attachment {
.field-content {
img {
...
}
}
}
}

47. .home_page_at_work .views-field-field-prima-
ry-image-attachment .field-content img {
...
}
:(

48. • No anidar == HTML
• Un ojo en el output
• Si podemos, no anidar
• Regla 3 niveles

49. • Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan CSS o arquitectura

50. stylesheets[all][] = css/reset.css
stylesheets[all][] = css/drupal-stuff.css
stylesheets[all][] = css/base.css
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/typo.css
; FOD
stylesheets[all][] = css/ds_2col.css
stylesheets[all][] = css/search.css
stylesheets[all][] = css/system.menus.css

51. stylesheets[all][] = css/screen.css

52. stylesheets[all][] = css/screen.css
Magic en lugar FOAD
https://www.drupal.org/project/magic

53. // Screen
// =======================
// Variables, Mixins, functions
@import “partials/base”;
// Page
@import “partials/page/screen”;
// Patterns
@import “partials/patterns/screen”;
// Layout
@import “partials/layout/screen”;
// Modules
@import “partials/modules/screen”;
screen.scss

54. sass/
|-- screen.scss # Primary Sass file
|-- partials/ # Partials
| |-- _base.scss
| |-- _variables.scss
| |-- _mixins.scss
| |-- vendors/
| | |---- _drupal.scss
| | |---- _jqueryandstuff.scss
| | |---- ...
| |-- patterns/
| | |---- _buttons.scss
| | |---- _links.scss
| | |---- ...
| |-- components/
| | |---- _paginator.scss
| | |---- ...
| |---- ...

55. // Links
// ===================
a {
color: $blue; text-decoration: none;
&:hover,
&:active {
color: $black;
}
}
_links.scss

56. • Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan saber CSS

57. Pensar en objetos o abstracciones, y
desgranar esos componentes en piezas
pequeñas.

58. Objetos son reutilizables.

60. .promo-box {}
.promo-box h3 {}

61. .promo-box {}
.promo-box h3,
.promo-box h4 {}

62. .promo-box {}
//mi heading puede ser cualquier elemento
.promo-box .promo-box-h {}

63. ul.product-list li {}

64. .product-list li {}

65. .product-list .product-item {}
.product-item {}

66. <ul>
<li class=”product-item”>Product 1</li>
<li class=”product-item”>Product 2</li>
<li class=”product-item”>Product 3</li>
</ul>
<p class=”produt-item”>Product 1</p>
<div class=”product-item”>
<h3 class=”produt-item-h”>Product 1</h3>
<p>Detalles</p>
</div>

67. Cuidado con los dogmas, siempre le
hemos tenido miedo a la clasitis, pero
si nos funciona no hay porque
descartarlo.

68. Sentido común. Escribir patrones una
vez, reusar esos pedazos.

69. Mo’ Devs, Mo’ Problems

70. • Training

71. • Training
• Buenas prácticas

72. Sintaxis, formato consistente,
convenciones para nombres*, etc

73. .promo-item {
background-color: #000;
color: #fff;
padding: 10px;
}

74. https://github.com/ahmednuaman/grunt-scss-lint

75. * Naming conventions

76. There are only two hard things in
computer science: cache invalidation and
naming things. - Phil Karlton

77. • SMACSS - http://bit.ly/1ILqWwb
• BEM - http://bit.ly/1CPXvpb
• OOCSS - http://bit.ly/1zGLVdH

78. OOCSS Principios:
• Claridad
• Semántico
• Genérico
• Breve

79. .is-touch {
...
}
.is-hidden {
...
}
.is-selected {
...
}

80. .tab {
...
&.is-selected {
...
}
}
//output
.tab.is-selected {
...
}

81. .btn {
...
}
Objeto

82. .items-list {
...
.item-thumb {
...
}
}
Padre - Hijo

83. .product-list {
...
}
.product-list-thumb {
...
}
Padre - Hijo

84. Contexto. Asignar cambios de estilo
sólo a elementos que cambien por
página, no a objetos.

85. .cart {
.main-content {
...
}
.sidebar {
...
}
}

86. .promo-box {
background: red;
color: white;
}
// atados a la estructura
.sidebar .promo-box {
background: black;
}

87. .promo-box {
background: red;
color: white;
}
// usamos la Cascada
.promo-box-dark {
background: black;
}
class=”promo-box promo-box-dark”
Subclassing

88. .promo-box {
background: red;
color: white;
}
.promo-box-dark {
@extend .promo-box;
background: black;
}
class=”promo-box-dark”
Subclassing

89. .promo-box,
.promo-box-dark {
background: red;
color: white;
}
.promo-box-dark {
background: black;
}

90. .promo-box {
background: red;
color: white;
}
.promo-box-dark {
@extend .promo-box;
background: black;
}
...
.promo-wrap .promo-box {
margin: 0;
}

91. .promo-box, .promo-box-dark {
background: red;
color: white;
}
.promo-box-dark {
background: black;
}
.promo-wrap .promo-box,
.promo-wrap .promo-box-dark {
margin: 0;
}
:(

92. Cuidar el output.
%placeholder es una buena
alternativa.

93. .btn,
%btn {
...
}
.btn-positive {
@extend %btn;
...
}
.btn-negative {
@extend %btn;
...
}

94. .btn,
.btn-positive,
.btn-negative {
...
}
.btn-positive {
...
}
.btn-negative {
...
}

95. .ui-promo-item {
...
}
class=”ui-promo-item js-promo-item qa-
promo-item”

96. .ui-promo-item {
...
}
class=”ui-promo-item js-promo-item qa-
promo-item”

97. Tenga una convención,
documéntelo y adhiérase a ella.

98. Lectura recomendada
http://24ways.org/2014/naming-things/
http://nicolasgallagher.com/about-html-semantics-
front-end-architecture/

99. • Training
• Buenas prácticas
• Documentar

101. http://codepen.io/chriscoyier/blog/codepens-css

102. /* Comentarios FTW */

103. /**
* Contents
* =========
* 1. Reset
* 2. Base
* 3. Layout
* 4. Modules
**/
...
/*
* =Reset
*/

104. /**
* Titulo
* 1. Descripción del comentario,
* detalles de porque se necesita,etc
**/
.foo {
overflow: hidden; /* [1] */
}

105. // En cada bloque de reglas, los
// @include o @extend se incluyen
// de primero, para evitar sobre
// escribir declaraciones.
// .foo {
// @include mixin-name;
// propiedad: valor;
// }
_mixins.scss

106. // Tip
// --------------------
// Create a rectangle-triangle to be
// used as a tip.
@mixin tip($color: $orange) {
...
}
_mixins.scss

107. CSS no es siempre el problema:
trabajamos con otros devs, falta de
conocimiento, diferentes técnicas.

108. 3Aterrizando

109. Pragmatismo sobre perfección. Mejor un
“good enough” hoy, que un “perfecto”
mañana.

110. El código del equipo debe ser un libro que
cualquiera puede leer, no un diario personal.

111. Escribamos menos CSS. Cada parte es un
potencial punto de falla, reducir features y
código.

112. Modularidad en CSS no es realmente la meta.
vMantenibilidad es. Si CSS es modular pero
es difícil de mantener, entonces es malo.

113. Gracias!
@leivajd

114. http://www.slideshare.net/leivajd

116. Evalúa la sesión.
https://latinamerica2015.drupal.org/node/4083