In this post, I am going to share a simple solution I have used on several projects which helped me maintain my CSS code. I call it Singletons CSS*.
*Disclaimer for what you are about to read: Singletons CSS may not be for the purist, and may rub you the wrong way. I have nothing against purists especially in the CSS realm, but I have learned to bend rules simply because of deadlines and the need to deliver for a myriad of browsers.
Singletons CSS is a fairly easy approach to creating one-off style rules that can be re-usable overrides for other larger/deeper classes. I have found the singletons approach has allowed me to speed through delivery without getting bogged down in creating and maintaining a massive quagmire-like CSS library.
Before I explain how I use my singletons.css, let me link to what one might look like: singletons.css
When you have a Singletons CSS linked, you can do something like this...
CSS:
/*Found in main.css*/
.my-cool-class {
font-weight:normal;
color:#000000;
}
HTML:
<div class="my-cool-class">
I am plain Jane and living in my cool class… and I like my padding.
</div>
<div class="my-cool-class bold bg-brand-1 brdr-red pad-b-no">
I am living in a cool class, but I want to be bold, have some
background color and preferably no bottom padding.
Oh, and can I have a red border too?
</div>
I could give more examples, but really, I think it is quite obvious.
Things to think about if you create a Singletons CSS
Using Singletons CSS, you probably need some guidelines. So here goes:
- Make sure it is the last css file linked or embedded on your HTML. Just like you would put your Resets first, Singletons would go last. Consider them bookends to the rest of your core CSS like main.css, fonts.css, grid.css, & <library_goes_here>.css, (example: Twitter’s bootstrap.css). Why would the order matter? With CSS being Cascading and Singletons essentially acting as an override, placing the singletons.css file last, helps to ensure that the singleton classes maintain their override status.
- If you use !important in your other main.css, you run the risk of outweighing a singleton style class.
- Without getting into a political debate about the use of !important, I’ll keep this guideline simple: If you need to use !important at all, I would suggest only doing it in the singletons style sheet and nowhere else. Due to CSS specificity and selector weight, you may be forced to use !important if you want to add strength or weight to a singleton class.
- If you find yourself adding more than one attribute to a singletons style class, it is probably not a singleton anymore, and possibly needs to go into your main.css instead. Obviously this is a guideline that I have broken myself (see: .mgn-r-l, etc).
- Singleton class naming is somewhat arbitrary. What I wrote above contains abbreviations that I chose and remember because I understand my own class names, but you might not like them, so maybe make your own?
- Margins and Padding might have the same PX or EM values defined for the grid gutter by your grid.css. In other words, if the grid gutter in your grid.css is 15px, you might want to make the margin-right, margin-left singletons have the same 15px.
- Don’t forget that you may also need some Responsive overrides to your singletons. Maybe a few containing max-widths.
- If you are using several singleton classes on one HTML element, you might want to replace it with a larger more defined class in your main.css.
Final words about Singletons CSS
I know there are probably people thinking, “This is a waste. Why not use inline styling???” My response to that is: I very rarely ever use inline styling… ever. Or,“Why not use variables and mixins with a CSS preprocessor like SASS?”. My response would be: the main intention for Singletons is to minimize and speedily deliver code while avoiding the creation of a massive CSS library, so, in nature, Singletons can add to your project’s CSS landscape in a maintainable way without any conflict to a CSS preprocessor, if you choose to use one. I have found success using this file in several types of web applications and frameworks with little to no interference. The bottom line for me is that incorporating a singletons.css file into the strata has saved me a lot of development time without adding more clutter to my project's CSS ecosphere.
