Share
Los "módulos CSS" no tienen nada que ver con el W3C, sino que forman parte de un proceso de compilación sugerido. Recopila su proyecto, cambiando el nombre de los selectores y las clases para que se conviertan en únicos, dentro del alcance de los componentes individuales. Los estilos están bloqueados en esos componentes y no se pueden usar en otros lugares a menos que usted lo diga específicamente!
Hoy en día estamos bastante acostumbrados a la idea de que las tecnologías web son la fuerza impulsora detrás de las aplicaciones; aplicaciones web, móviles y de escritorio. Pero, a diferencia de los sitios web estáticos simples, las aplicaciones suelen ser más dinámicas, complejas y, a menudo, constan de componentes que van más allá de lo que ofrecen Bootstrap o ZURB Foundation. A medida que una aplicación crece en complejidad, administrar su CSS puede ser una tarea infernal.
Con el tiempo, se han desarrollado innumerables estrategias, como OOCSS, ITCSS, BEM, Atomic CSS, etc. para mantener el CSS organizado, reutilizable y (fundamentalmente) escalable. Estas estrategias requieren que usted y todos en su equipo sigan las convenciones diligentemente..
Sin embargo, tarde o temprano, la complejidad volverá a aparecer y encontrarás reglas de estilo como las siguientes:
html.progressive-image.js [datos-progresivo-imagen], html.progressive-image.js [datos-progresivo-imagen] * background-image: none! important; máscara-imagen: ninguna! importante; opacidad: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item transform: translate (0, 0)! important
El problema con CSS en muchos sitios web y aplicaciones a gran escala es que es tan difícil mantener la especificidad baja que, en algún momento, agrega !importante no se puede evitar Y refactorizar CSS en una base de código grande es complicado, ya que eliminar estilos podría romper otros componentes.
En este tutorial, veremos “Módulos CSS” y cómo puede ayudarnos a minimizar estos problemas notorios de CSS..
Nota: revisa el repositorio en Github para ver ejemplos de códigos de soporte.
En pocas palabras, "Módulos CSS" es una herramienta que cambia el nombre de las clases y las ID de CSS a selectores únicos, lo que le permite aislar las reglas de estilo localmente a los elementos o componentes asignados. Suponiendo que tenemos un botón, normalmente podríamos escribir sus reglas de estilo de la siguiente manera:
.botón color de fondo: # 9b4dca; borde: 0.1rem sólido # 9b4dca; radio del borde: .4rem; color: #fff; cursor: puntero; pantalla: bloque en línea; .button: focus, .button: hover background-color: # 606c76; color de borde: # 606c76; color: #fff; esquema: 0;
Con los módulos CSS, estas reglas de estilo cambiarán de nombre a algo como:
._12We30_button background-color: # 9b4dca; borde: 0.1rem sólido # 9b4dca; radio del borde: .4rem; color: #fff; cursor: puntero; pantalla: bloque en línea; ._12We30_button: focus, ._12We30_button: hover background-color: # 606c76; color de borde: # 606c76; color: #fff; esquema: 0;
Si observa sitios grandes como Facebook, Instagram o Airbnb a través de los DevTools de su navegador, encontrará que las clases y los identificadores de CSS se nombran con este tipo de patrón. Aquí hay un ejemplo de la página de inicio de Airbnb:
¿Quién nombró a la clase con números aparentemente aleatorios??El uso de módulos CSS no tendrá mucho sentido si tenemos un solo componente, así que expandamos nuestro ejemplo a tres componentes y veamos cómo configurar nuestro proyecto para implementar módulos CSS..
En este segundo ejemplo, vamos a construir tres componentes; Un botón con tres estilos diferentes. Los llamaremos "botón primario", "botón de contorno" (también conocido como "botón fantasma") y "botón de borrar". Pondremos estos botones en un directorio separado. Cada directorio contendrá index.css y index.js.
En el index.js, Creamos el elemento y asignamos las clases al elemento, de la siguiente manera:
// 1. Importe los estilos del archivo index.css. importar estilos desde './index.css'; / ** * 2. Creando un elemento de botón y agregue la clase desde index.css. * @type String * / const button = ''; // 3. Exportar el botón para ser usado en los otros archivos. botón de exportación por defecto;
Usando el nuevo importar En ES6, importamos la hoja de estilo y leemos las clases y las ID como un objeto JavaScript. Luego creamos un elemento y agregamos la clase llamada .botón utilizando plantillas nativas de JavaScript que también se introdujo en ES6. Por último, exportamos nuestro elemento para que el elemento también se pueda importar y reutilizar dentro de los otros archivos JavaScript..
Al momento de escribir este artículo, no todos los navegadores han implementado las últimas funciones y sintaxis de JavaScript de la especificación ES6. Por lo tanto, necesitaremos a Babel para transformar esos fragmentos de código en una sintaxis de JavaScript que sea compatible en la mayoría de los navegadores..
Nuestra hoja de estilo, index.css, es simple CSS. Contiene una serie de selectores para diseñar el elemento de botón..
/ * 1. Botón principal * / .button background-color: # 9b4dca; borde: 0.1rem sólido # 9b4dca; radio del borde: .4rem; color: #fff; cursor: puntero; pantalla: bloque en línea; tamaño de letra: 1.1rem; peso de la fuente: 700; altura: 3.8rem; espacio entre letras: .1rem; altura de la línea: 3.8rem; relleno: 0 3.0rem; text-align: center; texto-decoración: ninguno; transformación de texto: mayúsculas; espacio en blanco: nowrap; / * Más estilos del botón principal aquí * /
Una de las ventajas de usar los módulos CSS es que no tenemos que preocuparnos por nombrar convenciones. Aún puede usar sus metodologías de CSS favoritas como BEM u OOCSS, pero no se aplica nada; Puede escribir las reglas de estilo de la manera más práctica para el componente, ya que el nombre de la clase será finalmente espacio de nombre.
En este ejemplo, nombramos todas las clases de nuestro componente de botón .botón en lugar de .botón-primario o .contorno de botones.
Trabajar con CSS dentro de Shadow DOM Todavía tengo la vieja costumbre de usar la notación BEM, aunque no lo necesito. Encapsulación de estilo FTW!
- Razvan Caliman (@razvancaliman) 31 de julio de 2017
Cuando cargamos el index.js En una página HTML, nada aparecerá en el navegador. En este caso, tendremos que compilar el código para hacerlo funcional. Necesitaremos instalar Babel, Babel Preset para ES2015 (ES6) y Webpack junto con los siguientes "cargadores" para permitir que Webpack procese nuestros archivos de origen..
Accentsconagua
.js Archivos y transformar el código fuente con el módulo básico de Babel...css archivos.css-loader en nuestra página HTML usando el En Vue, añadimos el módulo atribuir a la estilo elemento, como se muestra arriba, para habilitar los módulos CSS. Cuando compilamos este código obtendremos el mismo resultado..
Terminando
Para algunos de ustedes, esto será algo completamente nuevo. Es perfectamente comprensible si el concepto de los módulos CSS es un poco rascarse la cabeza a primera vista. Así que recapitulemos lo que hemos aprendido sobre los módulos CSS en este artículo.
- “Módulos CSS” nos permite encapsular reglas de estilos al cambiar el nombre o
espacio de nombres los nombres de las clases, minimizando los choques en la especificidad del selector a medida que crece la base de código. - Esto también nos permite escribir los nombres de las clases de manera más cómoda en lugar de seguir una metodología particular.
- Por último, a medida que las reglas de estilo se acoplan a cada componente, los estilos también se eliminarán cuando ya no usemos el componente.
En este artículo, apenas rozamos la superficie de los módulos CSS y otras herramientas modernas de desarrollo web como Babel, Webpack y Vue. Así que aquí he reunido algunas referencias para examinar esas herramientas más a fondo..
Referencia adicional
- Echa un vistazo a la demostración en Github
- Comience a codificar ES6 con Babel: Curso Tuts +
- Comience con el curso Vue: Tuts +
- Instant Webpack 2: Curso de Tuts +
- Estrategias para mantener la especificidad de CSS baja
- Daniel Eden: Muévete lento y arregla las cosas
