El tiempo pasa

Todos los selectores CSS existen dentro del mismo ámbito global. Cualquiera que haya trabajado con CSS el tiempo suficiente ha tenido que aceptar su naturaleza agresivamente global - un modelo claramente diseñado en la era de los documentos, que ahora lucha por ofrecer un entorno de trabajo sano para las aplicaciones web modernas de hoy en día. Todos los selectores pueden tener efectos secundarios no deseados al dirigirse a elementos no deseados o chocar con otros selectores. Y lo que es más sorprendente, nuestros selectores pueden incluso perder en la guerra de la especificidad global y, en última instancia, tener poco o ningún efecto en la página.

Cada vez que hacemos un cambio en un archivo CSS, tenemos que considerar cuidadosamente el entorno global en el que se asentarán nuestros estilos. Ninguna otra tecnología front-end requiere tanta disciplina sólo para mantener el código en un nivel mínimo de mantenibilidad. Pero no tiene por qué ser así. Es hora de dejar atrás la era de las hojas de estilo globales.

Es la hora del CSS local.

En otros idiomas, se acepta que modificar el medio ambiente mundial es algo que debe hacerse rara vez o nunca.

En la comunidad JavaScript, gracias a herramientas como Browserify, Webpack y JSPM, ahora se espera que nuestro código consista en pequeños módulos, cada uno encapsulando sus dependencias explícitas, exportando una API mínima.

Sin embargo, de alguna manera, parece que el CSS sigue teniendo vía libre.

Muchos de nosotros -incluido yo mismo, hasta hace poco- llevamos tanto tiempo trabajando con CSS que no vemos la falta de ámbito local como un problema que podamos resolver sin una ayuda significativa de los proveedores de navegadores. Incluso entonces, todavía tendríamos que esperar a que la mayoría de nuestros usuarios utilizaran un navegador con el soporte adecuado de Shadow DOM.

Hemos resuelto los problemas del ámbito global con una serie de convenciones de nomenclatura como OOCSS, SMACSS, BEM y SUITCada una de ellas nos permite evitar las colisiones de nombres y emular las reglas de alcance.

Ya no necesitamos añadir largos prefijos a todos nuestros selectores para simular el alcance. Más componentes podrían definir sus propios identificadores foo y bar que, a diferencia del modelo tradicional de selector global, no producirían ninguna colisión de nombres.

importar estilos de './MiComponente.css';
importar React, { Component } de "reaccionar";
exportar clase por defecto MiComponente extiende Componente {
 render() {
    devolver (
      <div>
        <divestilos.foo}>Foo</div>
        <divestilos.bar}>Bar</div>
      </div>
    );
  }

Las ventajas de CSS global (reutilización de estilos entre componentes mediante clases de utilidad, etc.) siguen siendo posibles con este modelo.- siguen siendo posibles con este modelo. La diferencia clave es que, al igual que cuando trabajamos con otras tecnologías, tenemos que importar explícitamente las clases de las que dependemos. Nuestro código no puede hacer muchas suposiciones, si es que hace alguna, sobre el entorno global.

Ahora se fomenta la escritura de CSS mantenible, no por cumplimiento escrupuloso de una convención de nomenclaturasino mediante la encapsulación de estilos durante el desarrollo.

Una vez que has probado a trabajar con CSS local, ya no hay vuelta atrás. Experimentar el verdadero ámbito local en nuestras hojas de estilo -de una forma que funciona en todos los navegadores- no es algo que se pueda ignorar fácilmente.

La introducción del ámbito local ha tenido un importante efecto dominó en la forma en que enfocamos nuestro CSS. Las convenciones de nomenclatura, los patrones de reutilización y la posible extracción de estilos en paquetes independientes se ven directamente afectados por este cambio, y solo estamos al principio de esta nueva era de CSS local.

process.env.NODE_ENV === 'desarrollo' ?
    '[name]__[local]___[hash:base64:5]' :
    '[hash:base64:5]'
)

Aún estamos trabajando para entender las ramificaciones de este cambio. Con vuestras valiosas aportaciones y experimentos, espero que esta sea una conversación que podamos mantener juntos como una comunidad más amplia.

Nota: Optimizar automáticamente la reutilización de estilos entre componentes sería un avance increíble, pero sin duda requiere la ayuda de gente mucho más inteligente que yo.

por admin