Why we stopped using CSS in JS?

Over the years, the practice of using CSS-in-JS has sparked a debate among web developers. While initially popular for its convenience and performance benefits, some have raised concerns over the complexity it introduces to codebases. Many developers have chosen to move away from CSS-in-JS due to challenges in debugging, maintaining, and scaling applications.

In addition, CSS-in-JS can lead to a separation of concerns issue, blurring the lines between styling and logic within a project. This can make it difficult for teams to collaborate effectively, especially when working on larger codebases. As a result, some developers have opted to return to traditional CSS, seeking a simpler and more modular approach to styling web applications.

The Rise of CSS in JS

Over the past few years, a new trend has emerged in the web development community – the use of CSS in JS. This approach allows developers to write CSS code directly within their JavaScript files, simplifying styling and improving code organization. Initially, many developers embraced this new way of handling styles, but as time went on, some began to question its usefulness and effectiveness. In this article, we will explore the reasons why we stopped using CSS in JS and opted for alternative methods.

Performance Concerns

One of the primary concerns with CSS in JS is its impact on performance. Integrating CSS and JavaScript tightly can result in larger file sizes, which can negatively affect page load times. Bundling both CSS and JavaScript together can lead to larger initial payloads, contributing to longer load times for users. Additionally, the dynamic nature of CSS in JS solutions can introduce complexities that may result in slower rendering and overall suboptimal performance.

Another performance-related issue is cacheability. Separate CSS files can be cached by the browser, allowing subsequent page loads to access the cached stylesheets, boosting performance. In contrast, the CSS in JS approach often generates inline styles that cannot be cached, making each page load retrieve the styles anew, increasing load times.

Solution: Separating CSS and JavaScript

To address these performance concerns, many developers have opted to separate CSS and JavaScript files. By keeping the two separate, we can take advantage of caching mechanisms and ensure faster load times. This separation also promotes a clean separation of concerns between the presentation (CSS) and behavior (JavaScript) layers, enhancing code maintainability.

Reduced Readability and Tooling Support

While the CSS in JS approach can provide benefits in terms of encapsulation and modularity, it often comes at the cost of reduced readability. Trying to read and understand styles embedded within JavaScript code can be challenging, especially for larger codebases. This can lead to decreased developer productivity and increased complexity when maintaining or debugging the code.

Another downside of CSS in JS is the lack of robust tooling support compared to traditional CSS authoring workflows. Popular tools like linters, preprocessors, and style guide generators are typically designed to work with CSS files. Migrating styles to JavaScript can mean losing out on the productivity and convenience these tools provide.

Solution: CSS Modules and CSS-in-JS Libraries

To overcome these challenges, alternative solutions have gained popularity. One such solution is the use of CSS Modules, which allow developers to write CSS code in separate files and then import them into their JavaScript modules. This helps maintain readability and provides static typing and tooling support.

Additionally, CSS-in-JS libraries have emerged that offer the best of both worlds. These libraries allow developers to write CSS-like syntax within JavaScript code, providing the benefits of encapsulation and modularity while still leveraging the powerful tooling ecosystem surrounding CSS. This enables developers to maintain code readability without sacrificing productivity.

Compatibility and Accessibility

Another concern with CSS in JS is compatibility with older browsers and accessibility requirements. Some JavaScript-injected styles may not work as expected in older browser versions, leading to rendering issues or broken layouts. Additionally, dynamically generating styles can hinder accessibility when proper semantic HTML elements and ARIA roles are not used.

Solution: Progressive Enhancement and ARIA

To mitigate compatibility challenges and ensure accessibility, a progressive enhancement approach can be adopted. By using the modern CSS features within traditional CSS files and then enhancing the experience with JavaScript, we can ensure compatibility with older browsers. It is also essential to follow best practices for web accessibility, utilizing ARIA attributes and semantic HTML elements alongside dynamically generated styles.

While CSS in JS initially garnered attention due to its potential benefits, it is not a one-size-fits-all solution. Performance concerns, reduced readability, and compatibility issues have led many developers to seek alternative methods for managing styles. Separating CSS and JavaScript, using CSS Modules, or employing CSS-in-JS libraries can provide a more optimal development experience while still ensuring maintainable code and good performance. As with any technology decision, it is crucial to consider the specific needs of the project and make an informed choice.

The shift away from using CSS in JS can be attributed to various factors such as performance concerns, maintainability issues, and the desire for better separation of concerns. By separating styles from logic and keeping them in separate files, developers can achieve cleaner, more efficient code that is easier to manage and maintain in the long run.