Design patterns form the core of reusable code. Though CSS is not a programming languages, there are many code snippets that we use over and over again. The point of design patterns is to minimize the impact of such repeated tasks on the development of a page layout. Design patterns break themselves into various categories, each one with a specific task. In this post I'm going to summarize some of the most used CSS design patterns I've encountered so far.
The Reset Pattern
The Reset Pattern is mainly used at the very beginning of a CSS file to reset all the default browser styles. One of the most popular reset routines has been implemented by Eric Meyer. However, you can customize this pattern to fit your own needs, for example:
html, body, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-size: 100%;
}
In this case we're resetting only specific elements, not all. You can even use the @import rule to include a reset file at the very beginning of your style sheet:
@import 'reset.css';
The Font Size Pattern
The Font Size Pattern is used to reset the base font size of a page to get consistent font dimensioning. It has two forms:
-
body {font-size: 62.5%} /* 1em = 10px */ -
body {font-size: 76%} /* 1em = 12px */
The Text Replacement Pattern
The Text Replacement Pattern is used to replace the textual content of an element with a background image. There are several popular techniques to accomplish this task, but the easiest to use involves negative text indentation:
h1 {text-indent: -1000em;}
The Hide Elements Pattern
The Hide Elements Pattern is used to hide unnecessary page elements, but in a way that they can actually remain accessible to assistive technologies. It uses negative absolute positioning:
.hidden {
position: absolute;
top: -1000em;
}
The HasLayout Patterns
HasLayout Patterns are a series of bug fixes used to handle the 7 and 6 versions of Internet Explorer. You can find most of this patterns here.
The Float Containment Patterns
Float Containment Patterns concern the clearing and containment of floated elements. There are many different patterns of this kind and their number is rapidly growing, so the best thing you can do is searching for them.
If you know some other patterns, please let me know.