Performance: CSS Selectors

Einige Tips für performante CSS Selektoren, auch wenn der Unterschied kaum wahrnehmbar ist, schadet es ja nicht darauf zu achten wenn es nicht weh tut 😉

  • Avoid Universal Rules
  • Don’t qualify ID Rules with tag names or classes
  • Don’t qualify Class Rules with tag names
  • Use the most specific category possible
  • Avoid the descendant selector
  • Tag Category rules should never contain a child selector
  • Question all usages of the child selector
  • Rely on inheritance
  • Use scoped stylesheets

Ist wie gesagt eher für neue Webseiten, da kann man das ja auch gleich “richtig” machen, denn:

Selector efficiency and inefficiency probably isn’t going to impact most sites all that much.

We’re not talking a difference of several seconds from most to least efficient. We’re talking about milliseconds in the worst case. For the majority of sites you aren’t going to notice a difference and the effort likely outweighs the savings.