Blog

5 Snippets To Speed Up Your CSS Coding

December 28, 2011

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.

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:

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.

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.

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.