css naming convention discussion (jqueryui)

Question

Estoy trabajando en un proyecto que implica una gran cantidad de código del lado del cliente. Estábamos discutiendo convenciones de nombres para clases de CSS e ID de elementos y me sorprendió que no haya material en línea al respecto.

He notado que jquery ui usa una convención en la que el estilo named se aplana (como ui-widgetname-classname- [subclassname]) en lugar de nombrar estas clases según su jerarquía (.ui .widget .classname). Supongo que esto lo hace menos dependiente de la estructura DOM pero crea nombres extremadamente largos.

Según su experiencia, ¿tiene una guía de estilo para nombrar estilos de CSS? cualquier Dos y Donts y trampas para evitar?

esperamos oír de usted

Answer 1

usando .ui-widget-classname en lugar de .ui .widget .classname es debido al apoyo a navegadores antiguos (es decir, IE6/7). Si bien la posibilidad de seleccionar múltiples clases a la vez haría que tu CSS fuera más legible y mantenible, IE6/7 no se comportaría como se esperaba.

Por ejemplo, para apuntar que el elemento exacto, lo que se necesita para encadenar los estilos de este modo:

.ui.widget.classname { 
    background: red; 
} 

coincidiría elemento nada con .classname en IE6/7. Las clases como .ui-widget-classname le dan un selector muy específico para orientar, a costa de la verborrea.

La otra solución anida divs, así:

<div class="ui"> 
    <div class="widget"> 
    <div class="classname"> 
    </div> 
    </div> 
</div> 

.ui .widget .classname { 
    background: red; 
} 

En cuyo caso sus estilos trabajarán en todos los navegadores.

Entre estas dos opciones, imagino que jQuery UI optó por modificar el DOM lo menos posible con un solo div al tiempo que proporciona un acceso fácil para el diseño.