skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Worrying About Making CSS Faster

October 27th, 2014 by mdmcginnis

In recent years, I’ve become interested in improving website performance. Chrome Developer Tools (the Network and Audits tabs) make it easier to see bottlenecks and how to fix them.

One of my goals was to use more efficient CSS.  I could have been using * and + in my CSS, but I knew the more calculations and animations the browser has to make, the slower the page will run. Web developer Ben Frain singles out “expensive” features such as box-shadows, border-radius, transparency, transforms and CSS filters as particularly troublesome.

But Frain’s experiments also show that the number of CSS selectors – the size of the CSS file – affects page performance more than the type of selector. His conclusion: “It is absolute folly to worry about the type of selector used.”

So I’m ready to stop worrying. Enter the owl selector, as named by British designer Heydon Pickering because it resembles “an owl’s vacant stare.”

* + * {
	margin-top: 1.5em;
}

In this case, to enforce the rule, “All elements in the flow of the document that proceed other elements must receive a top margin of one line,” Heydon uses a single line of “axiomatic CSS” that potentially saves having to write dozens of lines of CSS.

And reducing the size of the CSS file does measurably improve site performance. In my next post, I will mention some of the tools I used to do that.

Monday, October 27th, 2014 CSS
Share this article

No comments yet.

Leave a comment

Categories

Archives