Escribir CSS es un proceso bastante simple y directo, entonces, ¿por qué esto requiere más principios y mejores prácticas?
A medida que aumenta la escala del proyecto y el número de personas que trabajan en él, comienzan a aparecer cada vez más nuevas dificultades que pueden causar serios problemas en el futuro. Duplicación de código, cadenas complejas de redefinición de propiedades, usando! Propiedades CSS importantes, restantes y sin usar de elementos HTML remotos, etc. Dicho código es más difícil de leer y corregir.
Escribir CSS de manera profesional hará que el código sea más fácil de mantener, extensible, comprensible y limpio. Veamos 5 principios simples y muy efectivos que llevan su CSS al siguiente nivel.
Principio de denominación
“En informática, solo hay dos cosas complejas: invalidación de caché y nomenclatura” - Phil Carleton
Nombrar y estructurar adecuadamente sus selectores CSS es el primer paso para hacer que su CSS sea más legible, estructurado y limpio. La definición de reglas y restricciones en una convención de nomenclatura hace que su código sea estandarizado, confiable y fácil de entender.
Es por eso que conceptos como
BEM (Block-Element-Modifier) ,
SMACSS (Arquitectura escalable y modular para CSS) y
OOCSS (CSS orientado a objetos) son populares entre muchos desarrolladores frontend.
Principio de baja especificidad
Reemplazar las propiedades CSS es muy útil, pero en proyectos más complejos, las cosas pueden salirse de control con bastante rapidez. La anulación de cadenas puede volverse muy larga y compleja, lo que lo obligará a usarla
!important .card {} .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {}
Navegador y especificidad
Uno de los beneficios de seguir el principio de baja especificidad es el rendimiento. Los navegadores analizan CSS
de derecha a izquierda .
Echemos un vistazo al siguiente ejemplo:
.blog-list .card img {}
Los navegadores "leerán" el selector de la siguiente manera:
- Encuentra todas las etiquetas <img> en una página
- De ellos, seleccione elementos que sean descendientes de la clase .card
- De ellos, seleccione elementos que sean descendientes de la clase .blog-list
Puede ver cómo los selectores con alta especificidad afectan el rendimiento, especialmente cuando necesitamos seleccionar globalmente un elemento común como
div ,
img ,
li , etc.
Usando el mismo nivel de especificidad
Usando selectores CSS con baja especificidad combinados con la metodología BEM o uno de los otros principios de nomenclatura mencionados en la sección anterior, podemos crear código potente, flexible y fácil de entender.
¿Por qué usar clases CSS? Queremos adherirnos al mismo nivel de especificidad, sin dejar de ser flexibles y capaces de seleccionar múltiples elementos. Los selectores de elementos y los selectores de id no proporcionan la flexibilidad que necesitamos.
Reescribamos el ejemplo anterior usando BEM y apegándonos a una baja especificidad.
.card {} .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {}
Puede ver cómo estos selectores son más simples, más claros y pueden redefinirse y ampliarse fácilmente si es necesario. Y manteniendo su especificidad baja (la única clase), garantizamos un rendimiento y flexibilidad óptimos.
Principio SECO
El principio DRY (no se repita, rus. No repetir) también se puede aplicar a CSS. La duplicación en CSS puede conducir a la acumulación de código, anulaciones innecesarias, soporte deficiente, etc. Este problema se puede solucionar con una estructura de código adecuada y documentación de calidad.
Storybook es una gran herramienta gratuita que le permite crear una descripción general de los componentes de la interfaz web disponibles y escribir documentación de calidad.
.warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; }
Refactoricemos el código siguiendo el principio DRY
.status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; }
Principio de responsabilidad exclusiva
Utilizando el principio de responsabilidad única en CSS, puede estar seguro de que las clases de CSS son fácilmente extensibles y redefinidas. Veamos el siguiente ejemplo.
.button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; }
Se puede ver que si necesita expandir la clase
.button usando el modificador
secundario .button , tendrá que realizar muchas anulaciones, aunque solo queremos cambiar el color de fondo, manteniendo los estilos predeterminados.
El problema es que nuestra clase .button tiene varios roles:
- Define un modelo de bloque ( relleno )
- Define la tipografía ( tamaño de fuente, peso de fuente )
- Determina la apariencia ( color , color de fondo , radio del borde )
Esto complica la extensión de la clase CSS y su integración con otras clases. Con eso en mente, mejoremos nuestro CSS con BEM y OOCSS.
.button { padding: 1rem 2rem; font-weight: bold; color: #fff; } .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; }
Hemos dividido los estilos de nuestro
botón en varias clases que se pueden usar para extender la clase base. Si es necesario, podemos aplicar modificadores y agregar nuevos a medida que el diseño cambia o se agregan nuevos elementos
El principio de apertura / cercanía.
Las entidades de software (clases, módulos, funciones, etc.) deben estar abiertas para la extensión, pero cerradas para el cambio "Ya hemos usado el principio abierto / cerrado en los ejemplos anteriores. Todas las nuevas funciones y opciones deben agregarse por extensión. Veamos este ejemplo.
.card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; }
El
.blog-list .card selector tiene varios problemas potenciales:
- Algunos estilos solo se pueden aplicar si el elemento .card es hijo del elemento .blog-list
- Los estilos se ven obligados a aplicar al elemento .card si se coloca en el elemento .blog-list , lo que puede generar resultados inesperados y anulaciones innecesarias.
Reescribamos el ejemplo anterior:
.card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; }
Solucionamos el problema si usamos un selector de clase única. Con este selector, podemos evitar efectos inesperados y no utilizar estilos anidados condicionalmente.
En conclusión
Observamos ejemplos de cómo aplicar estos pocos principios simples puede mejorar significativamente el enfoque para escribir CSS:
- Nomenclatura y estructura estandarizadas, mejor legibilidad utilizando BEM, OCSS, etc.
- Rendimiento y estructura mejorados utilizando selectores de baja especificidad.
- Reducción de la hinchazón y mejora de la calidad del código utilizando el principio DRY
- Flexibilidad y mantenibilidad utilizando el principio abierto / cerrado
Gracias por tomarse el tiempo de leer este artículo. Si lo encuentra útil, puede compartirlo o dejar un comentario.