It’s important to keep in mind that we separate style out of the structure for several reasons: to avoid duplication, to make it easier to maintain code, and to have the ability to reuse content with different styles for different purposes. If done correctly, we have smaller file sizes, which leads to faster page loads times, which results in happier users and more favorable search engine rankings. Modular CSS takes this idea and injects it with steroids. Not only does it help keep the website file structure stay as organized and clean as possible, it’s also a super fun to code in.
As mentioned before there are a couple of different languages to accomplish this, however will this article will focus on Sass. While I can’t go very in depth, here are a few general pointers to help you get more bang for your buck.
Nesting is without a doubt one of the easiest ways to build a better stylesheet. This bit of Sass code:
Pretty cool huh? Though this bit of code doesn’t do very much, tied together with the following this can save us a ton of typing.
Variables are absolute life savers. One of the easiest way to see their power, is to make a color variable:
Mixins are personally one of my favorite parts of Sass. Here’s a simple example:
You can see in Sass that
.footer are separate, but after we process the code, our CSS is nice and clean because
.footer is inheriting the color property. This saves us file size as well as time, because we only have to declare the
color element once instead of twice.
This is just the tip of the iceberg of the power of Sass. I may write more articles that go more in depth that are specific to Sass if you guys want. Just let me know in the comments. In the meantime here are a few links to learn more about the topic. Stay Sassy Web Diego.