¡Finalmente, CSS en JS! Conoce CSSX

 

 

 

  • ¡Registro!
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. CSS en JS: el concepto
    2. Conozca la biblioteca CSSX
    3. La parte desafiante: sintaxis CSS real en JavaScript
    4. Comience a escribir CSS básico en JavaScript
      1. Tipos de expresiones CSSX
      2. Volviéndose dinámico
    5. "¡Muéstrame el código!"
      1. La base
      2. El componente de navegación
    6. Resumen
    7. Enlaces
      1. Idioma
      2. Paquetes
      3. Ejemplos
      4. Otras lecturas

    Imagine un componente web distribuido como un único .jsarchivo y que lo contenga todo. Todavía tendríamos nuestras hojas de estilo básicas, pero el CSS dinámico sería parte de JavaScript. Ahora esto es posible y una forma de lograrlo es con CSSX. Al igual que JSX, CSSX ofrece encapsulación. Poder ver todas las partes de un único componente es un gran paso adelante. La separación de preocupaciones definió el desarrollo durante años, pero la red está cambiando. Entender lo que está pasando es más fácil cuando todo está en un solo lugar.

     

    JavaScript es un lenguaje maravilloso. Es rico, dinámico y está muy estrechamente vinculado a la web hoy en día. El concepto de escribir todo en JavaScript ya no suena tan descabellado. Primero, comenzamos a escribir nuestro back-end en JavaScript y luego Facebook introdujo JSX , en el que mezclamos el marcado HTML con JavaScript. ¿Por qué no hacer lo mismo con CSS en JS?

    Imagine un componente web distribuido como un único .jsarchivo y que lo contenga todo: marcado, lógica y estilos. Todavía tendríamos nuestras hojas de estilo básicas , pero el CSS dinámico sería parte de JavaScript. Ahora esto es posible, y una forma de lograrlo es con CSSX . CSSX es un proyecto que se tragó mi tiempo libre durante un mes. Fue desafiante e interesante y definitivamente me impulsó a aprender muchas cosas nuevas. El resultado es un conjunto de herramientas que le permiten escribir CSS básico en JavaScript.

     

    Al igual que JSX, CSSX ofrece encapsulación. Poder ver todas las partes de un único componente es un gran paso adelante. La separación de preocupaciones definió el desarrollo durante años, pero la red está cambiando. Muy a menudo, trabajaremos completamente en el navegador y el enfoque de Facebook con JSX tiene mucho sentido. Entender lo que está pasando es más fácil cuando todo está en un solo lugar. De todos modos, vinculamos partes de JavaScript a partes de HTML. Al mezclar ambos, simplemente hacemos explícitos estos vínculos. Si funciona para HTML, definitivamente funcionará para CSS.

    CSS en JS: el concepto

    Mi idea de poner CSS en JavaScript se remonta a 2013, cuando creé una biblioteca que comenzó como un preprocesador de CSS pero que convertí en una herramienta del lado del cliente. La idea era simple: convertir literales de objetos a CSS válido, que luego se aplica a la página. Los estilos “viajan” con el JavaScript. Están agrupados y no es necesario gestionar hojas de estilo externas. Mientras experimentaba con este enfoque, identifiqué dos problemas:

    • El primer problema fue el destello de texto sin estilo (FOUT). Si confiamos en JavaScript para entregar CSS, entonces el usuario verá contenido sin estilo durante un segundo (o más) antes de obtener la página con estilo. Esto da como resultado cambios de diseño y conduce a una mala experiencia de usuario.
    • El segundo problema es que no existe una hoja de estilo. Hay muchos ejemplos de estilos que se aplican con JavaScript, pero la mayoría son estilos en línea. En otras palabras, modifican la stylepropiedad del elemento DOM. Está bien, pero no podemos revisar todos los elementos que necesitan estilo y cambiar sus atributos. Además, no todo se puede colocar en un styleatributo: consultas de medios y pseudoclases, por ejemplo.

    Mi objetivo era resolver estos dos problemas y comencé a darle forma a una solución. La siguiente imagen ilustra cómo me imaginaba trabajando con CSS en JavaScript:

    Habría una biblioteca que se interpone entre su código y los estilos reales aplicados a la página. Su responsabilidad sería crear una hoja de estilo virtual y le asociaría una styleetiqueta. Luego, proporcionaría una API para gestionar reglas CSS. Cada interacción con su hoja de estilo JavaScript se reflejará en la styleetiqueta inyectada. Con este enfoque, mantendría los estilos dinámicos estrechamente acoplados al JavaScript que los controla. No tendría que definir nuevas clases de CSS porque generaría las reglas de CSS sobre la marcha en tiempo de ejecución.

     

    Prefiero generar e inyectar CSS porque el estilo en línea no se escala. Es técnicamente fácil, pero simplemente no escala. Si hay CSS en JavaScript, deberíamos poder controlarlo como una hoja de estilo real. Deberíamos poder definir estilos y luego agregarlos, eliminarlos o actualizarlos dentro. Y esos cambios deben aplicarse a la página como la hoja de estilo en un archivo estático.

    El problema FOUT es una cuestión de compensaciones. La pregunta no es "¿Deberíamos poner nuestro CSS en JavaScript", sino "¿Qué parte del CSS podría escribirse en JavaScript?" Ciertamente, la tipografía, la cuadrícula y los colores deberían estar en un archivo estático para que los navegadores puedan consumirlo lo más rápido posible. Sin embargo, no se necesitan muchas cosas de inmediato, por ejemplo, clases relacionadas con el estado, como is-clickedy is-activated. En el mundo de las aplicaciones de una sola página, todo lo generado por JavaScript se puede diseñar con JavaScript . Esto se debe a que no aparece antes de que tengamos el paquete completo de JavaScript. En una aplicación a gran escala, es muy importante formar diferentes bloques y mantenerlos separados. Cuantas menos dependencias tenga un solo componente, mejor. HTML y CSS son dependencias estrictas de nuestras vistas de JavaScript del lado del cliente . Sin ellos, realmente no podemos mostrar contenido. Agruparlos en un solo lugar reduciría la complejidad de nuestros proyectos.

    Con base en estas conclusiones, comencé a escribir la biblioteca del lado del cliente CSSX.

    Conozca la biblioteca CSSX

    Para que la biblioteca CSSX esté disponible, incluya el archivo cssx.min.js en su página o instale el módulo npm ejecutando npm install cssx. Si tiene un proceso de compilación, probablemente le interese el paquete npm.

    Hay una demostración en línea disponible en GitHub . Puedes ver CSSX en acción allí.

    (La biblioteca del lado del cliente CSSX es necesaria para que CSSX se inyecte en tiempo de ejecución. Más adelante, veremos qué otros módulos se requieren para admitir la sintaxis CSS básica. Hasta entonces, centrémonos en la API solo de JavaScript).

    A continuación se muestra un ejemplo muy básico de una hoja de estilo con una regla registrada:

    var sheet = cssx();sheet.add('p a', { 'font-size': '20px'});

    Si ejecutamos esto en un navegador, veríamos una nueva styleetiqueta inyectada en el encabezado del documento:

    style type="text/css"p a{font-size:20px;}/style

    El addmétodo acepta un selector y propiedades CSS como un objeto literal. Esto funciona, pero es una declaración estática. Casi no habría ningún beneficio al hacer esto en JavaScript. Podríamos colocar estos estilos con la misma facilidad en nuestro archivo CSS externo. Transformemos el código a lo siguiente:

    var sheet = cssx();var rule = sheet.add('p a');var setFontSize = function (size) { return { 'font-size': size + 'px' };};rule.update(setFontSize(20));…rule.update(setFontSize(24));

    Ahora hay otra cosa. Ahora podemos cambiar el tamaño de fuente dinámicamente. El resultado del código anterior es este:

     

    p a { font-size: 24px;}

    Entonces, escribir CSS en JavaScript ahora se convierte en una composición de objetos literales. Podemos utilizar todas las funciones del lenguaje JavaScript para crearlos. Cosas simples como definir una variable, usar funciones de fábrica y extender clases base están aquí de forma predeterminada. Encapsulación, reutilización, modularidad: obtenemos todas estas cosas de forma gratuita.

    La biblioteca CSSX tiene una API minimalista, principalmente porque JavaScript es realmente flexible. La composición del CSS queda en manos del desarrollador. Las funciones expuestas giran en torno a la producción de estilos reales. Por ejemplo, mientras escribimos CSS, tendemos a crear grupos. Algunos de estos grupos están formados por la estructura del diseño: estilos para el encabezado, la barra lateral y el pie de página. A continuación se explica cómo definir el alcance de los estilos utilizando un objeto de regla CSSX:

    var sheet = cssx();// `header` is a CSSX rule objectvar header = sheet.add('.header');header.descendant('nav', { margin: '10px' });header.descendant('nav a', { float: 'left' });header.descendant('.hero', { 'font-size': '3em' });

    El resultado de este fragmento es este:

    .header nav { margin: 10px;}.header nav a { float: left;}.header .hero { font-size: 3em;}

    En lugar de header.descendant, podemos usar header.d. Sería molesto tener que escribir descendanttodo el tiempo; entonces, .dexiste un atajo.

    Tenemos otro método similar a descendant- nested. En lugar de encadenar los selectores, la biblioteca anidaría las definiciones. Aquí hay un ejemplo:

    var smallScreen = sheet.add('@media all and (max-width: 320px)');smallScreen.nested('body', { 'font-size': '10px' });/* results in@media all and (max-width: 320px) { body { font-size: 10px; }}*/

    Esta API se puede utilizar para crear consultas de medios o @keyframesdefiniciones. En teoría, esto es suficiente para producir un resultado similar al de Sass. También existe el .natajo, en lugar de .nested.

    Hasta ahora, hemos visto cómo producir CSS válido que se aplica a la página en tiempo de ejecución. Sin embargo, escribir estilos como ese lleva mucho tiempo y, aunque nuestro código tiene una buena estructura, no es tan agradable como escribir CSS básico.

    La parte desafiante: sintaxis CSS real en JavaScript

    Como hemos visto, escribir CSS en el formato que se muestra arriba no es realmente agradable, principalmente porque tenemos que encerrar casi todo entre comillas. Podemos hacer algunas optimizaciones, como usar carcasa de camello, crear ayudas para las diferentes unidades, etc., pero aún no es tan limpio y simple como el CSS normal. Colocar CSS básico en JavaScript genera el conocido error de token inesperado, porque el motor de JavaScript no está diseñado para aceptar código en dicho formato. Bien, entonces, ¿cómo introducimos la sintaxis que queremos? JSX lo creó, ¿verdad? Bueno, no fue así. No tenemos etiquetas HTML reales que funcionen en JavaScript. Lo que sucede es que traducimos (o, más exactamente, transpilamos ) JSX a JavaScript válido en el momento de la compilación. El paquete final que se ejecuta en el navegador contiene código válido. Aquí hay un ejemplo:

     

    Por supuesto, esto tiene un costo: un paso más en nuestro proceso de construcción, más configuración y más cosas en las que pensar. Pero, para ser honesto, estoy dispuesto a cambiar eso por una mejor organización y escalabilidad del código. JSX simplemente mejora nuestra vida al ocultar la complejidad de administrar plantillas HTML.

    Y JSX era exactamente lo que quería, pero para CSS. Comencé a investigar Babel , porque ese es el transpilador oficial de JSX en este momento. Utiliza el módulo Babylon para analizar el código fuente y transformarlo en un árbol de sintaxis abstracta (AST). Más tarde, el generador de babel analiza ese árbol y lo convierte en código JavaScript válido. Así es como Babel entiende JSX. Utiliza el mismo enfoque para las funciones de ES6 que aún no son compatibles con todos los navegadores.

    Entonces, todo lo que tenía que hacer es ver cómo entiende Babylon JSX y hacer lo mismo con CSS. El módulo está escrito así, por lo que permite la extensión desde el exterior. De hecho, casi cualquier cosa se puede cambiar. JSX es un complemento allí y tenía muchas ganas de crear uno para CSSX.

    Sabía sobre AST y lo útil que puede ser, pero nunca dediqué tiempo a aprender a generar uno. Básicamente es un proceso de lectura de pequeños fragmentos (o tokens) del código, uno por uno. Tenemos un montón de afirmaciones que intentan formar una secuencia significativa de tokens. Si se reconoce algo, entonces definimos un contexto y continuamos analizando hasta salir del contexto actual y continuar con otro. Por supuesto, hay muchos casos extremos que deben abordarse. Y lo divertido es que no podemos ampliar el analizador hasta que conozcamos cada pequeño detalle. Me tomó un par de semanas leer y comprender realmente lo que está sucediendo allí.

    Al principio, cometí el error de seguir la implementación del complemento JSX. No puedo decirte cuántas veces inicié el complemento CSSX. Cada vez, terminaba con algo que no cubría completamente la sintaxis de CSS o rompía la sintaxis de JavaScript. Luego, me di cuenta de que JSX es bastante diferente y comencé a extender solo lo que CSS necesita. El enfoque de desarrollo basado en pruebas funcionó perfectamente aquí. Debo mencionar que Babilonia tiene más de 2100 pruebas. Y eso es absolutamente razonable considerando que el módulo comprende un lenguaje tan rico y dinámico como JavaScript. Mazos del Hearthstone

    Tuve que tomar un par de decisiones de diseño interesantes. Primero, intenté analizar código como este:

    var styles = { margin: 0, padding: 0}

    Todo iba bien hasta que decidí ejecutar mi complemento con todas las pruebas en Babylon. El analizador normalmente produce un ObjectExpressionnodo a partir de este código, pero estaba haciendo otra cosa porque lo reconocí como CSSX. Efectivamente rompí el lenguaje JavaScript. No hay forma de saber qué tenemos hasta que analicemos todo el bloque. Por eso decidí usar otra sintaxis:

    var styles = cssx({ margin: 0; padding: 0;});

    Aquí decimos explícitamente que estamos escribiendo una expresión CSSX. Modificar el analizador es mucho más fácil cuando tenemos un punto de entrada claro. JSX no tiene este problema porque HTML ni siquiera se acerca a JavaScript y no existen tales conflictos.

     

    Estuve usando CSSX con la cssx( … )notación por un tiempo, pero luego me di cuenta de que podía reemplazarlo con style … /style. Fue un cambio barato. Cada vez que el código llega al analizador, justo antes de procesarlo, ejecutamos un simple reemplazo de expresiones regulares :

    code = code.replace(/style/g, 'cssx(').replace(//style/g, ')');

    Esto nos ayuda a escribir lo siguiente:

    var styles = style{ margin: 0; padding: 0;}/style;

    Y al final tenemos el mismo resultado.

    Comience a escribir CSS básico en JavaScript

    Digamos que tenemos una herramienta que comprende CSSX y produce AST adecuado. El siguiente paso es conseguir un transpilador que genere JavaScript válido. El paquete que se ocupa de esto es CSSX-Transpiler . En el fondo, todavía estamos usando babel-generator, pero solo después de sustituir nuestros nodos CSSX personalizados con algo que Babel entienda. Otro módulo útil es babel-types . Hay un montón de funciones de utilidad y, sin ellas, generar un árbol para el generador sería realmente difícil.

    Tipos de expresiones CSSX

    Veamos un par de transformaciones simples.

    var styles = style{ font-size: 20px; padding: 0;}/style;

    Esto se transforma en lo siguiente:

    var styles = (function () { var _2 = {}; _2['padding'] = '0'; _2['font-size'] = '20px'; return _2;}.apply(this));

    Ese es el primer tipo, donde producimos un objeto literal simple. El equivalente del código anterior es este:

    var styles = { 'font-size': '20px', 'padding': '0'};

    Si se desplaza hacia arriba, verá que eso es exactamente lo que necesitamos en la biblioteca del lado del cliente CSSX. Si operáramos con muchos de ellos, entonces sería bueno usar CSS básico.

    La segunda expresión contiene más información. Incluye toda la regla CSS: selector y propiedades:

    var sheet = style .header nav { font-size: 20px; padding: 0; }/style;

    Aquí está el JavaScript transpilado:

    var sheet = (function () { var _2 = {}; _2['padding'] = '0'; _2['font-size'] = '20px'; var _1 = cssx('_1'); _1.add('.header nav', _2); return _1;}.apply(this));

    Tenga en cuenta que estamos definiendo una nueva hoja de estilo. cssx(’_1’)Debo aclarar que si ejecutamos este código dos veces, no crearemos una styleetiqueta adicional. Estaríamos usando el mismo porque cssx()recibe el mismo ID ( _1) y devuelve el mismo objeto de hoja de estilo.

    Si agregamos más reglas CSS, veríamos más _1.add()líneas.

    Volviéndose dinámico

    Como se mencionó, el principal beneficio de escribir CSS en JavaScript es obtener acceso a una gama más amplia de herramientas, como definir una función que obtiene un número y genera una font-sizeregla. Me costó mucho decidir la sintaxis de estas "partes dinámicas". En JSX, esto se resuelve fácilmente envolviendo el código entre llaves. Nuevamente, hacer lo mismo en CSSX sería difícil porque las llaves entran en conflicto con otras cosas. Siempre los usamos al definir reglas CSS. Entonces, inicialmente decidí reemplazarlos con el acento grave (o el acento grave):

     

    var size = 20;var styles = style .header nav { font-size: `size + 2`px; padding: 0; }/style;

    El resultado sería este:

    .header nav { padding: 0; font-size: 22px;}

    Podemos utilizar piezas dinámicas en todas partes. Todo lo que coloquemos dentro se considera JavaScript válido y se ejecuta.

    var size = 20;var prop = 'size';var selector = 'header';var styles = style .`selector` nav { font-`prop`: `size + 2`px; padding: 0; }/style;

    De manera similar a JSX, el código se transforma a JavaScript válido:

    var size = 20;var prop = 'size';var selector = 'header';var styles = (function () { var _2 = {}; _2['padding'] = '0'; _2["font-" + prop] = size + 2 + "px"; var _1 = cssx('_1'); _1.add("." + selector + " nav", _2); return _1;}.apply(this));

    Debo mencionar que la función de autoinvocación alrededor del código transpilado es necesaria para mantener el alcance correcto. El código que colocamos dentro de las llamadas expresiones dinámicas debe utilizar el contexto correcto. De lo contrario, probablemente estaríamos solicitando acceso a variables no definidas o estaríamos leyendo desde el ámbito global. La otra razón para utilizar un cierre es evitar colisiones con otras partes de nuestra aplicación.

    Después de recibir algunos comentarios, decidí admitir otras dos sintaxis para esas expresiones dinámicas. Se necesitaba una refactorización sólida para el código que define palabras dentro de CSSX. Ahora es posible utilizar {{ … }}o % … %:

    var size = 20;var styles = style .header nav { font-size: px; padding: 0; }/style;

    "¡Muéstrame el código!"

    Construyamos algo real y veamos cómo funciona CSSX en la práctica. Y como CSSX está inspirado en JSX, crearemos un menú de navegación de React simple. El resultado se verá así:

    (El código fuente final de este ejemplo está disponible en GitHub . Simplemente descargue los archivos e instale las dependencias con npm install. Luego, ejecute npm run devpara compilar JavaScript y ábralo example/index.htmlen un navegador. También está disponible una demostración en vivo del resultado).

    La base

    Ya hemos establecido que CSSX no está destinado a servir a todo el CSS. Debe contener sólo aquellos bits que sean dinámicos. El CSS básico en este ejemplo sería el siguiente:

    body { font-family: Helvetica, Tahoma; font-size: 18px;}ul { list-style: none; max-width: 200px;}ul, li { margin: 0; padding: 0;}li { margin-bottom: 4px;}

    Nuestra navegación estará compuesta por una lista desordenada de elementos. Cada elemento contendrá una aetiqueta que representa el área en la que se puede hacer clic.

    El componente de navegación

    (No se preocupe si no está familiarizado con React. El mismo código se puede aplicar en otros marcos. Lo importante aquí es cómo usamos CSSX para diseñar los botones y definir su comportamiento).

    Lo primero que tenemos que hacer es representar los enlaces en la página. Digamos que los elementos de la lista llegarán al componente como una itemspropiedad. Los recorreremos y crearemos lietiquetas.

     

    class Navigation extends React.Component { constructor(props) { super(props); this.state = { color: '#2276BF' }; } componentWillMount() { // Create our style sheet here } render() { return ul{ this._getItems() }/ul; } _getItems() { return this.props.items.map((item, i) = { return ( li key={ i } a className='push_button red' onClick={ this._handleClick.bind(this, i) } { item } /a /li ) }) } _handleClick(index) { // Handle link's click here }}

    Hemos puesto una colorvariable en el estado del componente y la usaremos más adelante en nuestra hoja de estilos. Debido a que los estilos se generarán en tiempo de ejecución, podemos ir aún más lejos escribiendo una función que devuelva el color. Tenga en cuenta que, al colocar CSS en JavaScript, ¡ya no vivimos en la tierra declarativa y estática de CSS!

    Tal como está, el componente está listo para renderizarse.

    const ITEMS = [ 'React', 'Angular', 'Vue', 'Ember', 'Knockout', 'Vanilla'];ReactDOM.render( Navigation items={ ITEMS } /, document.querySelector('body'));

    El navegador simplemente muestra nuestro ITEMSen la pantalla. Dentro del CSS estático, eliminamos las viñetas predeterminadas de la lista desordenada y limpiamos el espacio alrededor de los elementos. El resultado es este:

    Ahora, agreguemos algo de CSSX y definamos el aspecto inicial de los elementos. Un buen lugar para hacer esto es la componentWillMountfunción porque es el método que se activa antes de que el componente llegue a la página.

    componentWillMount() { var color = this.state.color; style li { padding-left: 0; (w)transition: padding-left 300ms ease; } .btn { display: block; cursor: pointer; padding: 0.6em 1em; border-bottom: solid 2px `color`; border-radius: 6px; background-color: `shadeColor(color, 0.5)`; (w)transition: background-color 400ms ease; } .btn:hover { background-color: `shadeColor(color, 0.2)`; } /style;}

    Observe cómo hemos usado expresiones CSSX para definir el color del borde inferior y el color de fondo. shadeColores una función auxiliar que acepta un color en formato HEX y lo sombrea según el segundo parámetro (que está entre -1y 1). Eso no es realmente importante en este momento. El resultado de este código es una nueva hoja de estilo inyectada en headla página. El CSS es exactamente lo que necesitamos:

    li { padding-left: 0; transition: padding-left 300ms ease; -webkit-transition: padding-left 300ms ease;}.btn { background-color: #91bbdf; border-radius: 6px; border-bottom: solid 2px #2276BF; padding: 0.6em 1em; cursor: pointer; display: block; transition: background-color 400ms ease; -webkit-transition: background-color 400ms ease;}.btn:hover { background-color: #4e91cc;}

    El (w)frente de las propiedades genera una versión con prefijo.

    Ahora, nuestra navegación ya no es un simple texto:

    La última parte de nuestro componente es la interacción con el usuario. Si hacemos clic en algunos de los enlaces, deberían reducirse desde la izquierda y se debería establecer un color de fondo estático. En la _handleClickfunción, recibiremos el índice del elemento en el que se hizo clic; entonces, podemos usar nth-childel selector CSS para diseñar el botón correcto:

     

    _handleClick(index) { style li:nth-child({{ index + 1 }}) { padding-left: 2em; } li:nth-child({{ index + 1 }}) .btn { background-color: {{ this.state.color }}; } /style;}

    Esto funciona pero hay un problema. Un elemento en el que se ha hecho clic no recupera su estado inicial si hacemos clic en otro enlace. Después de dos clics, por ejemplo, nuestro documento podría contener lo siguiente:

    li:nth-child(4) { padding-left: 2em;}li:nth-child(4) .btn { background-color: #2276BF;}li:nth-child(3) { padding-left: 2em;}li:nth-child(3) .btn { background-color: #2276BF;}

    Por lo tanto, tenemos que borrar la hoja de estilo antes de aplicar estilo al elemento en el que se hizo clic.

    var stylesheet, row;// creating a new style sheetstylesheet = cssx('selected');// clearing all the stylesstylesheet.clear();// adding the stylesstylesheet.add( style li:nth-child({{ index + 1 }}) { padding-left: 2em; } li:nth-child({{ index + 1 }}) .btn { background-color: {{ this.state.color }}; } /style);

    O, si optamos por el encadenamiento de métodos, tendríamos esto:

    cssx('selected') .clear() .add( style li:nth-child({{ index + 1 }}) { padding-left: 2em; } li:nth-child({{ index + 1 }}) .btn { background-color: {{ this.state.color }}; } /style );

    Observe que hemos especificado un ID de la hoja de estilo: selected. Esto es importante; de lo contrario, obtendríamos una hoja de estilo diferente cada vez.

    Con el cambio anterior, nuestro ejemplo funciona exactamente como el GIF animado al principio de esta sección.

    Incluso con un ejemplo tan sencillo, podemos reconocer algunos de los beneficios de CSSX:

    • No tenemos que lidiar con clases CSS adicionales.
    • No hay interacción con el DOM porque no tenemos que agregar ni eliminar clases CSS.
    • Tenemos CSS dinámico real, estrechamente acoplado con la lógica del componente.

    Resumen

    HTML y CSS en JavaScript pueden parecer extraños, pero la verdad es que llevamos años haciéndolo. Precompilamos nuestras plantillas y las colocamos en JavaScript. Formamos HTML como cadenas y utilizamos estilos en línea producidos por JavaScript. Entonces, ¿por qué no utilizar la misma sintaxis directamente?

    En el último año, he usado mucho React y puedo decir que JSX no está nada mal. De hecho, mejora la mantenibilidad y acorta el tiempo dedicado a iniciar un nuevo proyecto.

    Todavía estoy experimentando con CSSX. Veo similitudes con JSX en el flujo de trabajo y el resultado. Si quieres ver cómo funciona, mira la demostración .

    Enlaces

    Idioma

    • Lenguaje CSSX , GitHub

    Paquetes

    • CSSX (biblioteca del lado del cliente)
    • Transpilador CSSX
    • gulp-cssx (complemento)
    • cargador-cssx (para Webpack)

    Ejemplos

    • " Uso de Vanilla CSS en aplicaciones React ", componente GitHub CSSX para aplicaciones React
    • patio de juegos CSSX
      • Básico
      • Transpilador
      • trago del transpilador
      • paquete web transpiler
      • Reaccionar (en el que se basa nuestro ejemplo)

    Otras lecturas

    • React Native: cree su primera aplicación para iOS con JavaScript
    • Diseñar componentes web utilizando una hoja de estilo compartida
    • Aplicación de las mejores prácticas en sistemas basados ​​en componentes
    • Creación de un juego WebGL multiplataforma con Babylon.js

    (rb, ml, al, il, mrn)Explora más en

    • Codificación
    • CSS
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    ¡Finalmente, CSS en JS! Conoce CSSX

    ¡Finalmente, CSS en JS! Conoce CSSX

    ¡Registro! Listas de verificación de diseño de interfaz inteligente Índice CSS en JS: el concepto

    programar

    es

    https://pseint.es/static/images/programar-finalmente-889-0.jpg

    2024-04-04

     

    ¡Finalmente, CSS en JS! Conoce CSSX
    ¡Finalmente, CSS en JS! Conoce CSSX

     

     

    Top 20