will multiple classes cause loading problems?

  • Profile Image
    The_Mighty_Optiq
    Asked on February 27, 2012 at 03:54 PM

    I just made a discovery with my CSS...  I have a pic on one of my forms consisting of a bunch of colors and I wound up making a separate class for each one off the same pic when it was really not neccessary... here's an example of what I mean

     

     

    .blacks {width:105px; height:44px; background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/colorsheettest.jpg); float:left;margin-right:17px;}

    #black01 {background-position: 0px 0px; }
    #black02 {background-position: 0px -44px; }
    #black03 {background-position: 0px -88px; }
    #black04 {background-position: 0px -132px; }
    #black05 {background-position: 0px -176px; } etc. etc. etc. etc.

     

     

    .whites {width:105px; height:44px; background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/colorsheettest.jpg); float:left;margin-right:17px;}

    #white01 {background-position: -105px 0px; }
    #white02 {background-position: -105px -44px; }
    #white03 {background-position: -105px -88px; }
    #white04 {background-position: -105px -132px; }
    #white05 {background-position: -105px -176px; }
    #white06 {background-position: -105px -220px; } etc. etc. etc. etc.

     

    .greys {width:105px; height:44px; background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/colorsheettest.jpg); float:left;margin-right:17px;}

    #grey01 {background-position: -210px 0px; }
    #grey02 {background-position: -210px -44px; }
    #grey03 {background-position: -210px -88px; }
    #grey04 {background-position: -210px -132px; }
    #grey05 {background-position: -210px -176px; }
    #grey06 {background-position: -210px -220px; } etc. etc. etc. etc.

     

    I just discovered that I could've just had one class... say .Colors and just made the #black, #white, #grey etc. on that one div......

     

    Now my question is.... does this make a difference in loading time? or do I run a risk of confusing the browser?  Will it make it smoother and quicker if I just eliminate all the classes n have just one?

  • Profile Image
    liyam
    Answered on February 28, 2012 at 03:14 AM

    There won't be much significant difference on loading time as there are only a few different class names being called in your CSS (Maybe just micro seconds difference).  But of course, the lesser the code, the more optimized it is in terms of file size and code usability, the faster it will load (in my opinion). 

    There also won't be any confusion on the computer's CSS loading even if you have multiple class names but showing the same result.

    Just let us know if you need further clarification on this matter, or if you have other questions or concerns.