Modern Web Development Best Practices Powered by Grunt.js Part 3: CSS

In parts one and two of this series, we created a basic configuration that will serve you well in most cases. Nothing left to do here, right?

Wait, Aren’t You Forgetting Something?

If you haven’t noticed by now, I’ve completely side-stepped the Cascading Style Sheets (CSS) part of web development, but not without a good reason. In the last five years or so there have been many advancements in CSS, both in the browsers and in the tools for authoring it. Most web developers I’ve met have either never really used CSS (and depend on others to style everything) or they have battle scars from the IE6 days and mentioning CSS development makes their skin crawl (for a long time I was in the latter category). The good news is that even while the number of things you can do with CSS has increased, implementing them has never been easier, thanks to CSS preprocessors like Learner CSS (LESS), Syntactically Awesome Style Sheets (SASS), and the frameworks written in those languages. I highly recommend the use of Compass. It will meet all of your requirements and more, and it makes CSS development easy (and fun). If you are not a CSS person then this is the framework you want to invest your time learning.

Tutorial:

Note: Since we will be leveraging Compass in our examples, you need to install it and its dependencies. Installation is pretty straightforward, but you will need to have Ruby installed in your system. If you are on Mac OSX then you already have it installed, and if you are on Windows you can read about how to install it here (search for the “Command Line Interface” subsection). After Ruby is installed and configured, you can install Compass by running:

gem install compass

Then we can update our project:

git checkout compass npm install

In our sample project I used the default Compass installation (by running “compass create”), so now we have a “sass” folder and a “config.rb” file. The “sass” folder is where the CSS source code files will be stored and the “config.rb” is where we can control all the configuration and settings that Compass supports. I also updated the “index.html” with these CSS includes:

Each of these includes reference a CSS file inside of a “stylesheets” folder. As you can probably guess, we will implement a workflow similar to what we have for the JavaScript code. The CSS source code will be the Sassy CSS (SCSS) files inside the “sass” folder, which should look something like this:

Each of these files will be compiled to CSS and placed in the “stylesheets” folder. Any time you make a change to the source, you need to run “compass compile” to generate these. But it can be confusing and time consuming to remember all these different commands, especially when you have to run those hundreds of times a day. So let’s leverage Grunt.js once more to help out. We will use the “grunt-contrib-compass” plugin, which will allow us to configure a task that will run our compass commands for us. In the “Gruntfile.js” file of our project, you will see a new object inside the “grunt.initConfig” section:

compass: { clean: { options: { clean: true } }, dev: { options: { environment: 'development' } }, prod: { options: { environment: 'production', outputStyle: 'compressed' } } }

This block defines three subtasks for the “compass” task the plugin provides. By default, it will look for the “config.rb” file in the same place the “Gruntfile.js” is located. If it’s in a different place, you can specify it inside of an “options” object inside of the “compass” object. The three subtasks we define are “clean,” “dev,” and “prod.” Inside of each of their “options,” we can override most of the configuration settings defined in “config.rb.” Using this plugin gives us greater flexibility by allowing us to declaratively set options for different scenarios (development vs. production), without needing to pass in arguments to the “compass” command line tool and/or using another tool to do so. The “dev” and “prod” tasks are pretty self-explanatory. The “clean” task is used for clearing the SASS cache (“.sass-cache” folder) and removing the generated files that existed prior to compiling the new ones. You could use these tasks by running “grunt compass:clean” or “grunt compass:prod,” but again, we’ll use the chaining capabilities of Grunt.js by adding those tasks to our two custom ones:

grunt.registerTask('default', [ 'jshint', 'compass:clean', 'compass:dev', 'concat:dev' ]);

grunt.registerTask('build-prod', [ 'jshint', 'compass:clean', 'compass:prod', 'uglify:prod' ]);

Now when you run “grunt,” the Compass “clean” and “dev” tasks will be run prior to the JS “concat.” And the “build-prod” task will now compile and compress the CSS, much like the “uglify” task does for JS files.

This is all fine and dandy, but it means that during development you’ll need to run “grunt” every time you make a change to either a SASS or JS file. There must be another way!

In the next part of this series, we’ll see how to implement a solution to automate the workflow we implemented here and more. In the meantime, follow @CrederaMSFT on Twitter and Credera on LinkedIn for more great best practices.

To view the rest of the Modern Web Development Best Practices Powered by Grunt.js series click here.

• CSS
• Grunt.js
• Modern Web Development Best Practices
• Grunt.js Tutorial