Avoid Global Styles

At this moment I am working on a SAAS project which is quite huge and advance. Weekly there are certain functionality and design changes. I maintain all of the functionality and very few of the designs. We have an excellent designer who watches over design-related things. Our team had taken over this project from another team.

Last week we were working on policy content. Admin adds policy from the editor (like TinyMCE, CKEditor) and the changes reflect on the user side. But there was an issue with bullet points. There was a bullet point on the editor but on the user side, it wasn’t working. We looked over the code and there was a global style on an unordered list with list-style: none. We found the issue, we removed that code and it was working.

The next day our project manager shows us the bullet on every other list - on the sidebar, view modal everywhere. Again we looked over the code and it was because we removed that style: none from the global style unordered list.

There were a bunch of global styles and it was very hard to segregate the concerns because there were lots of dependencies. We couldn’t remove the global styles so we came up with an idea to write a separate style which to overwrite the global styles. We have to do it on every new class/functionality that conflicts with the global style.

We were planning of rewriting all of the CSS but the cost of rewriting is huge. So, overwriting the global CSS seems to be the best thing to do at this moment.

Final Thoughts

If we were working from scratch we would definitely avoid the global style. If you are writing code from scratch please avoid global styles. Global styles put stress on you as well as other developers.

The global styles should be avoided for the same reasons global variables should be avoided. It seems global styles are more dangerous than global variables. You can’t change the HTML tag upon which the global style is written.