What if we wrote the CSS rules in separate files, provided to the browsers as a form of "style sheets"?
Instead of transpiling SASS, writing CSS in our Javascript or fill our HTML or templates with class-names that describes the style we want, here is a novel idea: What if we provided pure simple text files to the browser, explaining how we would like our web applications and documents to be styled?
There seems to be many benefits of providing CSS in text files like these:
1. Improved performance
Faster loading times
Pure CSS files are lightweight and it turns out, the browsers can work out their contents and apply the style much faster than competing methods. This again, makes sure the loading times are much faster.
Also, the CSS doesn't even have to load, before the page is started rendering. The browser can apply styles whenever new style sheets are ready loaded.
Cache efficiency
Browsers can cache pure text files, which means that once a user has visited your web page, his browser doesn't have to download the CSS file again until next time you have changed the sites appearance.
2. Improved maintainance
Simplified debugging
When the CSS are located in separate files, it is easier to locate and fix styling issues. Especially when we write the style sheets ourselves, instead of relying on transpilation. When we isolate CSS from JS and HTML, we reduce complexity and make debugging a more straightforward process.
Version control friendly
Writing the styles in pure text files, we can track, reverse and collaborate our style sheets with ease in git.
3. Enhanced flexibility and scalability
Reusability
CSS in text files can be reused across multiple pages. CSS written for a specific style class, can be reused for multiple components. This saves time, and ensures consistency in design.
Scalability
Having CSS in separate text files makes it easier to organize our styles. We can split the styles into different "sheets" (text files) and manage them independently.
There are many ways we could divide the CSS files. We could use one for each component we make, one for each screen in our application, or heck, for smaller projects we could even make do with one single CSS file for the entire web site.
In conclusion
Instead of the tried and tested approaches like "utility first" style classes like Tailwind, "css-in-js" frameworks, transpiled super CSS like SASS or Less, we could try something novel: Write plain CSS in plain text files. I think this would be an important and beneficial practice for modern web development. By understanding and implementing these principles, developers can create more efficient, maintainable and flexible web pages and web applications.
Top comments (0)