Arquitectura y buenas prácticas CSS
Adalab, Madrid – 5 de Mayo, 2017
Soy Frontend Developer en Kubide especializado en arquitectura, frontend performance y responsive web design.
(Vamos que me encanta el CSS)
¿Qué más hago?
Podcasting en WeCodeSign y organizo Open Source Weekends
¡Comenzamos!
Existen DOS tipos de personas en el mundo. A los que nos gusta el CSS y a los que NO ;).
Naming Conventions
BEM, SMACSS, OOCSS
BEM
¿Cómo funciona?
btn
btn__price
btn--big
<!-- Correcto. La clase `error` está usada correctamente usada --> <div class="error"> <!-- `search-form` Elemento de tipo bloque --> <form class="search-form"> <!-- `search-form__input` Elemento de tipo elemento --> <input class="search-form__input"> <!-- `button` Elemento de tipo modificador --> <button class="search-form__button">Search</button> </form> </form> </div>
SMACSS
¿Cómo funciona?
Base
Layout
Module
State
Theme
<!-- Base: Selectores, aunque a veces pueden ser atributos, pseudoelementos, selectores hijos o padres. --> <body>, <a:hover> <!-- Secciones, entendiendo que dentro de cada sección el contenido se dividirá en módulos. --> <article>, <footer> <!-- Componentes que pueden ser reutilizados. --> .module span <!-- Reglas que nos marcan el estado de nuestros módulos. Ej: estado activo de un botón. --> .is-collapsed, .is-active <!-- Theme: SOpcional. --> .mod, <.theme-background>
Object Oriented CSS (OOCSS)
¿Cómo funciona?
Separación de estructura y aspecto
Separación de "contenedores" y contenido: ha de comportarse igual esté donde esté
<!-- Sin usar el "Single Responsibility Principle" --> .card { color: black; margin-top: 100px; box-shadow: 0 0 30px rgba(0,0,0,.3); background-color: white; font-size: 30px; position: relative; display: block; width: 50%; padding: 30px; } <!-- Usando el el "Single Responsibility Principle" --> .card { color: goldenrod; box-shadow: 0 0 30px rgba(0,0,0,.3); background-color: silver; font-size: 30px; padding: 30px; } .half { position: relative; display: block; width: 50%; } .mtxl { margin-top: 100px; }
CSS = Hojas de Estilo en Cascada
Parece obvio pero os daréis cuenta de que no siempre es así
CSS-in-JS
Existe otro mundo allí fuera. No creo que sea una buena práctica pero tiene sus usos y ayuda en muchas ocasiones.
Arquitectura Sass 7-1
Parte 1/3
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
Arquitectura Sass 7-1
Parte 2/3
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
Arquitectura Sass 7-1
Parte 3/3
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
Tras esta maravilla...
Habrá momentos en los que usaréis frameworks o librerías como Angular2, React, Vue (inserte aquí framework de moda)
You might not need a CSS framework
Bootstrap, Foundation
¡Es el mal!, En verdad no pero no se debería usar para todo.
Buenas prácticas CSS
1/11
Consistencia al escribir código
2/11
No usar IDs
3/11
No usar !important. Cada vez que se haga el Dios del Front matará un gatito. ¡Y no queremos que pase!
4/11
Orden de propiedades CSS
5/11
No usar descriptionhands, debido a que estás dando en muchos casos valores por defecto el navegador como en margin: 0 auto
6/11
Single Responsibility Principle
7/11
Minificar
8/11
UnCSS
9/11
Concatenar
10/11
Usar clases específicas para JS
11/11
Uso de Linters
¿A quién seguir?
Gente que habla habitualmente de buenas práctias y arquitectura CSS.