Momentum CSS Updated: Rewritten and Re-released
Back in 2008, I released a CSS helper file that had semantic names, helper classes, and common patterns that I identified in sites that I’ve developed. The initial release of Momentum was assembled for my own use, but I also hoped that others might find it useful or at least see the value in using standard naming conventions when working with a team of people.
One thing I was trying illustrate with the 2008 release was that when you work with a team of people, especially in an agency-type setting, it is important to adhere to a certain set of naming conventions.
The result of not adhering to naming conventions can lead to “spaghetti maintenance.” What I mean by this is if you manage multiple sites and on one site the header is called
#branding, on another it is called
#header, and on another it is called #masthead, you introduce additional maintenance overhead if things are harder to find and also the potential for code bloat if the unused selectors are being left in the stylesheet.
With the adoption of HTML5, this is less of a concern since there are now semantic element names that are part of the emerging standard. I still feel that this is a valid point, even though I left my naming conventions out of this release since I feel it should be up to the development team .
Agnostic and Open to Interpretation
Personally, I use the Sass files and feel like Momentum is the most useful that way, but you don’t have to use it. It works the same way if you compile the CSS file from SCSS or if you edit the CSS file directly. Sonspring just published a nice overview of Sass that can help you get started if you’ve never used it before.
Using Momentum is simple. All that needs to happen is just link to the static CSS file in the head of your HTML document. During development I suggest leaving the file uncompressed and then minifying and at the time of deployment or on the server.
If you are using the Sass files, make sure you are running
sass --watch from the directory your project directory or set :load_paths in your Sass configuration so the imports work properly. In other words, if your files are in
C:\Users\[user name]\Documents\project-name, make sure you
cd into that directory as opposed to starting sass from your user directory.