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