Mejores prácticas de marcado/estilo: ¿Cómo distribuir de manera eficiente las reglas de estilo sobre las clases de CSS?

Question

Supongamos que tengo alguna página HTML y un archivo CSS correspondiente. Me gustaría agregar esquinas redondeadas a algunos elementos. Quiero alternar colores de fondo en cualquier otra sección. Quiero agregar un estado de desplazamiento para cada encabezado de sección. Etcétera. Sigo estilizando y peinando y peinando.

Se me ocurre que hay tres extremos, donde se trata del "quién, qué, cuándo, dónde, por qué y cómo" de distribuir reglas CSS sobre el marcado por clase, por id y por jerarquía.

Extreme # 1: Cada regla de estilo se basa en una identificación.

Extreme # 2: Cada regla de estilo se basa en una clase.

Extreme # 3: Cada regla de estilo se basa en la jerarquía DOM.

Claramente, el zen de front-end web development incluiría un balance saludable de reutilización de clases vs. reglas únicas vs. jerarquía, porque cualquiera de los tres extremos causaría estragos en el rendimiento del navegador, mantenibilidad y tamaño del código. Creo. ¿O estoy equivocado? ¿Cómo saber cuándo es necesario un nuevo .class, o las reglas de estilo que desea aplicar pueden ser con seguridad con cuernos de zapatos en una definición existente? ¿Cuándo dos reglas #id son lo suficientemente similares como para poder extraer un código común en una clase? ¿Cuándo "bifurca" una clase (a veces conserva el original y agrega derivaciones para todas las situaciones desviadas ("filtrado" en términos de POO), y otras veces empuja las reglas comunes hacia cada una de las varias desviaciones disjuntas, esto depende claramente de la naturaleza (es decir, el número de reglas involucradas) en la desviación misma). ¿Existen circunstancias para usar reglas puramente jerárquicas?

Pregunta: ¿Existen reglas generales que rijan este tipo de debate? ¿Cuál es su experiencia y/o consejo? ¿Hay buenos artículos, recursos, libros, conferencias (puntos de bonificación para los videos de estilo de "charla técnica") u otro contenido disponible sobre el tema? Me gustaría mantener la discusión a tierra en algunos puntos clave (aunque cualquier comentario es bienvenido), en ningún orden en particular:

• mantenibilidad (facilidad de lectura, modificación y adición de código)
• seco (no te repitas)
• la eficiencia del tiempo (time-to-onload; el procesamiento progresivo)
• la eficiencia del espacio (tamaño combinado de las marcas & estilos asociados)

Answer 1

Hágase un favor, c diablos SASS.

Si bien existen ventajas y desventajas para la compilación de su CSS, las ventajas de tener variables reales, mix-ins y ayudantes en su CSS precompilado definitivamente valen la pena pasar al menos.