Sass CSS Can Improve Your Search Engine Rankings

How About Some Love?

Are you still using straight up old school CSS for your stylesheets? Stop. Right now. Do yourself a favor and take a day to learn about modular CSS, whether it be Sass or Less.

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

Nesting is without a doubt one of the easiest ways to build a better stylesheet. This bit of Sass code:

Outputs:

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

Variables are absolute life savers. One of the easiest way to see their power, is to make a color variable:

Outputs:

Mixins

Mixins are personally one of my favorite parts of Sass. Here’s a simple example:

Outputs:

Inheritance/Extends

Example:

Outputs:

You can see in Sass that .navigation and .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.

Resources

https://www.codeschool.com/courses/assembling-sass
http://thesassway.com/
http://alistapart.com/article/getting-started-with-sass

Comments

  1. Josh Hathcock says:

    There was a comment on Twitter recently, in which the person was unclear on how Sass can be beneficial to SEO. It’s well known that SE’s use page speed as one of multiple criterion when ranking websites. File size certainly affects page speed, and style sheets are not immune to this. If one is not mindful to how Sass is going to be compiled into CSS, Sass can potentially increase a style sheet’s file size more than straight CSS. Conversely, if used correctly, Sass can help reduce file size by combining commonly used pieces of code, resulting in leaner code, which helps improve page load times. Sass + minification is only one of multiple ways to help keep CSS files smaller, but it’s certainly a legitimate way.

Speak Your Mind