splorp / tersus

An achingly simple WordPress theme without all the usual cruft.
GNU General Public License v3.0
99 stars 6 forks source link

Stylesheet Selector Optimization #25

Closed Avengio closed 12 years ago

Avengio commented 12 years ago

In the flavoured stylesheets I've noticed that html elements are sometimes prepended to the ID or class that is being targeted:

section#content article

This rule specifically ties the #content ID to a section element unnecessarily and creates a dependency when customizing the markup of a project. We could simplify the rule to:

#content article

This way #content blocks can be moved into a div, section, or article depending on how the page is authored and the resulting DOM changes do not break style. It also optimizes stylesheet performance and reduces specificity.

Thoughts?

splorp commented 12 years ago

This makes perfect sense to me.

Plus, I’m all for tidying things up.

I would like to get Chris’ opinion on this, as most of the basis stylee and selectors are based on his Super Ginormous template.

splorp commented 12 years ago

I ran the current stylesheets through CSS Lint and it seems like we can easily remove element names from a whole bunch of the “overqualified” selectors.

CSS Lint also caught a couple of silly parsing errors in the advanced layout stylesheet.

Avengio commented 12 years ago

rAWk. Thank you Grant for looking further into it.

splorp commented 12 years ago

Okey dokey.

I just committed changes to both of the advanced stylesheets, removing the “overqualified” selectors that were picked up by CSS Lint. Everything seem to be rendering the same as before — at least in Safari and Firefox. No guarantees with IE.

https://github.com/splorp/tersus/commit/9a95716d517895307e6754941e7950b53a957819