SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Organising css so its easily readable and using the @import comman to help

    Hi
    Can anyone give me some general advice on how to keep css style sheets more organised?

    I bought a reputable book on css about 4 years ago and after a while found that my css would get totally unorganised. This mean't that if I started a new web-site then I was afraid to use the same css style sheets in case I found it too difficult to alter the styling or layout.

    I've now just picked a beginners book at my local library (published in 2009) on css which explains about how to use css style sheet and then use the @import directives in order to use multiple external style sheets.

    Does anyone else use the @import directive to help organise their websites or is there an even better way now that I should know about?

    Kind Regards
    Matt.

    p.s I'm going to experiment with the @import directive at the weekend but I'm feeling a lot more confident already about laying out a website now.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't use @import. Seems like a waste of time to me, but maybe that's just me. There's no rule for how you should organize your styles. Just find a system that works for you. I prefer to have everything in one style sheet, and then it's just one call to the server, but there are differing preferences.

    Usually, a web page will have various sections, so you might consider grouping your styles by section. You might also decide to group color styles, font font styles etc.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph
    Grouping elements together seems like a good way to organise but if you css style sheet becomes more than 20 screens long, I find that it can become tedious to find the bits you are looking for and even worse if you have to try and figure out how someone else has coded the css.

    I've just seen this idea. What do you think to this idea :-

    <link href="AreaA.css" rel="stylesheet" type="text/css" />
    <link href="AreaB.css" rel="stylesheet" type="text/css" />
    <link href="AreaC.css" rel="stylesheet" type="text/css" />

    Cheers
    Matt

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,250
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    I'm not a fan of import either - personally, I'm not a fan of having multiple files to load - organizing one file into appropriate sections makes more sense to me as I only have to go to one place to work on css. Works better for me, but there are differing opinions.

    There's an interesting series running here at SP right now which you might be interested in. I don't completely agree with all the recommendations, but for the most part it's been and interesting reading.

    http://www.sitepoint.com/css-archite...ode-cleanup-2/
    http://www.sitepoint.com/css-archite...est-practices/
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,250
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Hi Ralph
    Grouping elements together seems like a good way to organise but if you css style sheet becomes more than 20 screens long, I find that it can become tedious to find the bits you are looking for and even worse if you have to try and figure out how someone else has coded the css.

    I've just seen this idea. What do you think to this idea :-

    <link href="AreaA.css" rel="stylesheet" type="text/css" />
    <link href="AreaB.css" rel="stylesheet" type="text/css" />
    <link href="AreaC.css" rel="stylesheet" type="text/css" />

    Cheers
    Matt
    IMNSHO, if your stylesheet is more than 20 screens long (assuming a decent window size, that's roughly 1,000 lines), then you might need to re-look at how your styles are defined and see if you can simplify. Look at shorthand for styles, combining styles and/or look where you can apply classes to similar elements vs defined by id. Even if you can't, the more files you have, the greater the chance for conflicting styles, and the more maintenance that's going to be required.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    I find that it can become tedious to find the bits you are looking for
    I rarely search in the stylesheet anymore but instead just use Firebug to locate the exact line number to which the code you are altering refers and then just go straight to it in the stylesheet. Its so much quicker and you find the element instantly and doesn't really matter how the stylesheet has been organised.

    I try to group my styles logically from top to bottom (header to footer) and then page by page where differences apply. However on large sites and after the 1000th revision the styles can still end up in a mess when the client decides to change the logic of everything you have defined.

    On a large site you may have to split the css files because you don't want to hit the user with the css for all 1000 pages when they may only view one or two.

    I don't use @import either as I don't see a need for it and because of the legacy issues and odd bugs.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    I'll take a look at Firebug (http://getfirebug.com/). At the moment, I'm trying to learn using MS Web Matrix but have to do a Ctrl F to find various elements in any code

    Cheers
    Matt

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Hi Paul
    I'll take a look at Firebug (http://getfirebug.com/). At the moment, I'm trying to learn using MS Web Matrix but have to do a Ctrl F to find various elements in any code

    Cheers
    Matt
    The styslesheet I'm working on at the moment is 8000 lines long so even if I knew roughly where the rules were it would take to long to scroll through and pinpoint them so i just point the mouse at the element and firebug tells me which file and which line number instantly.

    Another useful tool for testing (not organising) is CSS terminal which allows you to try out new styles on a live (or local) site and saves the new rules in the browsers cookie so you don't lose them like Firebug.

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    I might just still to Firebug until I'm better will css - it looks super-cool I must admit!!!
    Cheers
    Matt

  10. #10
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @jmatty2000 ;

    Maybe try some TLA classes which reduce repetition considerably and can be impremented by:


    <div class='w88 mga tac bdr bgf p42'

    Your blurb goes here

    </div>

    # CSS
    PHP Code:
    .bdr {border:solid 1px #f93}
    .bgt{background-colortransparent}
    .
    bg3{background-color:#f93} .bg5{background-color:#f60; color:#fff}
    .bt0 {margin:0.25em 0 0 0.5empadding:0.125em 0.33em;border:outset 0.25em #fed; color:#333}
    .bt1 {margin:0.25em 0 0 0.5empadding:0.125em 0.33em;borderinset 0.25em #f60; color:#333}
    .btn {padding:0 0.75emborder:outset 5px #f60}
    .btn {background-color:#fff; color:#333;}

    .clb {clear:both}  .cll {clear:left} .clr{clear:right}
    .
    dil {display:inline} .dib{display:inline-block}
    .
    fll {float:left}  .flr {float:right}
    .
    fs2 {font-size:large} .fss {font-size:small} .fsi {font-style:italic}
    .
    fwb {font-weight:700}
    .
    lh12 {line-height:1.4em} .lh18 {line-height:1.185em}
    .
    lsn {list-style:none}
    .
    mga {margin:0 auto} .mg1a {margin:1em auto } .mg3a0 {margin:3em auto 0} .mg1011 {margin:1em 0 1em 1em} .mg1210{margin:1em 2em 1em 0}
    .
    mg5 {margin0.0em 0em 0.1em 0em}

    .
    p42 {padding:0.42em}    .p12 {padding:1.2em}
    .
    por {position:relative} .poa {position:absolute} .pof {position:fixed}
    .
    rnd {border-radius:0.77em}
    .
    tab {border:solid 0.25em #333}
    .tal {text-align:left} .tac {text-align:center} .tar{text-align:right}
    .
    tdn {text-decoration:none} .tdu {text-decoration:underline}
    .
    v100 {width:1pxheight:4.75em}
    .
    w08 {width:8%} .w16{width:16%} .w33{width:33%} .w66{width:66%} .w88{width:88%} .w98{width:98%}
    .
    w1x3

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry John - you've lost me but I'm intrigued by what you mean and what are the TLA classes?
    Cheers
    Matt

  12. #12
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Sorry John - you've lost me but I'm intrigued by what you mean and what are the TLA classes?
    Cheers
    Matt
    TLA is Three Letter Acronym.

    In lengthy CSS files statements are repeated so declare a class once as shown in the previous example.

    Just noticed a missing closing div bracket in my previous post/example and editing has expired.
    Last edited by John_Betong; Mar 28, 2013 at 16:55. Reason: spelling: not my fortay and additional comment about editing expired.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    John's TLS approach looks a lot like the 'object oriented' approach to CSS. I don't really use that approach, except in small doses where there are lots of similarly styled elements.

    In terms of Firebug, I've switched to Chrome and its native dev tools (right click on an element and Inspect Element). It's just as good as, and often better than, Firebug. Anyhow, like Paul, using that tool I always just jump straight to the relevant spot in the style sheet.

    I also like to write my CSS rules on one line, which I know a lot of people hate, but it works for me. The style sheet is much shorter, and I have no trouble finding my place in it. But it means far less scrolling—and often none at all, as I tend to work on one section at a time.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    John's TLS approach looks a lot like the 'object oriented' approach to CSS. I don't really use that approach, except in small doses where there are lots of similarly styled elements.

    In terms of Firebug, I've switched to Chrome and its native dev tools (right click on an element and Inspect Element). It's just as good as, and often better than, Firebug. Anyhow, like Paul, using that tool I always just jump straight to the relevant spot in the style sheet.

    I also like to write my CSS rules on one line, which I know a lot of people hate, but it works for me. The style sheet is much shorter, and I have no trouble finding my place in it. But it means far less scrolling—and often none at all, as I tend to work on one section at a time.
    Interesting article also similar to "https://github.com/stubbornella/csslint/wiki/Rules".

    I developed a site and the style-sheet rapidly became like spaghetti so decided to reduce the repetition. My approach was similar to Database Normalization which only uses unique elements.

    An online program similar to "http://www.wordcounter.net/" was used to count all duplicates.

    Next task was to remove duplicates and replace with a single TLA (Three Letter Acronym).

    Each change was validated and eventually the style-sheet shrank to less than 4k and still handled ten different pages styles.

    A bonus was the colour scheme was reduced to about five colours easily changed.

    Introducing Responsive Design has increased the style-sheet to 6k and just over 100 lines.

    Like Ralph I prefer using a single line and endeavour to list the elements alphabetically.

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone - I picked up a lot of hints and tips here. However, I'm still confused - also I'm sorry as I should have informed you that I'm a beginner to css.
    Is TLA the same as Object Orientated CSS?
    Three letter accroynm usually means abbreviated something into just 3 letters which
    a) I don't know how to convert to three letters
    b) Not sure if OOP CSS is the same thing as TLA

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    I don't know how to convert to three letters
    You choose your own class names. So all those 3-letter classes in John's example he made up himself, such as .bdr for border styles.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  17. #17
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Thanks everyone - I picked up a lot of hints and tips here. However, I'm still confused - also I'm sorry as I should have informed you that I'm a beginner to css.
    Is TLA the same as Object Orientated CSS?
    Three letter accroynm usually means abbreviated something into just 3 letters which
    a) I don't know how to convert to three letters
    b) Not sure if OOP CSS is the same thing as TLA
    Further to @ralph's post and to answer your queries:


    >>> Is TLA the same as Object Orientated CSS?
    No

    >>> Three letter accroynm usually means abbreviated something into just 3 letters which
    Yes because it is easier to remember and to prevent mis-spellings

    >>> a) I don't know how to convert to three letters
    Make up your own and start using them, maybe in a separate style-tla.css file.

    >>> b) Not sure if OOP CSS is the same thing as TLA
    No it is not the same

    The following script is an example of how you can use TLAs, notice how the CSS script is nearly half the size:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="EN">
    <head>
      <title>Just Testing</title>
      <style type="text/css">
        body {background-color:#f00}
          
      /* 246 bytes */
        .header  {width:98%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .content {width:88%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .footer  {width:42%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
    
      /* 148 bytes */ 
        .header  {width:98%}
        .content {width:88%}
        .footer  {width:42%}
        .bgf     {background-color:#ff0}
        .mg2     {margin:0 auto 2em}
    
        </style>
      </head>
      <body>
    
        <div class='header mg2 bgf'>
          Header
        </div>  
    
        <div class='content mg2 bgf'>
          Content
        </div>  
    
        <div class='footer mg2 bgf'>
          Footer
        </div>  
    
      </body>
    </html>
    
    Last edited by John_Betong; Mar 29, 2013 at 22:28. Reason: added min-height:8.8em

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi John
    I'm just trying to get all this in my head. I noticed that your 148 byte version does not include the min-height:8.8em; element or am I mis-understanding the example you've given to me. Thanks for helping me.

    Kind Regards
    Matt

  19. #19
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    Hi John
    I'm just trying to get all this in my head. I noticed that your 148 byte version does not include the min-height:8.8em; element or am I mis-understanding the example you've given to me. Thanks for helping me.

    Kind Regards
    Matt
    Hi Matt,

    Looks like the copy and paste went astray, the byte count was correct it was missing the min-height:8.8em.

    Correct CSS

    [css]

    /* 146 bytes */
    .header {width:98%}
    .content {width:88%}
    .footer {width:42%}
    .bgf {background-color:#ff0}
    .mg2 {margin:0 auto 2em; min-height:8.8em}

    [/css]

  20. #20
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,250
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by John_Betong View Post

    The following script is an example of how you can use TLAs, notice how the CSS script is nearly half the size:
    Just a comment. I know this is just an example, but I personally wouldn't do it this way for this example because you're only truly making savings if the css is defined inline like this (if it's in a separate file, the file is cached), and the html ends up being longer. I would do it a slightly different way which still reduces the css, and reduces the html (which most likely will be repeated, and this have a bigger impact if the html isn't optimized.

    The original example body html is 202 bytes. This second version is 178. This version is actually one byte smaller (202 + 148 = 350, 178 - 171 = 349).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="EN">
    <head>
      <title>Just Testing</title>
      <style type="text/css">
        body {background-color:#f00}
          
      /* 246 bytes */
        .header  {width:98%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .content {width:88%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .footer  {width:42%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
    
    
     /* 171 bytes */
        .header, .content, .footer  { min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .header  {width:98%;}
        .content {width:88%;}
        .footer  {width:42%;}
        
        </style>
      </head>
      <body>
    
    
        <div class='header'>
          Header
        </div>  
    
    
        <div class='content'>
          Content
        </div>  
    
    
        <div class='footer'>
          Footer
        </div>  
    
    
      </body>
    </html>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  21. #21
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    Just a comment. I know this is just an example, but I personally wouldn't do it this way for this example because you're only truly making savings if the css is defined inline like this (if it's in a separate file, the file is cached), and the html ends up being longer. I would do it a slightly different way which still reduces the css, and reduces the html (which most likely will be repeated, and this have a bigger impact if the html isn't optimized.

    The original example body html is 202 bytes. This second version is 178. This version is actually one byte smaller (202 + 148 = 350, 178 - 171 = 349).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="EN">
    <head>
      <title>Just Testing</title>
      <style type="text/css">
        body {background-color:#f00}
          
      /* 246 bytes */
        .header  {width:98%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .content {width:88%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .footer  {width:42%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
    
    
     /* 171 bytes */
        .header, .content, .footer  { min-height:8.8em; margin:0 auto 2em; background-color:#fff}
        .header  {width:98%;}
        .content {width:88%;}
        .footer  {width:42%;}
        
        </style>
      </head>
      <body>
    
    
        <div class='header'>
          Header
        </div>  
    
    
        <div class='content'>
          Content
        </div>  
    
    
        <div class='footer'>
          Footer
        </div>  
    
    
      </body>
    </html>
    Hi Dave,

    It was not a good example only knocked up to show how TLAs are effective if used to reduce a linked style-sheet.css.

    Post #10

    I developed a site and the style-sheet rapidly became like spaghetti so decided to reduce the repetition. My approach was similar to Database Normalization which only uses unique elements.

    An online program similar to "http://www.wordcounter.net/" was used to count all duplicates.

    Next task was to remove duplicates and replace with a single TLA (Three Letter Acronym).

    Each change was validated and eventually the style-sheet shrank to less than 4k and still handled ten different pages styles.

    A bonus was the colour scheme was reduced to about five colours easily changed.

    Introducing Responsive Design has increased the style-sheet to 6k and just over 100 lines.

    Like Ralph I prefer using a single line and endeavour to list the elements alphabetically.
    Last edited by John_Betong; Apr 1, 2013 at 10:45. Reason: spelling: qhote


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
  •