Organizar el CSS
9 pasos en 4 series de CSS.
Nueve pasos sobre cómo mantener cuerda una hoja de estilos cuando crece. Una capa base y un reset sensato, convenciones de nombres, y después temas y capas de cascada.
Tour corto, y el menos glamoroso de todos. También es el que decide si los otros cuatro siguen siendo usables después de un año.
Fundamentos
- Un reset que vale la penaNo el de 400 líneas: la docena de reglas cuya ausencia sí notarías.
- Tokens de diseñoDos capas: valores crudos con nombres aburridos y nombres semánticos que los apuntan.
- Una escala tipográficaElige una razón, genera los pasos y deja de escoger tamaños de fuente a ojo.
Ponerle nombre a las cosas
- Nombrar un componenteBloque, elemento, modificador: una convención que hace que una clase diga a dónde pertenece.
- UtilidadesUn solo trabajo cada una, sin contexto, y siempre la última palabra de la cascada.
- Estilizar desde el estadoEl estado vive en un atributo que el script ya debe fijar, y la lista de clases queda quieta.
Temas y herramientas
- TemasUn juego de nombres, tres maneras de elegir valores: el sistema, una clase, un atributo.
- Ver las cajasTres reglas desechables que responden casi toda duda de layout más rápido que el inspector.
Bis
- token_system.cssUn pequeño sistema de diseño entero: tokens, temas, una escala tipográfica y sus componentes.