Propuesta:

1. Agregue clases semáticas a todos los elementos de marcado. (pero aún no lo use para diseñar, manteniendo las clases representativas y de biblioteca en el marcado).
2. Mueva los estilos dentro de las hojas de estilo a las clases semánticas (a través de mixins o preferiblemente @extend s ).
3. En caso de pruebas de integración/aceptación, actualícelas a las clases semánticas.
4. Elimine las clases representativas y de biblioteca del marcado.

El aspecto de la página no debería cambiar en absoluto durante estos pasos. Podría ser un caso de uso para PhantomCSS .

Cuando termine, las clases semánticas se pueden usar como una API para estilos CSS personalizados.

Notas sobre las clases CSS:

He estado jugando con cosas basadas en _ Simple Naming for Modular CSS Class Names _ y decidí darle a la mayoría de los elementos un identificador de tres puntos como view--component--element .

Si bien el uso de guiones dobles llama la atención al principio, estas clases no solo han sido muy fáciles de diseñar, sino también para escribir pruebas.

Intentaré enviar un PR para el paso uno.

@wwebfor ¿Cómo inicio la aplicación localmente? grunt serve genera esto:

@filtercake , deberías compilar menos archivo con la tarea grunt: grunt lessc

Asuntos relacionados:

226 Solicitud: Modo noche

421 tema oscuro