![]() An ID selector gave a mean of 12.5, so this actually reflowed slower than a class. In Firefox 6 on a Windows machine I get an average reflow figure of 10.9 for a simple class selector. Using Steve Souders’ CSS Test Creator we can see that an ID selector and a class selector show very little difference in reflow speed. ![]() It is important to note that, although an ID is technically faster and more performant, it is barely so. Quoted from Even Faster Websites by Steve Souders Selectors have an inherent efficiency, and to quote Steve Souders, the order of more to less efficient CSS selectors goes thus: :hover) and more complex CSS3 and ‘regex’ selectors, such as :first-child or. More uncommon ones include basic pseudo-classes (e.g. #header) and class (e.g.tweet) respectively. But best practice is best practice, and it doesn’t matter whether you’re building the next Facebook, or a site for the local decorator, it’s always good to know… CSS selectorsĬSS selectors will not be new to most of us, the more basic selectors are type (e.g. These rules only really apply to high performance websites where speed is a feature, and 1000s of DOM elements can appear on any given page. This can be easily forgiven however when you realise just how little you can, err, realise, non-performant CSS. Table of ContentsĮfficient CSS is not a new topic, nor one that I really need to cover, but it’s something I’m really interested in and have been keeping an eye on more and more since working at Sky.Ī lot of people forget, or simply don’t realise, that CSS can be both performant and non-performant. Written by Harry Roberts on CSS Wizardry. 17 September, 2011 Writing efficient CSS selectors
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |