¿Cuáles son las características de la arquitectura CSS?
Creo que los objetivos de una buena arquitectura CSS no deberían ser muy diferentes de los objetivos de todo buen desarrollo de software. Quiero que mi CSS sea predecible, reutilizable, mantenible y extensible.
Predecible
CSS predecible significa que sus reglas se comportan de la manera esperada. Cuando agrega o actualiza una regla, no debería afectar partes de su sitio que no desea afectar. Esto no es importante en sitios pequeños que rara vez cambian, pero en sitios más grandes con docenas o cientos de páginas, un CSS predecible es necesario.
Reutilizables
Las reglas CSS deben ser abstractas y desacoplables. No es necesario recodificar patrones ni problemas que ya haya resuelto, pero puede crear rápidamente nuevos componentes basándose en piezas existentes.
Sostenible
Cuando su sitio web necesita agregar, actualizar o reorganizar nuevos componentes y funcionalidades, no es necesario refactorizar el CSS existente. Agregar el componente A a una página no debería romper el componente B. CSS escalable significa que puede ser administrado fácilmente por una sola persona o por un gran equipo de ingeniería. Esto también significa que la arquitectura CSS de su sitio web se puede aprender y dominar fácilmente sin una gran curva de aprendizaje. El hecho de que actualmente sea un desarrollador que mantiene CSS no significa que pueda ignorar cambios futuros.
Malas prácticas comunes
Antes de buscar formas de lograr los objetivos de una buena arquitectura CSS, creo que es útil analizar las prácticas comunes que nos impiden alcanzar nuestros objetivos. Sólo comprendiendo esos errores repetidos podremos empezar a aceptar un camino alternativo.
Aunque técnicamente efectivos, sus resultados resultaron en desastres y dolores de cabeza. Aunque mis intenciones son buenas y quiero que cada desarrollo sea diferente, estos patrones siguen causándome problemas.
Modificar componentes según la clase principal
Casi todos los sitios web tienen un elemento visual específico que se ve exactamente igual para cada evento, con una excepción. Huo Ying Beida Jade Bird cree que casi todos los nuevos desarrolladores de CSS (incluso los desarrolladores experimentados) manejarán esta situación única de la misma manera. Debe encontrar un elemento principal para este evento específico (o crear uno) y luego escribir una nueva regla para manejarlo.