5 Snippets To Speed Up Your CSS Coding

Speeding up coding is not always by typing faster or saving frequently used snippets so that you can reuse them (even though this is a brilliant idea). It is also about reducing repetitiveness by creating objects that you can paste into your stylesheet for elements you use over and over again in the same way.

In this article I want to share with you ten CSS snippets that will save you from having to write the same code over and over again in the same project.

1. Simplifying The Navigation Code

This is based on a post over at CSS Wizardry that talks about The nav abstraction, Most projects I work on contains at least one horizontal navigation element and most of the time two if not three. If I could make an abstraction with the most common parts of the navigation element, I could save myself a ton of code if I just included that class.

.nav { list-style: none; margin: 0; padding: 0; }

	.nav ul { margin: 0; padding: 0; }

	.nav li { display: inline; }

	.nav a { display: inline-block; }

All that is now required is to append the nav class to any object that we want to make a horizontal list of items without the leading bullet.

2. Generalizing the Box Code

Each time you want to make a simple box with a background color for some objects within you will probably add both margin and padding to it. Why not abstract this into a .box class like so:

.box {
	padding: 1.5em;
	margin: 0 0 1.5em 0;
}
	.box > :last-child {
		margin-bottom:0;
	}

We also want to make sure here that the last child object inside the box doesn’t interfere with the padding of the main box by having its own bottom margin set. To fix this, we simple set it to zero, making sure it always looks consistent.

3. Using the Media Object Over and Over Again

Based on a post by Nicole Sullivan at her blog Stubbornella, the Media object is one of these types of objects that we as designers and developers like to use all over again in one form or the other. It is simple an image floated to the left and some text over on the right (that is not wrapping around the image).

The media object solves this neatly by abstracting this into a simple pattern:

/**
 * Media Object
 * Based on: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 * Markup:

 <div class="media">
   <a href="#" class="img">
     <img src="#" alt="Image!" />
   </a>
   <div class="body">
     Some text to go with this image.
   </div>
 </div>
 **/

.media {
	margin:10px;
}

	.media,
	.body {
		overflow:hidden;
		_overflow:visible;
		zoom:1;
	}

	.media .img {
		float:left;
		margin-right: 10px;
	}

		.media .img img{
			display:block;
		}

4. A Great CSS Reset Code

By being able to start your project with elements behaving as you would like them to is a great benefit. It also saves many lines of code where you otherwise would be resetting an object each and every time. As I have said before, I favor the Eric Meyer reset code which with a little tweaking for each project makes a great starting point for your design.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

5. Building In Adaptive Columns

While a system like the 960 grid system is perfect for you as a developer, your users may find it a bit odd and clunky to work with. The adaptive columns are easier to grasp and are easy to include in your project. All your users need to do is think about how many columns they want to fit within a space in terms of fractions.

/**
 * Adaptive Columns
 **/

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{position:relative;margin-right:4%;float:left;min-height:1px;height:auto!important}
.one_fourth{width:22%}
.three_fourth{width:74%}
.one_fifth{width:16.8%}
.two_fifth{width:37.6%}
.three_fifth{width:58.4%}
.four_fifth{width:79.2%}
.one_sixth{width:13.3333%}
.three_sixth{width:47.9998%}
.five_sixth{width:82.6665%}
.last{margin-right:0!important;clear:right}
.clearboth{clear:both;display:block;font-size:0;height:0;line-height:0;width:100%}
.one_half .one_half{margin-right:8.3333%;width:45.8333%}
.one_half .one_third{margin-right:8.3333%;width:27.7778%}
.one_half .two_third{margin-right:8.3333%;width:63.8889%}
.two_third .one_third{margin-right:6.1224%;width:29.2517%}
.two_third .two_third{margin-right:6.1224%;width:64.6258%}
.two_third .one_fourth{margin-right:6.1224%;width:20.4082%}
.one_half,.two_fourth{width:48%}
.one_third,.two_sixth{width:30.6666%}
.two_third,.four_sixth{width:65.3332%}

Conclusion

Saving these snippets in an application such as Snippets, TextExpander or right within Coda or your favorite editor is a good way to have them at hand for when you need them to save yourself a whole lot of trouble and bloat in your code.