A world without JavaScript would be unthinkable

CSSX : The marriage between CSS and JavaScript… and its magic

Rajiv Patil
Magician hand with magic wand and hat image via Shutterstock

What is CSSX and how does it work? Why are developers already enchanted by the perspectives it offers? Rajiv Patil, co-founder of Nimblechapps, explains why CSSX is slowly becoming a buzzword. The only downside — it may take some time to get used to it.

JavaScript has been offering websites its dynamic capacities for quite a long time and has never stopped evolving. Any website consists of mainly three basic components, namely markup, logic, and style. The markup language is handled by HTML, logic is handled by JavaScript, the CSS looks after the style aspects of a website. After the arrival of JavaScriptX with the inclusion of HTML 5 within JavaScript code, the problem of handling two aspects of logic and markup finally received a solution. The only element that was left out was CSS.

Any web developer would agree that JavaScript is truly an unmatched language because of its rich capacity, dynamic power, and versatile accommodating character. It is now part of any web experience, so much so that we no longer appreciate the excellence of JavaScript in offering so many succulent features and smooth interface. We are already too used to this language. When many sites were limited to writing their backend codes with JavaScript, Facebook gave JavaScript a new twist called JSX, a mix of HTML markup with JavaScript. The question that kept coming was the following: why not do the same with CSS, so that we can have a complete web language holding together all elements pertaining to logic, markup and style.

If you can think of a file comprising all web components and distributed only as a single .js file, it is CSSX. The file would still offer the basic style sheets but the JavaScript would contain dynamic CSS. The new approach to pack together all web components has already enjoyed developers’ support. Just like JSX, CSSX comes with encapsulation allowing users to see all parts of every single component. The binding together would only make web development experience more sophisticated and smooth.

CSSX in a nutshell

How does the new CSSX work? Basically, with CSSX you need to create objects in JavaScript and then convert all the object literals into CSS. So the styles remain joined with JavaScript and without hindering the loading speed it takes the same time as JavaScript. While it just appeared and developers around the world are already enchanted by the perspectives it offers, it may take some time to get used to CSSX.

Flash of unstyled text (FOUT) was perceived as a major problem. When you depend on JavaScript for delivering the CSS, unstyled content for a flashing moment will appear just before the actual styled page is displayed. The result is a shift in layout and utterly bad user experience.

Secondly, JavaScript offers no complete style sheet. Styles can be applied to JavaScript but they are mostly limited to inline styles. This requires taking every element of styling and changing their attributes. Even so, all the elements can’t be placed in a style attribute. For instance, media queries and pseudo classes can’t be given style attributes like this. So, all in all, the styling aspects of JavaScript lack many things.

How can you solve these two problems? Solving these problems is crucial for the JavaScript to maintain its dynamic capacity with regard to styles. Working with CSS in JavaScript was something that many developers imagined as a conclusive solution to these problems.

How does CSS work in JavaScript?

Obviously, a library must be positioned between the code and the styles that are provided on a page. This library will create a virtual style sheet accompanying a <style> tag. After this, there will be an API for managing the CSS rules. Whenever you interact with your JavaScript style sheet, it would be mirrored in the <style> tag. This would result in coupling your style elements to the JavaScript control. Moreover, defining new CSS classes is no longer required because it allows you to produce the CSS rules at runtime.

Crucial advantages

Ask anyone and they would say they prefer to generate and inject CSS because the inline styles in JavaScript lack scalability. It can be easier to implement but the problem of scalability makes it harder for scaling the style as per requirements. On the other hand, with CSS within JavaScript, we can have total control over styling just like in a style sheet. This would allow developers to define styles and thereafter change them inside. The updated changes would easily reflect just as it happens with the stylesheet of a static file.

The Flash of unstyled text (FOUT) problem is another matter of crucial importance that pushed the incorporation of the concept. By putting the CSS in JavaScript, we can allow tweaking with the numerous style elements like typography, the grid and the colors just like a static file allows the browsers to render the styles on the page in the quickest time possible.

You have a wide array of things that you don’t have to access frequently like classes in relation to state. So what part of the CSS should be made accessible within JavaScript is important. Let us admit a few truths. A single page web app where all the elements have been generated by JavaScript are styled also with JavaScript. On the other hand, in a large-scale web app addressing a variety of requirements with the formation of different blocks and separating them is crucial. The aim is to reduce the dependencies of every single component.

While both HTML and CSS have a lot of dependencies for the JavaScript views on client-side, combining them within JavaScript can reduce the varied dependencies and consequent complexity in web development projects. The promise of reduced complexity seems to be the biggest advantage of CSSX as of now.


Rajiv Patil

Rajiv Patil is one of the founders of Nimblechapps, an iOS game development and Android watch app development company, where he overlooks delivery, product development and often lends a hand to the in house iPhone app development team. His personal interest include travel, food and motorcycling.

1 Comment
Inline Feedbacks
View all comments
2 years ago

JavaScript is used to control the behavior of different elements.
Really interesting blog!!