SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Over using classes?

    Hello,

    I've been working on a web site that require a lot of styling, when the css file got to 10kb, i start to wonder how can I make the file smaller, without writing CSS code for every small thing. So I created a set of classes like this:

    Code:
    .block{display:block}.inline{display:inline}
    .hiline{line-height:150%}.lowline{line-height:90%}
    .rtl{direction:rtl}.ltr{direction:ltr}
    .center{margin:0 auto}.left{float:left}.right{float:right}
    .clear{clear:both}.cleft{clear:left}.cright{clear:right}
    .tcenter{text-align:center}.tleft{text-align:left}.tright{text-align:right}
    
    .bold{font-weight:bold}.italic{font-style:italic}
    (there's more in the original...)

    Now, whenever I want to use any of those classes, I just write: <div class="center tcenter bold"> or class="block hiline italic" etc.

    I did save a lot by using those classes, but I also noticed that I'm using them a lot, does it have any effect on how fast the browser render the page, is it good, bad?

    David.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,377
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Multiple classes can be very useful and can save duplicating sections of code as you can concatanate them together.

    The main drawback I see is the readability and the fact that you may mix classes that don't really match. There is also a problem on occasions when you may want an element such as a logo floated to the left and not the right. If all your elements are controlled by classes such as .left then you will have to edit the html rather than editing the css which may be a pain if the logo is on a 100 pages.

    Look at some of all4nerds posts as he his a master of multiple classes and has a unique style that works well for him. I prefer to be more old fashioned and use meaningful classnames/id's that everybody can understand especially as 90% of my real work gets handed over for others to work on.

    I don't expect there is a speed issue and I can's say I have ever noticed any problems with multiple classes (apart from ie5 mac of course).

    Then you also have to weight up whether the weight of the html has increased because you are using more classes in the html which is why all4nerds uses single or double letter classes to keep everything at a minimim.

    In the end its really a personal choice and as long as you are orgainised and it helps you work faster then I don't really see a problem with it.

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. You just reinvented HTML 3.2.

    You can save even more bytes by using <center>, align="right", <b> and <i>.

    However, using this approach misses one fundamental point about using CSS. The markup should be free from presentational aspects, and instead deal with semantic and structural aspects. This way you can change the presentation later without changing the markup. It is also easier to create different presentations to different media, say print and handheld.

    That is, instead of using "center tcenter bold", think about why you want that particular presentation. If it's a heading then HTML already has element types for it (H1-H6) and you don't need any classes at all. If it's a summary then use <p class="summary">. And so forth.
    Simon Pieters

  4. #4
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, it's a nice compression you made, but it will be a problem, as Paul mentioned, for those who will work with the site after me.

    Simon, did I? well, at least I have some progress
    You are right there, but then again, i don't want to have a 50kb CSS file...

    In any case, this technique does make my life easier, so if there is no problems with rendering speed, I think I will continue using it.

    Thanks for the replies guys.

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're concerned about file size then I'd rather use gzip compression than to move presentational aspects to the semantic layer.
    Simon Pieters

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are advantages to this approach, though if you aren't a bit more verbose in the classnames anyone working on the site after you may be lost.

    On that same note, it can get you into the VERY bad habit of giving each little detail it's own class - resulting in your inlining classes JUST LIKE they were style in your content...

    Basically, how is:

    <a class="bold center black">

    any better than
    <center><a><b><font color="black">

    It isn't... instead of removing the styling from your content, all you've done is change HOW you are declaring the styling IN your content. That's not what separating style from content is supposed to be about.

    As to speed though, I really doubt there's much impact one way or the other... If a 12mhz AT can view standard html files, I don't think a modern multi-ghz machine is going to see much issue with multiple classes... We're talking about parsing a measly 20k text file - to be worried about the speed of that you'd need to drop down to a 8088.

  7. #7
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, Grouping classes and IDs is also nice, though with the time it will be impossible to read

    deathshadow, the bold and italic was an example, I mostly use clear, float, text directions (rtl-ltr), line height, text decoration etc

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spaiz
    the bold and italic was an example, I mostly use clear, float, text directions (rtl-ltr), line height, text decoration etc
    The concept still applies though - as instead of giving it a 'meaningful' class you're just wrapping something that would be inlined... It's a step sideways, not forward, and means you have to go into the HTML to change the styling of your elements

    <div class="block clear left ltr big_lineheight">

    ENTIRELY defeats the point of using CSS in the first place - moving presentation out of the HTML... You moved the presentation out... only to put it back in. All that does is turn CSS into a glorified wrapper instead of a presentation tool. It's not fixing the problem, it's just moving it around (and likely making the HTML bigger - defeating one of the points)

    Out of curiosity, do you have a 'full copy' of the html and CSS in question? There are other ways to reduce your CSS besides 'tag soup'. (although it often involves HTML 'reduction' as well)

  9. #9
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know you right there, I'll try to create more meaningfull classes like sub_titles or user_name instead of writing class="red clear bold"

    here's the css i have right now(work in progress):

    Code:
    @charset "UTF-8";
    *{padding:0;margin:0}
    table,img{border:0}
    body{background:#97989b;padding:8px}
    body,td{font:80% normal arial,verdana,sans-serif}
    
    /* global stuff a:visited{color:#0b74b7}*/
    a{color:#00309c}a:focus,a:hover{color:#ff5a00}a:active{color:red}
    .u{text-decoration:underline}a.u{text-decoration:underline}a.u:hover{text-decoration:none}
    
    .fade,.fade a{color:#8a8a8a}.red,.red a{color:red}
    .block{display:block}.inline{display:inline}
    .hiline{line-height:150%}.lowline{line-height:90%}
    
    .rtl{direction:rtl}.ltr{direction:ltr}
    .center{margin:0 auto}.left{float:left}.right{float:right}
    .clear{clear:both}.cleft{clear:left}.cright{clear:right}
    .tcenter{text-align:center}.tleft{text-align:left}.tright{text-align:right}
    
    .bold{font-weight:bold}.italic{font-style:italic}
    .submit{background:#f0f1f9;text-align:center}.submit,label{cursor:pointer}
    .hr{height:1px;overflow:hidden;background:#f2f2f2;width:90%;margin:10px}
    /* end */
    .wrap{border-top:1px #484447 solid}
    .wrap,.footer{width:80%;min-width:780px;background:#fff}
    .tsh{height:1px;border-top:1px #7e8083 solid;border-bottom:1px #6a6c6e solid;background:#717375}
    .cont,.footer{border:1px #6a6c6e solid;margin-top:7px}
    .footer{font-size:85%;margin:4px auto;padding:5px}
    
    #head{padding:5px 0;border-top:#fff8cf 2px solid}
    #head .logo{margin-left:24px;border-left:1px solid #79a3b8}
    #head .sm{padding-top:5px}
    #head input.text{width:16em}
    #head .menu{padding-top:3px}
    #head .menu a{font-size:110%;font-weight:bold}
    #head .beta{margin:7px 0 0 7px}
    .hbr{height:8px;font-size:1px;background:#4c4242}
    
    #umenu{background:#ebebeb url(/media/images/umenu_bg.gif);padding:3px;padding-bottom:4px;border-top:1px #fff solid;border-bottom:1px #898b8d solid}
    #umenu img{vertical-align:bottom;height:16px;width:16px}
    #umenu a{text-decoration:none}
    #umenu a b{text-decoration:underline;font-weight:normal}
    #umenu a:hover b,#umenu a:hover{text-decoration:none;background:#dcdcdc;color:#000}
    #umenu .msg img{background:url(/media/images/icons.gif) 96px}
    #umenu .nsg img{background:url(/media/images/icons.gif)}
    #umenu .nsg a b,#umenu .prf a b{font-weight:bold;color:red}
    #umenu #prf img{background:url(/media/images/icons.gif) 16px}
    #umenu #frd{background:url(/media/images/icons.gif) 32px}
    #umenu #fav{background:url(/media/images/icons.gif) 48px}
    #umenu #img{background:url(/media/images/icons.gif) 64px}
    #umenu #blg{background:url(/media/images/icons.gif) 80px}
    
    /* content global stuff */
    h3{font-size:140%;color:green;padding:0 8px}
    h3 a{color:#038800;text-decoration:none}
    h3 a:focus,h3 a:hover{text-decoration:underline}
    
    h3.xtra{color:#cd400e}
    h3.xtra a{color:#cd400e;}
    h3.xtra span a:link{text-decoration:underline}
    
    .avatar{border:1px #aaa solid;display:block}
    .avatar:hover{border:1px #000 solid;display:block}
    .avatar img{border:1px #fff solid;display:block}
    
    .pub_msg{padding:5px;border:2px #ccc solid}
    .pub_msg h3{margin:0}
    .page_content{padding:10px 50px}
    
    #s_left,#s_right,#g_left,#g_right{padding:10px 5px}
    
    #s_left{float:left;width:75%}
    #s_right{width:23%}
    
    #g_left{float:left;width:65%}
    #g_right{width:33%}
    
    #s_left .sep,#g_left .sep{clear:both;border-top:#ccc 1px solid;margin:5px 0}
    #s_right .sep,#g_right .sep{border-top:#aaa 1px solid;margin:5px 0}
    
    /* login */
    #login input{direction:ltr}
    #login .text,#login label{display:block;width:100%}
    #login .register{text-align:center;background:#f7d8d8;padding:2px 0;font-weight:normal}
    #login .submit{text-align:center;background:#b9f0b8;padding:2px 3px;font-weight:bold;padding-left:3px}
    
    .image_results{text-align:center}
    .image_results span{float:right;margin:5px 0 8px 8px;width:80px;height:80px}
    .image_results span p a{width:78px;height:78px;display:block;cursor:pointer;overflow:hidden;text-decoration:none;border:1px solid #bbb;position:relative}
    .image_results span p a:hover{border:1px solid #636363;background:#e0e6e7}
    .image_results span p a img{border:1px solid #fff}
    .image_results span p a span{background:#fff;opacity: .6;filter:alpha(opacity=60);width:100%;color:#1f5ba4;font-size:80%;position:absolute;top:50px;right:0}
    
    .albumList .block{border:1px #ddd solid;margin-top:5px;background:#f4f4f4;width:95%}
    .albumList .block .right{border:1px #fff solid;margin-left:5px;width:70px;height:70px;overflow:hidden}
    
    .big_link{font-size:120%;display:block;padding:3px;font-weight:bold;border:1px #eee dashed}
    .big_link:hover{background:#f4f4f4;border:1px #eee solid}
    
    .imGallery .currImgHolder{text-align:center;background:#fff url(/media/images/progress.gif) no-repeat center}
    .imGallery .currImgHolder a img{border:3px #eee solid}
    .imGallery .currImgHolder a:hover img{border:3px #bbb solid}
    
    /* comments */
    .pub_comments .cmsg{border-bottom:1px #eee solid;margin:1px;padding:1px}
    .pub_comments .cnew{background-color:#e8e8e8}
    .pub_comments .nametime{padding:2px}
    div.CommentText{width:100%;overflow:auto}
    
    .text_list dt{font-weight:bold;font-size:110%}
    .text_list dd{margin-right:10px;margin-bottom:5px;color:#aaa}
    
    .account_box{padding:3px}
    
    .acc_profile .tcenter a{display:-moz-inline-box;border:1px #aaa solid;margin:3px}
    .acc_profile .tcenter a:hover{border:1px #727272 solid}
    .acc_profile .tcenter a img{border:1px #fff solid}
    
    .acc_acc p a{float:right;padding:5px 0 0 5px}
    .acc_acc p a span{display:block;border:#ccc 1px solid}
    .acc_acc p a:hover span{border:#727272 1px solid}
    .acc_acc p a span img{border:#fff 1px solid}
    .acc_acc p a strong{display:block;text-align:center;font-size:80%;font-weight:normal}
    .acc_acc div span{font-size:90%;display:block;color:#919191;white-space:nowrap}
    
    #acc_rank{margin:3px}
    #acc_rank div{border:1px #ccc solid}
    #acc_rank div span{display:block;background-color:lightgreen;font-size:50%}
    #acc_rank span{text-align:center;display:block}
    #acc_rank span a{font-weight:bold}
    
    .acc_url span{font-weight:bold}
    .acc_url div{padding-left:5px;direction:ltr;text-align:left}
    
    /* Private Msgs */
    #msglist{margin:0 auto;width:90%;text-align:right}
    #msglist td{vertical-align:middle}
    #msglist th{font-weight:normal}
    #msglist label{font-weight:normal;white-space:nowrap}
    #msglist th.reply{text-align:center;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;border-top:1px solid #e5e5e5}
    #msglist th.cbox{border-left:1px solid #e5e5e5;border-top:1px solid #e5e5e5}
    #msglist th.replyb{text-align:center;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;border-top:1px solid #e5e5e5}
    #msglist th.cboxb{border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
    #msglist .tr1{background:#fff}
    #msglist .tr2{background:#f7f7f7}
    #msglist td.reply{text-align:center;color:green}
    #msglist td.cbox{border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5}
    #msglist td.date{white-space:nowrap;color:#afafaf}
    #msglist td a{display:block;margin:2px;padding:2px 5px;height:100%}
    #msglist td a:hover{background:#e8eaf4;color:#000}
    /*link fix, need a remake*/
    #msglist #viewmsg td a{display:inline;margin:0;padding:0}
    #msglist #viewmsg td a:hover{color:#ff5a00}
    
    #msglist .top{border-bottom:1px solid #d4d8e7;margin:15px 0 3px 0}
    #msglist .bottom{border-top:1px solid #d4d8e7;margin:3px 0 15px 0}
    #msglist .top a{border-top:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5}
    #msglist .bottom a{border-bottom:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5}
    #msglist .menu a{font-size:110%;padding:1px 5px;text-decoration:none;display:-moz-inline-box}
    #msglist .menu a:hover{background:#326ac6;color:#fff}
    #msglist .menu .selected{font-weight:bold}
    #msglist .del{float:left}
    #msglist .del a:hover{background:#ff1800;color:#fff}
    
    /* smooth box */
    .sm_box{width:94%;margin:10px auto}
    .sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
    /* V options V */
    .sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#f7f7f7;overflow:hidden;border:0 solid #d9d9d9;border-width:0 1px}
    .sm_box .a{margin:0 5px;background:#d9d9d9;border:0}
    
    .sm_lbluegrey .a,.sm_lbluegrey .b,.sm_lbluegrey .c,.sm_lbluegrey .d,.sm_lbluegrey .content{background:#f8f9fa;border:0 solid #7fdcff;border-width:0 1px;overflow:hidden}
    .sm_lbluegrey .a{background:#7fdcff;margin:0 5px;border:0}
    /* ^ options ^ */
    .sm_box .b{margin:0 3px;border-width:0 2px}
    .sm_box .c{margin:0 2px}
    .sm_box .d{height:2px;margin:0 1px}
    .sm_box .content{padding:0}
    
    /* forum */
    .forum{text-align:center}
    .forum .content table{width:99%;margin:0 auto;text-align:center} /* table-layout:fixed */
    .forum td{text-align:center;padding:0px;font-size:80%}
    .forum_post_new{float:left;margin-left:8px}
    .forum_tree{text-align:right;margin-right:8px}
    .forum_pages{text-align:left;padding-left:45px}
    .forum_pages a{border:1px #ccc solid;text-decoration:none}
    .forum_pages a:hover{border:1px #888 solid}
    .forum_pages strong a{border:1px #eee solid;color:#000}
    .forum_cat td{font-weight:bold;color:#a9a9a9}
    .forum_cat .name,.forum_cat .name a{text-align:right;width:70%;font-size:110%;color:green;text-decoration:none}
    .forum_msgs_count{background-color:#e9e9e9}
    .forum_list td{border-top:1px solid #d9d9d9;padding:3px}
    .forum_list a:hover{background-color:#fff}
    .forum .forum_list .name{text-align:right;width:70%;padding:3px 6px}
    .forum_list .name a:visited{color:#551a8b}
    .forum_list .name div{font-size:80%}
    .forum_list .name div a{color:green}
    
    /* V forum remake, move to tableless layout V */
    .f_re_holder{background-color:#eeeeee;border:1px solid #e1e1e1;width:100%;overflow:auto}
    .f_re_newmy{border:2px solid #ccc}
    .f_re_new{border:2px solid #ff5a00}
    .f_re_o{border-bottom:1px solid #e1e1e1;padding:1px 5px;color:#9c9c9c;font-size:90%}
    .f_re_o .edit{float:left;width:84%;text-align:left}
    .f_re_o a{text-decoration:none;color:#9c9c9c;font-weight:bold}
    .f_re_o .time{text-align:center}
    .f_re_msg{background-color:#f9f9f9;float:left;width:100%;text-align:right}
    .f_re_msg .info{float:right;background-color:#fff;width:16%;text-align:center;border:1px solid #e1e1e1;margin:2px 1px 2px 5px;padding:3px 0}
    .f_re_msg .info .img_holder{width:85px;border:1px solid #ccc;margin:5px auto}
    .f_re_msg .info img{margin:5px 0}
    .f_re_msg .user_info{font-size:80%;color:#9c9c9c}
    .f_re_sep{font-size:4px;height:5px}
    
    .forum_pt_name input{float:left;width:80%}
    .forum_pt_name label{display:block;text-align:right;width:20%;white-space:nowrap;font-weight:bold}
    #LastPageMessage{font-size:90%;color:red}
    .sm_box textarea{clear:both;width:100%}
    .sm_box form{display:block;text-align:center;width:70%;margin:0 auto}
    
    
    /* smiles, colors list*/
    #commSmileColor ul,#commSmileColor li{list-style-type:none;float:right;margin-top:3px}
    #commSmileColor, #commSmileColor .DropDownList,#commSmileColor li:hover ul,li.over ul{display:inline}
    .DropDownList {position:relative}
    .DropDownList a{margin:1px;border:1px #ccc solid;text-decoration:none}
    .DropDownList img{cursor:pointer}
    
    .SmilesList,.ColorsList{display:none;position:absolute;left:-30px;top:13px;border:1px #ccc solid;background:#fff}
    .SmilesList div,.ColorsList div{white-space:nowrap}
    
    .SmilesList img{height:16px;width:16px;border:2px #fff solid}
    .SmilesList img:hover{height:16px;width:16px;border:2px #ccc solid}
    
    .ColorsList img{height:11px;width:11px;border-left:1px #fff solid;border-top:1px #fff solid;}
    .ColorsList img:hover{border-left:1px #000 solid;border-top:1px #000 solid;}
    
    /*registration*/
    #reg_form{font-size:130%}
    #reg_form input.text{width:240px;text-align:right}
    #reg_form td{white-space:nowrap;text-align:right;padding:2px}
    #reg_form td .exmp{font-size:80%;color:#888}
    #reg_form{width:0%;margin:15px}
    #reg_form #tdTerms{padding:5px;border:1px #ccc solid}
    #reg_form .terms label{display:block;text-align:center}
    #reg_form .name{text-align:left;font-weight:bold}
    #reg_form .error input{font-weight:bold;border:2px red ridge}
    #reg_form .submit{font-size:140%;font-weight:bold}
    #reg_form #city{margin-bottom:20px;position:relative}
    #reg_form #city div{margin-bottom:20px;position:relative}
    #reg_form #city div input{border-left:0;position:absolute;z-index:1000;width:220px}
    #reg_form #city div select{position:absolute;z-index:1;width:240px;clip:rect(0,250px,25px,0)}

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spaiz
    Code:
    body,td{font:80% normal arial,verdana,sans-serif}
    Are you sure about this? font-size is inherited in table cells and so the font size in table cells will be 80% of 80%, i.e. 64% of the default.
    Simon Pieters

  11. #11
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wasn't sure as well, until I got same size font in TD and body this way. When i write it separately the size is different, smaller in TD - 64% as you said.

  12. #12
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a nice way to write css rule for firefox only(somethin IE7 won't undarstand as well)? I want to hide display:-moz-inline-box as opera doesn't undarstand it.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,377
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I want to hide display:-moz-inline-box as opera doesn't undarstand it.
    Why would you need to hide it as moz is the only one that will parse it? Other browers will just ignore it anyway.

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't -moz... only understand by Mozilla browsers anyway? Why would you need to hide it from any others?

    EDIT: too slow.

  15. #15
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need it because I set Opera to show me every error message from the web site I work on, so it's annoying to see it every few minutes


Bookmarks

Posting Permissions

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