SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow What is the best way to write a large CSS File?

    I have to manage a large CSS File, and I wanted to pick up some advices onto how would be the best way to arrange the CSS File.


    Code:
    a:link.tbLink,a:visited.tbLink,a:active.tbLink {
    	padding:4px 10px;
    	height:20px;
    	background:#73abcb url(images/button.gif) repeat-x;
    	font:12px Verdana,Arial,Helvetica, sans-serif;
    	border:1px solid #FFF;
    	color:#FFF;
    	text-decoration:none;
    	}

    Code:
    a:link.tbLink,a:visited.tbLink,a:active.tbLink {padding:4px 10px;height:20px;background:#73abcb url(images/button.gif) repeat-x;font:12px Verdana,Arial,Helvetica, sans-serif;border:1px solid #FFF;	color:#FFF;text-decoration:none;}

    Code:
    a:link.tbLink,
    a:visited.tbLink,
    a:active.tbLink 
    {
    	padding:4px 10px;
    	height:20px;
    	background:#73abcb url(images/button.gif) repeat-x;
    	font:12px Verdana,Arial,Helvetica, sans-serif;
    	border:1px solid #FFF;
    	color:#FFF;
    	text-decoration:none;
    }
    Code:
    a:link.tbLink,
    a:visited.tbLink,
    a:active.tbLink {
    	padding:4px 10px;
    	height:20px;
    	background:#73abcb url(images/button.gif) repeat-x;
    	font:12px Verdana,Arial,Helvetica, sans-serif;
    	border:1px solid #FFF;
    	color:#FFF;
    	text-decoration:none;
    }
    Thank you.You could also suggest your own way.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a.tbLink {
    	padding:4px 10px;
    	height:20px;
    	background:#73abcb url(images/button.gif) repeat-x;
    	font:12px Verdana,Arial,Helvetica, sans-serif;
    	border:1px solid #FFF;
    	color:#FFF;
    	text-decoration:none;
    }
    Just specifying the <a> will apply the style to all the psuedo classes.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was talking about the way the selectors, the properties, and the begin and end braces are positioned.

    But yes, you are right about the pseudo classed, thank you.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd tend to go for the following:

    Code:
    a:link.tbLink, a:visited.tbLink, a:active.tbLink {
    	padding:4px 10px;
    	height:20px;
    	background:#73abcb url(images/button.gif) repeat-x;
    	font:12px Verdana,Arial,Helvetica, sans-serif;
    	border:1px solid #FFF;
    	color:#FFF;
    	text-decoration:none;
    }
    Note the spaces between the styles to make it clearer where one starts and one ends.

    There are also formatting tools online which you could use to strip all the linebreaks and spaces out once a site is complete but I personally don't tend to bother as the filesize differences would be minimal.

    Also to ensure readibility as well as making sure the file is easy to modify I'd tend to group my redefine's of general global tags at the start (body, h1, p etc) and then all my following styles would flow in the same order as they appear on the page.

    I'd also then comment where styles for specific pages start and end.

    Some people may separate different pages into different stylesheets to make things simpler but I don't tend to do this (unless it's being served to a different media type) as it results in extra http requests.

    Hope that helps.

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't putting the end bracket on the same column with the selector making it harder to read? I figure it's better to see only the selectors on that line.

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Different strokes for different folks. I tend to put the { on the same line as the selector. But then again, I also do the same for if () and other calls when coding PHP, so for me it is just my way.
    Ian Anderson
    www.siteguru.co.uk

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get a fast read through css I tend to:
    Generic selectors first.
    Place selectors in alfabetic order. Often grouped generic, class, id.
    Carefully name selectors so they can be grouped consistently. If I need "chapters" to break the order I consider another file.
    Use no emty lines; less scrolling.
    Use tab; just two colums.
    Use shorthand properties.
    Try sorting properties like this:
    behavior, outside, inside, colors, content details.
    Code CSS:
    }
    selector, selector, selector { /* if the line gets too long I break it */
    	property: value ; /* from the most "outlined" properties- */
    	property: value ; /* visibility, z-index */
    	property: value ; /* float, position */
    	property: value ; /* positions */
    	property: value ; /* width */
    	property: value ; /* height */
    	property: value ; /* margins */
    	property: value ; /* paddings */
    	property: value ; /* borders */
    	property: value ; /* bg color */
    	property: value ; /* color */
    	property: value ; /* font shorthand */
    	property: value ; /* line-height */
    	property: value ; /* font-size */
    	property: value ; /* text-decoration.. */
    	property: value ; /* -to the most detailed "inside" properties */
    }
    selector...

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BRCosmin View Post
    Isn't putting the end bracket on the same column with the selector making it harder to read? I figure it's better to see only the selectors on that line.
    I find that it's easier to read and easier to spot where one style ends and the next one starts as well as ensuring that there are no missing "}"'s

    A lot of it does boil down to personal preference though as there's not really a right or wrong way as long as you're consistent.

    Having said that, for short styles with only a couple of values, I do sometimes put them on the same line

    e.g.
    Code:
    * { padding: 0; margin: 0; }


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
  •