Desde que mencionamos por primera vez CSS-en-JS como una t¨¦cnica emergente en el 2007, se ha vuelto mucho m¨¢s popular, y es una tendencia que tambi¨¦n vemos en nuestro trabajo. Con una s¨®lida experiencia de producci¨®n en nuestro historial, ahora podemos recomendar CSS-en-JS como una t¨¦cnica a probar. Un buen punto de partida es el marco de trabajo denominado componentes con estilos (styled components), que mencionamos en nuestro ¨²ltimo Radar. A pesar de todos los aspectos positivos que tiene esta t¨¦cnica, puede haber una desventaja al utilizar CSS-en-JS: el c¨¢lculo de los estilos en tiempo de ejecuci¨®n puede ocasionar . Con ahora vemos una nueva clase de marcos de trabajo que fueron creados con este problema en mente. Linaria utiliza una serie de t¨¦cnicas para mover la mayor parte de la carga sobre el rendimiento al tiempo de construcci¨®n. Desafortunadamente, esto trae consigo algunas dificultades, especialmente la falta de soporte para los estilos din¨¢micos en IE11.
CSS in JS is a technique of writing CSS styling in the JavaScript programming language. This encourages a common pattern of writing the styling with the JavaScript component it applies to, co-locating presentational and logical concerns. The new players ¡ª including , and ¡ª rely on the tooling to translate the CSS-in-JS code to separate CSS stylesheets, to make them suitable for browser consumption. This is the second-generation approach to writing CSS in JavaScript and unlike the previous approaches doesn¡¯t rely on in-line styles. That means it provides the benefit of supporting all CSS features, sharing of CSS using the npm ecosystem and utilization of components across multiple platforms. Our teams have found working well with component-based frameworks, such as React, and unit testing of CSS with . This space is new and rapidly changing; the approach requires some effort for manual debugging of the generated class names in the browser, and it may not apply to some projects where the front-end architecture does not support reusing components and requires global styling.
