Best practices for common css statements

[lshwarts]

I’m wondering what the majority opinion is on how best to implement common css statements, such as rounded corners (just an example), which might be used on a multitude of different objects. Is it better to :

1. Apply the rounded corner statements to every element that uses them individually (potentially duplicating the code a dozen times or more in the stylesheet. This seems like it bloats the code unnecessarily if the same style is being used repeatedly)

_or_

2. Create a rounded corners class that is then applied to the element in the code? (thus having the code in the stylsheet only once)

_or_

3. Create a rounded corners statement in the css and apply multiple selectors to it (such as button, div.whatever… etc.)

I’d be very interested to hear people’s thoughts. Has Chris ever mentioned this in one of his screencasts? I’ve been watching them on my living room tv via apple tv (awesome!)…

[chrisburton]

Last option is the most semantic rather than applying a rounded-border class.

[sickdesigner]

I’d start by identifying which elements will have rounded corners throughout the entire site. If all button elements have rounded corners, then it’s natural to declare something like button{ border-radius: npx }. For any stray elements getting rounded corners, I’d select them individually, granted no common specific link them.

For added sanity, use a border-radius SASS mixin.

[matt_sanford]

If you aren’t using SASS, then the best way to do it is to make a class for rounded borders then just apply that to whatever element you want. The less code you have to write means page load times are improved and it is more semantic and clean.

[lshwarts]

Thanks for all of the help :) I’ve found that when working with WordPress (which I do exclusively), especially themes and plugins that use their own classes / id’s, etc., it’s really a matter of “which method -can- I use here without having to rewrite the plugin or theme code.”

[Author]

Posts