November 18, 2005
CSS Tip: Create a default with special cases
When you have one element with multiple states, you can use an ID to define the default appearance and classes for the individual cases. This makes your CSS easier to read and reduces code duplication (stay DRY).
In Basecamp, a bar appears below the navigation to display green confirmation messages and red failure messages. The only difference between the two messages is the color and icon.
The basic appearance of the bar is the same in both cases, and there is only one bar, so we can start with an ID. “Flash” is Rails parlance for this sort of message, so we called it #Flash.
<div id="Flash">This is the Flash bar.</div>
#Flash {
text-align: left;
border: 1px solid #ccc;
font-size: 14px;
margin: 0 7px 12px 0;
padding: 5px 5px 5px 30px;
}
