Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Un mejor CSS
Planeando para no sufrir en el futuro.
DrupalCon Latin America - Febrero 2015
Jose Leiva
@leivajd // leivajd.com
2007 web
2010 Drupal
Objetivo
Que nuestro “yo” del futuro
no nos odie ;)
Objetivo
1CSS es fácil
selector
selector{
	propiedad: valor;
}
selector{
	propiedad: valor;
	propiedad: valor;
}
selector{
	 propiedad: valor;
}
selector{
	 propiedad: valor;
}
selector{
	 propiedad: valor;
}
selector{
	 propiedad: val...
CSS es fácil, verdad?
Escribir CSS es sencillo.
Pero...
.headerMenu ul.menu li.active-trail a {
	 background: #D0DFEF;
}
.view-news-and-press.news-right-side-bar-
block .views-row {
	position: relative;
	min-height: 60px;
}
.item-title,
#main-column .item-title,
#second-column .item-title,
.primary-lead-area .item-title,
.second-lead-area .item...
• Alta especificidad
• Alta especificidad
• Alta dependencia HTML
• Alta especificidad
• Alta dependencia HTML
• Golpea performance
• Alta especificidad
• Alta dependencia HTML
• Golpea performance
• Difícil de reutilizar
• Alta especificidad
• Alta dependencia HTML
• Golpea performance
• Difícil de reutilizar
:(
Escribir CSS es sencillo.
La arquitectura no.
Arquitectura
Herramientas, planear & escribir
CSS de manera que el código sea
de calidad
• Performance
• Performance
• Reusable
• Performance
• Reusable
• Hace lo que debería?
• Performance
• Reusable
• Hace lo que debería?
• Mantenible y escalable
• Performance
• Reusable
• Hace lo que debería?
• Mantenible y escalable
• Performance
• Reusable
• Hace lo que debería?
• Mantenible y escalable
:)
2Procesos & herramientas
Pensemos en nuestros amigos del
back-end. Organización, variables,
parciales, objetos y abstracción.
Cambio & complejidad.
OOCSS, BEM & SMACSS, no
son librerías o framework, son
metodologías.
• Entender el todo y sus partes.
• Organización y estructura.
• Vanilla CSS o prepocesadores.
CSS preprocesadores, llenan
vacíos.
CSS preprocesadores, llenan
vacíos. Son una abstracción.
.scss
.scss
Sass
->
.css.scss
Sass
-> ->
• Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan CSS o arqui...
• Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan CSS o arqui...
foo {
	...
}
foo zaa {
	...
}
foo {
	...
	
	 zaa {
		...
	}
}
.home_page_at_work {
	 .views-field-field-primary-image-attachment {
	 	 .field-content {
			img {
				...
			}
		}
	}
}
.home_page_at_work .views-field-field-prima-
ry-image-attachment .field-content img {
	...
}
:(
• No anidar == HTML
• Un ojo en el output
• Si podemos, no anidar
• Regla 3 niveles
• Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan CSS o arqui...
stylesheets[all][] = css/reset.css
stylesheets[all][] = css/drupal-stuff.css
stylesheets[all][] = css/base.css
stylesheets...
stylesheets[all][] = css/screen.css
stylesheets[all][] = css/screen.css
Magic en lugar FOAD
https://www.drupal.org/project/magic
// Screen
// =======================
// Variables, Mixins, functions
@import “partials/base”;
// Page
@import “partials/pa...
sass/
|-- screen.scss         # Primary Sass file
|-- partials/ # Partials
| |-- _base.scss
| |-- _variables.scss
| |-- _m...
// Links
// ===================
a {
color: $blue; text-decoration: none;
&:hover,
&:active {
color: $black;
}
}
_links.scss
• Son excelentes, si se usan correctamente
• Dividir en pequeños pedazos
• Proveen abstracción
• No reemplazan saber CSS
Pensar en objetos o abstracciones, y
desgranar esos componentes en piezas
pequeñas.
Objetos son reutilizables.
.promo-box {}
.promo-box h3 {}
.promo-box {}
.promo-box h3,
.promo-box h4 {}
.promo-box {}
//mi heading puede ser cualquier elemento
.promo-box .promo-box-h {}
ul.product-list li {}
.product-list li {}
.product-list .product-item {}
.product-item {}
<ul>
	 <li class=”product-item”>Product 1</li>
	 <li class=”product-item”>Product 2</li>
	 <li class=”product-item”>Produc...
Cuidado con los dogmas, siempre le
hemos tenido miedo a la clasitis, pero
si nos funciona no hay porque
descartarlo.
Sentido común. Escribir patrones una
vez, reusar esos pedazos.
Mo’ Devs, Mo’ Problems
• Training
• Training
• Buenas prácticas
Sintaxis, formato consistente,
convenciones para nombres*, etc
.promo-item {
		background-color: #000;
		color: #fff;
		padding: 10px;
}
https://github.com/ahmednuaman/grunt-scss-lint
* Naming conventions
There are only two hard things in
computer science: cache invalidation and
naming things. - Phil Karlton
• SMACSS - http://bit.ly/1ILqWwb
• BEM - http://bit.ly/1CPXvpb
• OOCSS - http://bit.ly/1zGLVdH
OOCSS Principios:
• Claridad
• Semántico
• Genérico
• Breve
.is-touch {
		...
}
.is-hidden {
		...
}
.is-selected {
		...
}
.tab {
		...
		&.is-selected {
			...
		}
}
//output
.tab.is-selected {
	 ...
}
.btn {
		...
}
Objeto
.items-list {
		...
		
		.item-thumb {
			...
		}
}
Padre - Hijo
.product-list {
		...
}
.product-list-thumb {
		...
}
Padre - Hijo
Contexto. Asignar cambios de estilo
sólo a elementos que cambien por
página, no a objetos.
.cart {
	.main-content {
		...
	}
.sidebar {
		...
	}
}
.promo-box {
	 background: red;
	 color: white;
}
// atados a la estructura
.sidebar .promo-box {	
	 background: black;
}
.promo-box {
	 background: red;
	 color: white;
}
// usamos la Cascada
.promo-box-dark {	
	 background: black;
}
class=”pr...
.promo-box {
	 background: red;
	 color: white;
}
.promo-box-dark {
	@extend .promo-box;
	 background: black;
}
class=”pro...
.promo-box,
.promo-box-dark {
background: red;
color: white;
}
.promo-box-dark {
background: black;
}
.promo-box {
	 background: red;
	 color: white;
}
.promo-box-dark {
	 @extend .promo-box;
	 background: black;
}
...
.prom...
.promo-box, .promo-box-dark {
	 background: red;
	 color: white;
}
.promo-box-dark {
	 background: black;
}
.promo-wrap .p...
Cuidar el output.
%placeholder es una buena
alternativa.
.btn,
%btn {
	...
}
.btn-positive {
@extend %btn;
...
}
.btn-negative {
@extend %btn;
...
}
.btn,
.btn-positive,
.btn-negative {
	...
}
.btn-positive {
...
}
.btn-negative {
...
}
.ui-promo-item {
		...
}
class=”ui-promo-item js-promo-item qa-
promo-item”
.ui-promo-item {
		...
}
class=”ui-promo-item js-promo-item qa-
promo-item”
Tenga una convención,
documéntelo y adhiérase a ella.
Lectura recomendada
http://24ways.org/2014/naming-things/
http://nicolasgallagher.com/about-html-semantics-
front-end-arch...
• Training
• Buenas prácticas
• Documentar
http://codepen.io/chriscoyier/blog/codepens-css
/* Comentarios FTW */
/**
* Contents
* =========
* 1. Reset
* 2. Base
* 3. Layout
* 4. Modules
**/
...
/*
* =Reset
*/
/**
* Titulo
* 1. Descripción del comentario,
* detalles de porque se necesita,etc
**/
.foo {
	 	 overflow: hidden; /* [1]...
// En cada bloque de reglas, los
// @include o @extend se incluyen
// de primero, para evitar sobre
// escribir declaracio...
// Tip
// --------------------
// Create a rectangle-triangle to be
// used as a tip.
@mixin tip($color: $orange) {
	...
}...
CSS no es siempre el problema:
trabajamos con otros devs, falta de
conocimiento, diferentes técnicas.
3Aterrizando
Pragmatismo sobre perfección. Mejor un
“good enough” hoy, que un “perfecto”
mañana.
El código del equipo debe ser un libro que
cualquiera puede leer, no un diario personal.
Escribamos menos CSS. Cada parte es un
potencial punto de falla, reducir features y
código.
Modularidad en CSS no es realmente la meta.
vMantenibilidad es. Si CSS es modular pero
es difícil de mantener, entonces es...
Gracias!
@leivajd
http://www.slideshare.net/leivajd
Evalúa la sesión.
https://latinamerica2015.drupal.org/node/4083
CSS, planeando para el futuro
CSS, planeando para el futuro
CSS, planeando para el futuro
CSS, planeando para el futuro
CSS, planeando para el futuro
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

CSS, planeando para el futuro

Download to read offline

No importa el tamaño del proyecto en el que estemos trabajando, desgraciadamente siempre es posible terminar con CSS poco mantenible, difícil de debuggear y en el que repetimos una y otra vez las mismas reglas.

El objetivo de esta charla es, que nuestro “yo” del futuro no nos odie ;)

DrupalCon Latin America - Febrero 2015

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

CSS, planeando para el futuro

  1. 1. Un mejor CSS Planeando para no sufrir en el futuro. DrupalCon Latin America - Febrero 2015
  2. 2. Jose Leiva @leivajd // leivajd.com
  3. 3. 2007 web
  4. 4. 2010 Drupal
  5. 5. Objetivo
  6. 6. Que nuestro “yo” del futuro no nos odie ;) Objetivo
  7. 7. 1CSS es fácil
  8. 8. selector
  9. 9. selector{ propiedad: valor; }
  10. 10. selector{ propiedad: valor; propiedad: valor; }
  11. 11. selector{ propiedad: valor; } selector{ propiedad: valor; } selector{ propiedad: valor; } selector{ propiedad: valor; } } .css
  12. 12. CSS es fácil, verdad?
  13. 13. Escribir CSS es sencillo. Pero...
  14. 14. .headerMenu ul.menu li.active-trail a { background: #D0DFEF; }
  15. 15. .view-news-and-press.news-right-side-bar- block .views-row { position: relative; min-height: 60px; }
  16. 16. .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; }
  17. 17. • Alta especificidad
  18. 18. • Alta especificidad • Alta dependencia HTML
  19. 19. • Alta especificidad • Alta dependencia HTML • Golpea performance
  20. 20. • Alta especificidad • Alta dependencia HTML • Golpea performance • Difícil de reutilizar
  21. 21. • Alta especificidad • Alta dependencia HTML • Golpea performance • Difícil de reutilizar :(
  22. 22. Escribir CSS es sencillo. La arquitectura no.
  23. 23. Arquitectura Herramientas, planear & escribir CSS de manera que el código sea de calidad
  24. 24. • Performance
  25. 25. • Performance • Reusable
  26. 26. • Performance • Reusable • Hace lo que debería?
  27. 27. • Performance • Reusable • Hace lo que debería? • Mantenible y escalable
  28. 28. • Performance • Reusable • Hace lo que debería? • Mantenible y escalable
  29. 29. • Performance • Reusable • Hace lo que debería? • Mantenible y escalable :)
  30. 30. 2Procesos & herramientas
  31. 31. Pensemos en nuestros amigos del back-end. Organización, variables, parciales, objetos y abstracción.
  32. 32. Cambio & complejidad.
  33. 33. OOCSS, BEM & SMACSS, no son librerías o framework, son metodologías.
  34. 34. • Entender el todo y sus partes. • Organización y estructura. • Vanilla CSS o prepocesadores.
  35. 35. CSS preprocesadores, llenan vacíos.
  36. 36. CSS preprocesadores, llenan vacíos. Son una abstracción.
  37. 37. .scss
  38. 38. .scss Sass ->
  39. 39. .css.scss Sass -> ->
  40. 40. • Son excelentes, si se usan correctamente • Dividir en pequeños pedazos • Proveen abstracción • No reemplazan CSS o arquitectura
  41. 41. • Son excelentes, si se usan correctamente • Dividir en pequeños pedazos • Proveen abstracción • No reemplazan CSS o arquitectura
  42. 42. foo { ... } foo zaa { ... }
  43. 43. foo { ... zaa { ... } }
  44. 44. .home_page_at_work { .views-field-field-primary-image-attachment { .field-content { img { ... } } } }
  45. 45. .home_page_at_work .views-field-field-prima- ry-image-attachment .field-content img { ... } :(
  46. 46. • No anidar == HTML • Un ojo en el output • Si podemos, no anidar • Regla 3 niveles
  47. 47. • Son excelentes, si se usan correctamente • Dividir en pequeños pedazos • Proveen abstracción • No reemplazan CSS o arquitectura
  48. 48. 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
  49. 49. stylesheets[all][] = css/screen.css
  50. 50. stylesheets[all][] = css/screen.css Magic en lugar FOAD https://www.drupal.org/project/magic
  51. 51. // 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
  52. 52. 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 | | |---- ... | |---- ...
  53. 53. // Links // =================== a { color: $blue; text-decoration: none; &:hover, &:active { color: $black; } } _links.scss
  54. 54. • Son excelentes, si se usan correctamente • Dividir en pequeños pedazos • Proveen abstracción • No reemplazan saber CSS
  55. 55. Pensar en objetos o abstracciones, y desgranar esos componentes en piezas pequeñas.
  56. 56. Objetos son reutilizables.
  57. 57. .promo-box {} .promo-box h3 {}
  58. 58. .promo-box {} .promo-box h3, .promo-box h4 {}
  59. 59. .promo-box {} //mi heading puede ser cualquier elemento .promo-box .promo-box-h {}
  60. 60. ul.product-list li {}
  61. 61. .product-list li {}
  62. 62. .product-list .product-item {} .product-item {}
  63. 63. <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>
  64. 64. Cuidado con los dogmas, siempre le hemos tenido miedo a la clasitis, pero si nos funciona no hay porque descartarlo.
  65. 65. Sentido común. Escribir patrones una vez, reusar esos pedazos.
  66. 66. Mo’ Devs, Mo’ Problems
  67. 67. • Training
  68. 68. • Training • Buenas prácticas
  69. 69. Sintaxis, formato consistente, convenciones para nombres*, etc
  70. 70. .promo-item { background-color: #000; color: #fff; padding: 10px; }
  71. 71. https://github.com/ahmednuaman/grunt-scss-lint
  72. 72. * Naming conventions
  73. 73. There are only two hard things in computer science: cache invalidation and naming things. - Phil Karlton
  74. 74. • SMACSS - http://bit.ly/1ILqWwb • BEM - http://bit.ly/1CPXvpb • OOCSS - http://bit.ly/1zGLVdH
  75. 75. OOCSS Principios: • Claridad • Semántico • Genérico • Breve
  76. 76. .is-touch { ... } .is-hidden { ... } .is-selected { ... }
  77. 77. .tab { ... &.is-selected { ... } } //output .tab.is-selected { ... }
  78. 78. .btn { ... } Objeto
  79. 79. .items-list { ... .item-thumb { ... } } Padre - Hijo
  80. 80. .product-list { ... } .product-list-thumb { ... } Padre - Hijo
  81. 81. Contexto. Asignar cambios de estilo sólo a elementos que cambien por página, no a objetos.
  82. 82. .cart { .main-content { ... } .sidebar { ... } }
  83. 83. .promo-box { background: red; color: white; } // atados a la estructura .sidebar .promo-box { background: black; }
  84. 84. .promo-box { background: red; color: white; } // usamos la Cascada .promo-box-dark { background: black; } class=”promo-box promo-box-dark” Subclassing
  85. 85. .promo-box { background: red; color: white; } .promo-box-dark { @extend .promo-box; background: black; } class=”promo-box-dark” Subclassing
  86. 86. .promo-box, .promo-box-dark { background: red; color: white; } .promo-box-dark { background: black; }
  87. 87. .promo-box { background: red; color: white; } .promo-box-dark { @extend .promo-box; background: black; } ... .promo-wrap .promo-box { margin: 0; }
  88. 88. .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; } :(
  89. 89. Cuidar el output. %placeholder es una buena alternativa.
  90. 90. .btn, %btn { ... } .btn-positive { @extend %btn; ... } .btn-negative { @extend %btn; ... }
  91. 91. .btn, .btn-positive, .btn-negative { ... } .btn-positive { ... } .btn-negative { ... }
  92. 92. .ui-promo-item { ... } class=”ui-promo-item js-promo-item qa- promo-item”
  93. 93. .ui-promo-item { ... } class=”ui-promo-item js-promo-item qa- promo-item”
  94. 94. Tenga una convención, documéntelo y adhiérase a ella.
  95. 95. Lectura recomendada http://24ways.org/2014/naming-things/ http://nicolasgallagher.com/about-html-semantics- front-end-architecture/
  96. 96. • Training • Buenas prácticas • Documentar
  97. 97. http://codepen.io/chriscoyier/blog/codepens-css
  98. 98. /* Comentarios FTW */
  99. 99. /** * Contents * ========= * 1. Reset * 2. Base * 3. Layout * 4. Modules **/ ... /* * =Reset */
  100. 100. /** * Titulo * 1. Descripción del comentario, * detalles de porque se necesita,etc **/ .foo { overflow: hidden; /* [1] */ }
  101. 101. // 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
  102. 102. // Tip // -------------------- // Create a rectangle-triangle to be // used as a tip. @mixin tip($color: $orange) { ... } _mixins.scss
  103. 103. CSS no es siempre el problema: trabajamos con otros devs, falta de conocimiento, diferentes técnicas.
  104. 104. 3Aterrizando
  105. 105. Pragmatismo sobre perfección. Mejor un “good enough” hoy, que un “perfecto” mañana.
  106. 106. El código del equipo debe ser un libro que cualquiera puede leer, no un diario personal.
  107. 107. Escribamos menos CSS. Cada parte es un potencial punto de falla, reducir features y código.
  108. 108. Modularidad en CSS no es realmente la meta. vMantenibilidad es. Si CSS es modular pero es difícil de mantener, entonces es malo.
  109. 109. Gracias! @leivajd
  110. 110. http://www.slideshare.net/leivajd
  111. 111. Evalúa la sesión. https://latinamerica2015.drupal.org/node/4083

No importa el tamaño del proyecto en el que estemos trabajando, desgraciadamente siempre es posible terminar con CSS poco mantenible, difícil de debuggear y en el que repetimos una y otra vez las mismas reglas. El objetivo de esta charla es, que nuestro “yo” del futuro no nos odie ;) DrupalCon Latin America - Febrero 2015

Views

Total views

387

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×