Organize Your Style Sheets/Preprocessors

Contact Us or call 1-877-932-8228
Organize Your Style Sheets/Preprocessors

Organize Your Style Sheets/Preprocessors

Some people recommend using different style sheets for different types of content:

  • General styles. These are usually simple type selectors, perhaps with some child, descendant, or attribute selectors included.
  • Special formatting styles. These are generally class and id selectors for styles you're likely to reuse often (e.g., "callout" or "important").
  • Layout styles. These are also generally class and id selectors for laying out your pages.
  • Specific styles. These are styles specific to a section or individual page on your website.

One way to accomplish this organization is to organize the various functional areas (general styles, special formatting, styles, etc.) into sections of one main stylesheet. A better way is to indeed use separate stylesheets - but, to avoid (as we mentioned above) having multiple calls to several stylesheets (and thus slowing down page speed), a better option is to use a CSS preprocessor like Sass. In fact, using a preprocessor like Sass or Less, another popular option, is a great strategy for speeding up CSS development time, organizing CSS for a complex site, and working on CSS as part of a team.

CSS preprocessors/precompilers have grown in popularity in recent years, for good reason. Working from a sort of CSS metalanguage, preprocessors offer a more convenient syntax; the ability to define variables, mixins (reuseable libraries of code), and nesting (all of which we'll look at below); and generally simplify the chore of writing lots and lots of CSS. All generate syntactically valid CSS. We'll look here at Sass (Syntactically Awesome Stylesheets); Less is another popular alternative.

Using Sass means writing Sass code in a .scss file and then compiling that code (using the Ruby-based compiler) to generate syntactically valid, perfectly ordinary CSS code in a .css file. Mac users likely have Ruby already installed (it comes with OSX); Windows users can download the RubyInstaller to install Ruby. Once Ruby is installed, you can download and install Sass (for free) by typing gem install sass (sudo gem install sass and type admin password, if prompted, on a Mac) from a command prompt. Let's look at a simple example:

Open the three files in ClassFiles/CssBestPractices/Demos/sass/. The HTML file is pretty simple - a div containing an h2 title and some paragraph text - and is styled via an external style sheet, sassstyle.css:, which has the following code:

#example { border: 1px solid #d98c8c; } #example h2 { color: #dbc7bd; }

This CSS file was generated by compiling the Sass style sheet sassstyle.scss:

$border-color: hsl(0, 50%, 70%); $h2-color: hsl(20, 30%, 80%); #example { border:1px solid $border-color; h2 { color:$h2-color; } }

You can write Sass in a couple of different ways. The example here shows SCSS ("Sassy CSS"); it looks very much like CSS - in fact, any valid CSS is valid SCSS. The other, and older, syntax - often referred to as "indented syntax" or just "Sass" - uses indentation instead of braces to indicate nesting and uses newlines instead of semicolons to indicate the end of properties. Which you use is up to you; we'll use the newer syntax here.

At the start of sassstyle.scss, we define two variables, $border-color and $h2-color. While not a big deal in this example, you can see the value CSS variables brings to code organization, making it easier to change a set color, width, or other value throughout thousands of lines of code by changing the value of one variable.

The Sass file also shows the simplicity of nesting: the styles for the <h2> are defined within the open/close braces that define the styles for #example - the generated output lists the styles correctly, with #example h2.

There's lots more Sass can do: functions, interpolation (using #{$i} to display the actual value of Sass variable $i), mixins (allowing re-use of styles, optionally with arguments), and other features of the language offer a cleaner, quicker way to write and maintain complex CSS code. We can even write a for loop:

@for $i from 1 through $number-of-items + 1 { ul li:nth-child(#{$i}) { background-color: darken($key-color, $i * 5); } }

This code would write multiple statements using the :nth-child selector to set the background color of a list item darker and darker, making use of Sass's darken function (which darkens a color, its first parameter, by the percentage given in its second parameter.)

While delving too deep into using Sass or other preprocessors is beyond the scope of this course, we do encourage you to check it out - you can put to use all of the CSS you've learned so far (since valid CSS code is valid Sass code), and you can leverage the power of code organization, variables, and other Sass features to write cleaner, faster, and easier to maintain CSS. We'll ask you to try out Sass with the next exercise: