Differences between CSS technology and CSS performance

One, why I want to test the performance of CSS

This is the background: I am a loyal fan of the OOCSS (translator Note: object-oriented CSS). But recently, I have been using Compass,sass (Translator Note: SASS to make CSS functional, there are such as variables, nesting, mixing, inheritance and other features, need ruby support). I sometimes feel that oocss and SASS seem a little odd. A friend of mine introduced me to Chris Eppstein (founder of Compass), and we explored the @extend method in sass.   So I decided to create a CSS test page, in a very original way to show whether the Sass @extend method and CSS Oocss method has a significant performance difference. The following illustration is a sample screenshot of the Sass@extend Inheritance implementation:     about Oocss,nicole Sullivan has a good PPT lesson plan, see below:   Object oriented CSS     View more Nicole Sullivan's Prese Ntations.     would like to translate, the result of this slide is set by the author is not able to download, if you translate and recreate a slide, it is not enough time, so forget it. It has two main principles:   * Separation of structures and skins * Separation of containers and content   This principle is similar to some of the ideas mentioned in the article "separating the CSS styles".   Ii. How the test works     This test created almost 2000 box, all box has a unique background (style). There are several formats to test (see the link below), and you can change the speed of the tester individually to the difference. Just click on the appropriate link as you wish.   This test uses a short script, which comes from Steve Souder's blog: Performance Impact of CSS selectors (performance impact of CSS selectors)   Steve's article can be said to have entered the CSS selector performance of a more detailed realm, is worth reading.   III, CSS format     1. OOCSS (seems pretty fast), double class, such as: class= "box box-#", the basic CSS style in class box, and then straight add the background style in the unique class.   2. Sass @extend (speed uncertainty), a class such as class= "box-3", and then create a multiple selector rule on the base rule, such as. box-1,. box-2 {generics}.   3. Arrogant CSS adds all the basic CSS to a single class, no "slimming".   4. Use ID selector Although I do not recommend the use of IDs, but for testing is worth a try.   5. No CSS good bottom line test   code example?   OOCSS Style: A master class that contains all the common rules, and then a unique rule using other class       Copy code code as follows:. box {padding:25px;border:1px soliD #000; border-radius:5px;}   Box-1 {background-color: #FFEE00;}   Box-2 {background-color: #00FFee;}   ...      @extend style: Classify all unique classes as a comma-separated class list that uses common properties.       Copy code code as follows:. box-1,.box-2 {padding:25px;border:1px solid #000; border-radius:5px;}   Box-1 {background-color: #FFEE00;}   Box-2 {background-color: #00FFEE;}   ...      long (swollen) style: All public styles are separated into a unique class.       Copy code code as follows:. box-1 {  padding:25px;  border:1px solid #000;  border-radius:5px;  b ackground-color:ffee00;}   Box-2 {  padding:25px;  border:1px solid #000;  border-radius:5px;  background-color:0 0FFEE;}   ...      No CSS: a bit of self explanatory   IV, test results     test results looks like fun, let's take a look at some charts, okay?   So let's talk about CSS performance, here are some things I've found: class selector and ID selector are basically the same speed Sass/compass @extend format only slightly behind the OOCSS format bloated The format is significantly slower in a large order of magnitude than in other formats, even in extreme cases, the best and worst time difference is also between 100-200 milliseconds with browser performance to note (bonus points): Most browsers behave roughly the same, just slightly faster some firefox is the slowest opera in the browser to render fast C   SS fastest, slow to render the CSS slowest and my own test after the personal conclusion: OOCSS and @extend format quite quickly swollen CSS harmful performance oh, and almost forgot, here is the test page.   Update: I found some discrepancies in the test that might affect the test, so I deleted any externally referenced files, and other things that might affect CSS performance (like Text-shadow). ZXX: The above is the translation of all five, short slip out of the conclusion generally speaking, a page of the CSS rendering efficiency of the page and the amount of CSS has a certain relationship.   Using the object or the separation thought I mentioned is a good way to streamline CSS and improve CSS performance. Translation ability is limited, if there is any inaccurate place to welcome corrections. That's it.