¿Las clases de CSS de propósito general son incorrectas?

Question

Digamos que tengo más limpio como esto

.cleaner:after { 
    content: '.'; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    height: 0;     
} 

por lo que se puede agregar la clase limpiador a todo lo que quiero para borrar los flotadores. Esto es mucho mejor que agregar

<div style="clear:both;"></div> 

, porque en realidad no separa el diseño del marcado.

Pero si bien este enfoque puede reducir algunos códigos duplicados, también rompe la idea de diseño separado, porque tengo que cambiar html directamente.

¿Está bien tener clases como esta y agregarlas donde sea necesario? O debería agregar el :after { ... explícitamente a todo lo que quiero borrar de las carrozas (como #header: after ..., #menu: after {.... `) que da como resultado duplicidades de código, pero también diseño mucho más separado donde No tengo que tocar el HTML directamente.

Probablemente la clase de propósito general sería útil para javascript, donde sería más fácil cambiar los estilos, pero ¿el código duplicado vale el efecto del diseño separado en HTML/CSS puro?

Answer 1

¿Está bien tener clases como esta y agregarlas donde sea necesario?

Sí. Lo estoy usando desde hace mucho tiempo con muchos diseños diferentes y no encontré ningún problema ;-)

Answer 2

Lo que trato de hacer en situaciones como esta es averiguar si hay alguna abstracción subyacente que me falta. ¿Estos elementos tienen algo en común en términos de la estructura? ¿Puedes pensar en un nombre de clase que los vincule a todos y tenga sentido sin el CSS?

Si no es así, no se sienta mal por las trampas. Perfecto es el enemigo del bien.

Answer 3

Sí.

El atributo de clase se utiliza para indicar que los elementos que comparten la misma clase pertenecen a un grupo. Luego puede hacer cosas a estos grupos usando CSS o Javascript. Un elemento puede ser parte de muchos grupos, por lo que podría tener muchas clases.

En su ejemplo, el div pertenece a los grupos "elementos después de los cuales quiero borrar los flotantes", por lo que cada elemento de ese grupo debe tener la clase "limpiador" para indicar esto al CSS.

tener una lectura de este artículo en "Modular CSS" que habla de una buena manera de estructurar su CSS y clases

Answer 4

El problema es que el CSS está mal diseñado desde el punto de vista de evitar la duplicación. Sería increíble si pudiéramos definir grupos de reglas y valores y aplicarlos a ciertos selectores. De esta forma, podría evitar la duplicación sin poner marcas de presentación en su HTML. Lamentablemente, CSS hace esto muy difícil de hacer correctamente.

Su enfoque es bastante sólido, pero adolece de un inconveniente importante: si el mismo HTML se utiliza con varias hojas de estilo, y algunas de esas hojas de estilo deben borrarse en lugares diferentes que otros, entonces puede tener problemas con este enfoque . Si su código HTML ya está vinculado a la presentación del documento, este inconveniente no se aplicará tanto.

Editar: Olvidé mencionar que puede anular la repetición si su CSS se genera mediante programación. Entonces puede ser tan detallado y complejo como requiere CSS mientras que es conceptualmente simple y fácil de mantener. La desventaja aquí sería un mayor tamaño de descarga. Esto podría mitigarse mediante compresión.

Answer 5

Realmente no hay una buena manera de eliminar el diseño en una solución completamente independiente del contenido. Esto se debe a que CSS es un lenguaje de estilo y también se ha sobrecargado para manejar el diseño (al igual que las tablas HTML estaban de vuelta "en el día"). Realmente no hay un lenguaje de diseño simple disponible (todavía) y, como tal, tenemos que conformarnos con lo que tenemos.

Me gusta su enfoque ya que mantiene marcado adicional elementos a un mínimo, que es mucho más portátil. Sin embargo, no estoy seguro de que IE6 soporte el: después del pseudo-elemento, así que pise con cuidado.