Kilian Valkhof

Random CSS Thought: Multiple Attributes

CSS is a great markup language, but it is also (relatively) young. There are a lot of little things that could be improved, and I have been collecting them on this blog. This time, I am proposing an attribute repeat-possibility.

Multiple selectors #

CSS has an excellent way to apply the same style to different selectors:

#foo,
.bar {background : #333;}

This will apply the same style to elements with the ID of foo and elements with the class bar. This saves a lot of double code and results in smaller filesizes and increased readability. So why didn’t they do it for attributes as well?

Multiple attributes #

What I am talking about is using a comma to separate attributes that have the same value, much like that which is possible with selectors.

For example, with headers you might want to override the font-size and line-height to have the same value for easier styling:

h2 {
	font-size, line-height : 18px;
}

This helps tremendously in the readability and overview of your CSS file, much like the ability to have multiple selectors does. Most of all it keeps the CSS file easier to maintain. Truth, it doesn’t shave much kB off of the file size, but all bits count, right? (Geeky pun!).

Of course, that would not be the only use. Imagine you have a block element in which you need to style the left, right and bottom border, but not the top one. the code would be this:

#foo {
	border-left : 2px solid #fff;
	border-right : 2px solid #fff;
	border-bottom : 2px solid #fff;
}

Thats not really handy is it? Imagine the client comes back to you and says “Nah, I’d really like those borders to be red!”. Then you will have to change the #fff to #f00 for each border. No, it’s not much work, but you still wouldn’t like it.

Some designers choose to solve it this way:

#foo {
	border : 2px solid #fff;
	border-top : 0;
}

I personally use this too, it saves code and makes it easier to maintain. But it does irk me: You tell the element to have a top border and then make it a zero height. It works, but it does feel like the opposite way of solving the problem.

Using attribute repeat, you can solve the above nuisances:

#foo {
	border-left, border-right, border-bottom : 2px solid #fff;
}

You’re only defining what you need to, you can change all three the border by changing one value, and its a lot more readable.

Other examples #

There are of course a lot more examples, you can apply the above to margins and paddings too, or how about defining the padding-bottom and line-height in one go to compose to a vertical rhythm?

Discussion #

Would this make your life as a CSS developer easier? Please share your thoughts in the comments.

Other CSS thoughts
If you enjoyed this article, please consider reading any of my previous CSS thought articles:

• Advanced background repeat options
• Solving equal height columns
• Background-z-index
• Math in CSS