Modular CSS has established itself as a crucial part of modern web projects. You may have heard of methods like BEM, SMACSS, OOCSS, and Atomic CSS. At Mobomo, we put the best of these approaches into practice, and we’ve seen impressive benefits. The larger the app or website, the more important role modular CSS plays. How can modular CSS benefit your enterprise? Let’s take a look.
Structuring your CSS in a modular fashion has three main benefits:
- Performance
- Maintenance
- Cost/Development Speed
Performance has an enormous impact on revenue and growth. This is magnified substantially on mobile devices. If you decrease your page load time by even milliseconds, you will see improvements across the board. CSS is one of the pieces of that puzzle, specifically the weight or overall file size.
Over the course of time a project has multiple redesigns, features, and developers working on it. With enterprise projects, the number of developers contributing can be extremely large. In one recent project we completely refactored the CSS architecture to be modular, and saw a 26% decrease in overall file size. This was a refactor, but when you start from scratch with a modular CSS setup, the file size will be much smaller, further contributing to performance gains.
One of the reasons you see performance gains with modular CSS is that maintenance is vastly improved. When your CSS is encapsulated, and organized in separate files, it’s much more straightforward for a developer who is new to a project to feel confident in first locating the files they should be working on, and further ensuring the additions or edits they make won’t adversely impact an element somewhere else in the project that they didn’t intend to change. Again, for enterprise apps, you can extend the application quickly to see how beneficial modular CSS is to decreasing time spent on maintenance.
When you put it all together, modular CSS increases development speed, which goes hand in hand with lowered cost. When you write modular CSS, you’re allowing developers to avoid reinventing the wheel with each new feature that’s added to a project, simultaneously making the components reused more consistent. It helps you locate old, unused CSS rules. Modular CSS helps brand consistency, by ensuring your brand colors are managed from a single location, and you don’t end up with slight variations of your company’s brand colors that look off for some reason (secret: not using modular CSS is the reason!).
Speaking in terms of enterprise projects the benefits are huge. If all developers contributing to a project have direction from the start, an organized structure and examples of how to keep things organized during the development process you can scale your app or website while retaining the benefits in performance, maintenance, and cost. If you have a project that could benefit from Mobomo’s experience, get in touch!
