Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Optimizing CSS

  1. #1
    Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    70
    Member #
    14704

    Optimizing CSS

    I'm working on all aspects of optimization and I have a question regarding CSS. Of course, CSS isn't the most important place to do optimization, but still, I feel that if I am going to do it, I may as well do it right. Here are two scenarios for writing CSS rules and I am wondering which is the better approach:

    Exhibit A:
    Code:
    #id1,#id2,#id3,.class1,.class2,.class3{text-align:center;margin:3px;float:left}
    #id1{font:9px}
    #id2{font:10px}
    #id3{font:11px}
    .class1{font:12px}
    .class2{font:13px}
    .class3{font:14px}
    Exhibit B:

    Code:
    #id1{font:9px;text-align:center;margin:3px;float:left}
    #id2{font:10px;text-align:center;margin:3px;float:left}
    #id3{font:11px;text-align:center;margin:3px;float:left}
    .class1{font:12px;text-align:center;margin:3px;float:left}
    .class2{font:13px;text-align:center;margin:3px;float:left}
    .class3{font:14px;text-align:center;margin:3px;float:left}
    Obviously, Exhibit A is going to result in a smaller file size for the CSS stylesheet. However, are there any other considerations like overhead or time it takes for a browser to parse a CSS file? If there are many style declarations, is one approach better than another?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Exhibit A will process faster. As the browser reads and applies the CSS, it won't have to find and select each element separately and render individual styles. It will find the elements and render them all at once, then apply only the different styles.

    Now, when I say it will process faster, you're talking a difference that may be too small to even measure in milliseconds. However, if you're talking about a massive site, it may be worth it speed-wise.

    Not for nothing, Exhibit A is just better practice. If you need to change the margin of all of the elements, you'll only have to change it in one place. That translates to faster dev times.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    70
    Member #
    14704
    Sounds good to me, smaller file size, faster processing and more manageable code. Win, win win. So, I guess the rule of thumb is to combine as many selectors and properties into a single declaration as possible.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com