• Read more about Ways Modular CSS Benefits Your Enterprise

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 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!

• Read more about Break The Bootstrap Mold And Optimize Performance

Over the past few weeks, I’ve heard a great deal of pushback around Bootstrap. The first argument is focused around general feedback that Bootstrap isn’t suitable for production, and the second is that using frameworks like Bootstrap is limited from a design perspective. I’d like to offer a few insights into the practice of implementing Bootstrap in an optimized fashion.

At a recent An Event Apart in Nashville, there was a panel discussion with Jeffrey Zeldman, Eric Meyer, Rachel Andrew, and Jen Simmons. During this discussion, Bootstrap came up a few times:

“If people want to use Bootstrap, or anything, whatever it is, as long as you don’t release it to the public that way.” - Jeffrey Zeldman

"There were back to back presenters today who talked about how we really feel like people should stop using Bootstrap. And you were saying Jeffrey, that it’s great for prototypes, and I’ve heard a lot of people say that, Karen McGrane said that on the show not long ago, “Oh, Bootstrap’s great for prototypes”. - Jen Simmons

Before I demonstrate a few implementation methods, I first think it’s prudent for us to remember that, as in many cases in web development, it’s not the tool’s fault, but the implementation. A shining example of this is when smartphones first appeared, we had developers who had been building desktop sites for decades, who for the first time were being presented with the mobile form factor. Using methods that worked on powerful desktop machines with broadband had to be reassessed, and for a while, the idea that the web is slow on mobile was very popular. This was not the fault of the web, the mobile web, smartphones, or anything in between. This was (and still is to some degree), the fault of developers sending desktop content to mobile devices, among other implementation challenges.

In the case of Bootstrap, the biggest culprit of negative performance impact comes from site authors who include the entirety of Bootstrap’s CSS or JS files. With both, we must always include only the modules used in our app or site.

When implementing Bootstrap’s CSS, this is accomplished by making a copy of the Bootstrap manifest file that imports each individual Bootstrap module. This is placed with your app’s CSS modules. It is typically imported before everything else:

Start by commenting out every module in this master Bootstrap manifest. As you work on your site, only uncomment the modules you’re using:

This allows for a completely customized Bootstrap CSS file, without having to depend on a generator or tool to build a custom version of Bootstrap for you, and ensures that you have the most optimized version of Bootstrap CSS possible running in your app, because you’re only enabling modules as needed.

The same method can be applied with Bootstrap’s JS. In Rails, it’s very easy to include individual Bootstrap JS modules in your app’s application.js file:

Your implementation may differ, but the idea stays the same: only include CSS & JS modules that are being used.

With an optimized implementation of Bootstrap, you can be confident that your performance won’t suffer as a result of using the framework.

The other popular sentiment is that Bootstrap limits our design, a sentiment echoed at the same An Event Apart conference:

“I feel like if you use it as a prototype then you’ve just, right from the first brushstroke, set yourself up to stay within a very small box. Now, it used to be a very small box inside a of a just slightly larger box, but now it’s a very small box inside of a box that’s about to get really huge, and I want to be in the rest of the box.” - Jen Simmons

Using the same CSS architecture described above, we can easily add variables in our Bootstrap manifest that override the Bootstrap defaults, effectively giving us the flexibility to design & build anything we want:

These are only a few examples, but they will have a big impact on the site layout. You can customize any variable provided by Bootstrap. The options in Bootstrap’s variables file are virtually limitless.

While Bootstrap allows designers & developers to customize design & layout to their heart’s content, it’s also worth noting that design patterns exist for a reason. Users have certain expectations, and in many cases, breaking those expectations can cause confusion. This is best demonstrated with the Ionic hybrid app framework. Ionic offers a set of components that adapt to iOS, Android and Windows platforms. With Bootstrap’s components, you get a base set of components that users are familiar with, but also the flexibility to customize them.

It may be true that the defaults for Bootstrap make it too easy for developers to implement a bloated or cookie-cutter version of the framework. But, with the methods described in this post, you can easily break outside that box, and ensure your work is delivered in an optimized fashion to your users.

• Read more about CSS Architecture: A Recommended Strategy To Put Into Practice

Tired of being terrified that one CSS change will cause a ripple effect of bugs across your site? How about trying to make a simple change only to learn that the previous developer nested the styles five layers deep and slapped an !important on it? Learn how you can help bring sane and scalable CSS architecture to your projects and organization.

[pdfviewer width="100%" height="849px" beta="true/false"]https://mobomo.s3.amazonaws.com/uploads/2016/05/CSS-The-Specificity-Wars-1.pdf[/pdfviewer]