Digamos que está creando un archivo CSS para una parte modular de una página web. Tal vez usted es del tipo que separa sus archivos CSS en bits como header.css, sidebar.css, footer.css, etc. Acabo de encontrarme con una idea que pensé que era bastante inteligente donde incluye el marcado básico que diseñará como un comentario en la parte superior de su archivo CSS. Por ejemplo, un archivo sidebar.css podría verse así:
/*
<aside>
<div class="widget">
<h5 class="widget-title">
<p></p>
</div>
<!-- other widgets -->
</aside>
*/
aside { background-color: #ccc; }
aside .widget { background-color: white; padding: 10px; }
aside .widget h5 { border-bottom: 1px solid black; }
/* etc. */Esto podría ser útil para usted, ya que tendría que pasar menos de un lado a otro entre el lugar donde está viendo el marcado y este archivo CSS. Esto es aún más útil cuando:
- El marcado es generado por JavaScript y es más difícil de ver en cualquier otro lugar o,
- El CSS es específico de un complemento o complemento de terceros
Obtuve esta idea del archivo CSS de mediaelements.js, que creo que es un ejemplo de caso de uso perfecto.