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.

CSS, planeando para el futuro

354 views

Published on

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

Published in: Design
  • Be the first to comment

  • 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

×