CSS Selector Code Smell

3-2-1: Grab your QC environment and get ready for CSS today because it just does not makes sense to write a CSS Selector like these:

#footer-widget-area #fourth {
	margin-right: 0;
}

Example 1: A bogus selector.

img#wpstats {
	display:block;
	margin: 0 auto 10px;
}

Example 2: Can make sense

The first example is pretty simple and the second is in the same sense. With only a slight exception that it can make sense if the markup changes relative to the style-sheet definition and that would be bad semantics. Therefore that selector is not totally bogus but still a smell.

These are two quick picked examples out of the upcomming WordPress TwentyTen theme. It is not released right now, so a good field to test code smells on. Some Regular Expressions for sniffing around:

#[A-Za-z][A-Za-z0-9_:.-]*\s+#[A-Za-z][A-Za-z0-9_:.-]*
^\s*[A-Za-z]+#[A-Za-z][A-Za-z0-9_:.-]*

I bet there are more scenarios worth to look for but those were two I just stumbeled over while taking care on Ticket #9015. Just comment and I’ll add them to the list.

This entry was posted in Hacking The Core, Hakre's Tips and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s