Selectors as classes and subclasses with child selections based on DOM Element types can make your CSS development life easy. Capturing elements with attributes set to specific values or substrings will create exciting dynamic flow.
Don't do it! The browser will slow down. The complexity for parsing display over the document is significant. CSS3 syntax improvements are not free; chunks of CPU is the price. Use the fastest selectors. These selectors work on all browsers. These two selectors are the most simple and basic. The number one fastest selector in the world today is #id {}
Good:
#id-selector {}
.class-selector {}
custom {}
Bad:
a {}
div {}
span {}
.class .class {}
a.class {}
li.class {}
div.class {}
div[attr=something] {}
div > a.class {}
span div.class {}
span div {}
To make your site fast. Use light weight selectors. This makes your site fast for old and new devices and browsers.
The reason behind performance boosts by excluding advanced CSS3 selectors is related to how the document applies style computations to document elements. The following is a slow and heavy selector:
div#nav a {}
The browser will first select all <a> tags in your document. Then it will iterate a second time over the list of the anchor tags in search for any anchors inside the #navigation id element. This is slow. Instead use this:
.nav {}
Apply the .nav class to every anchor tag individually.
Might as well take advantage of HTML5/4 document syntax when using CSS3. Start by reducing page size by excluding syntax:
Good:
<div id=my-id class=fish></div>
Bad:
<div id="my_id" class="fish"></div>
Save bytes by excluding syntax making a faster download.
Use the HTML5 doctype. The doctype is small and light weight.
Good:
<!doctype html>
Bad:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use <custom>Tags</custom>.
<pub>PubNub<pub>
And the CSS3 Selector will be:
pub {color:#f90}
When possible, use the shorthand notations for defining styles.
Good:
background:#fff;
color:#000;
padding:2px 3px 4px 5px;
margin:10px;
Bad:
background-color: #ffffff;
color: #000000;
padding-top: 2px;
padding-left: 3px;
padding-bottom: 4px;
padding-right: 5px;
Reducing payload size by using CSS3 shorthand to increase payload delivery.
The following will slow down your page considerably:
Bad:
<div style='color:yellow;'></div>
Avoid this or suffer extra CPU cycles on the end user's machine.
If you have multiple style files, merge them into one. If required to have multiple style files, place these extra styles directly on inside the HTML Document Head.
Both Gzipping and Minifying your CSS3 is important for speedy delivery. Running your CSS3 into a minifier will reduce size by 30%. Gzipping will reduce by 40%. Here is a Perl Script we use to Minify our CSS3:
Good:
#!/usr/bin/perl
my $build = q();
while(<>) { $build .= $_; }
$build =~ s/\/\*.*?\*\///msg;
$build =~ s/\s+/ /msg;
$build =~ s/ ?([;:{}]) ?/$1/msg;
$build =~ s/;+\}/}/msg;
print $build;
Use this script on your CSS3 Files like this:
Good:
./minify styles.css | gzip -c9 > style.min.css
Now you have the best payload package for your CSS3.
Distribution and deployment strategies will be the final speed boost optimizations. Make sure your CSS3 payload HTTP Headers are set as follows:
Good:
Content-Type: text/css
Content-Encoding: gzip
Content-Length: 4543
Expires: Thur, 01 Jan 2020 10:00:00 GMT
Cache-Control: public
Connection: close
Exclude all other headers, especially the ETag header.
Place your final package on a CDN. Google App Engine, Amazon Cloud Front and Rackspace Cloud Files are options we have used and recommend for entry level performance and pricing. This is one of the fastest delivery boosts in performance. Using a CDN will increase page responsiveness 2-8x boosts. Even if you choose to skip other optimizations, this one is an easy mega boost.
Here at
