¿Cómo poner espacios de nombres a tu CSS?

7

Por lo que sé, hay dos tipos de espacios de nombres CSS:

Prefijo uno:

.myapp-alert {...}

y clase uno:

.myapp .alert {...}

¿Cuál es preferible? ¿Uno tiene beneficios sobre el otro? ¿Hay alguna otra?

    
pregunta Runnick 25.06.2017 - 09:20

2 respuestas

12

No hay espacios de nombres en CSS. Todo lo que haces en CSS termina en alcance global. Esto es por diseño.

Esto conduce a dos problemas:

  • ¿Qué sucede con las aplicaciones que usan mi biblioteca si, en la biblioteca, introduzco un estilo determinado?

  • ¿Qué sucede con otras partes de mi aplicación 100M-LOC si introduzco un estilo determinado en la parte en la que estoy trabajando?

Esas son dos situaciones distintas, que se pueden manejar con dos técnicas distintas que describió en su pregunta.

Prefijos funcionan bien para bibliotecas y marcos. Si un marco tiene un icono de alerta, este icono puede aparecer en cualquier lugar de la página. Por lo tanto, no puede limitar el estilo a un elemento en particular (a través del selector de clase / id). Esto conduce, de hecho, a los selectores tales como:

.my-awesome-framework-icons-alert { ... }

La elección del prefijo es, por cierto, importante para evitar colisiones. Las bibliotecas y los marcos populares pueden usar pequeños prefijos, sabiendo que los sitios web que los usan se adaptarán. Por ejemplo, un sitio web que utiliza AngularJS probablemente no usará el prefijo ng- para sus elementos personalizados. Las bibliotecas pequeñas, por otro lado, sería mejor utilizar nombres más esotéricos si desean integrarse fácilmente en proyectos existentes.

Contenedores , por otro lado, funciona bien para los componentes de la aplicación. No quiero que todos los estilos en mi página Acerca de tengan el prefijo about-page- . Preferiría crear un elemento <div id="about"> y usarlo como un ámbito para los estilos que se usan solo en la página Acerca de .

Usando preprocesadores de CSS como LESS, tal código evita gran parte de la duplicación en comparación con los prefijos. Simplemente lo hago:

#about {
    .contact { ... }
    .map { ... }
    ...
}

y deje que el preprocesador duplique #about para cada estilo relevante.

    
respondido por el Arseni Mourzenko 25.06.2017 - 10:14
0

Usamos BEM (modificador de elementos de bloque) para resolver los problemas en CSS que los espacios de nombres resuelven en otros idiomas. enlace

    
respondido por el Andreas Warberg 25.06.2017 - 20:41

Lea otras preguntas en las etiquetas