SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Organized CSS

  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Organized CSS

    Is there a recommendation for how to organize long css files? Should I break the css and have separate files for each section of my page, with one main file just for the stuff that occurs everywhere?

    Does the fact that I find my own css files difficult to navigate at the end of a project (due to sheer size/length) mean that I'm not writing good code?

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd break it up with comments into sections that make sense to you. I usually seperate layout areas like header, footer, sidebar, etc. Some folks use sections for typography and color. The more complex the css will be the more likely you are to need more comment sections.

  3. #3
    SitePoint Member
    Join Date
    Nov 2002
    Location
    Cleveland, Ohio
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What we've standardized on at my work is organizing CSS by what the rules affect. Each section has a comment at the beginning describing it. For example:

    General structure (usually the body tag and divs)
    Paragraphs
    Lists (ordered, unordered, definition)
    Links
    Forms
    Tables
    Purley presentational items (classes that only affect a tag's appearance)

    We also add a table of contents at the top of our CSS files.

    As far as multiple CSS files, we try to keep as much as possible in a single, central file. We usually only create additional files for very specific things.

    It works pretty well for us.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I do is format my code. You know how HTML tends to be formatted, so it's easy to read? I do the same thing with my CSS. I tend to have a main CSS file that handles the entire site. If I have a lof of style rules for just one page though, I'll put that into a separate stylesheet, and then import it into the main one using @import (inside the actual stylesheet, not the HTML source).

    I'm at a public computer right now, so I'll provide you with an actual working example when I get home.

  5. #5
    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 tend to break my HTML down as follows but it probably just depends on what works best for you. I'll include comments for each of these and then also comment where styles might apply to a left column, center column and different sections so things are easy to find.

    For example.

    redefining HTML tags - Body, H1, P etc

    links - a, a:link, a:hover

    generic classes that you may apply in different cirumstances .hidden {display:none} for example

    custom styles that refer to layout - left column, right column etc

    custom styles that are relevant per page

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    And as promised (after an unwanted trip to the emergency room, mind you) here's my example (please forgive the ugly color combination, it is just an example afterall--and no, that's NOT what sent me to the ER last night):
    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" xml:lang="en" lang="en">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="keywords" content="Page-specific, keywords, go, here" />
    <meta name="description" content="A description of the page goes here." />
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #FFF;
    	color: #000;
    }
    
    h1 {
    	background-color: #F00;
    	color: #FFF;
    	padding: 0.2em 0; /* padding is used when you want to "pad" an element, class or ID.  Think of it as a protective layer, like the padding that American-style football players wear to protect themselves from injury */
    	text-indent: 1em; /*if just indenting text, use text-indent instead of padding */
    }
    
    #menu {
    	background-color: #0F0;
    	color: #FF0;
    	float: left;
    	list-style: none;
    	width: 10em;
    }
    	#menu a, #menu a:link, #menu a:visited {
    		background-color: #0F0;
    		color: #F00;
    		display: block;
    		text-align: center;
    		text-decoration: none;
    		width: 100%;
    	}
    	
    	#menu a:hover {
    		background-color: #00F;
    		color: #FFF;
    	}
    
    #content {
    	background-color: #555;
    	color: #FFF;
    	margin-left: 10em;
    	padding: 0.25em 0;
    }
    	.section {
    		border: 1px solid #FFF;
    		margin: 1em;
    	}
    	
    	h2 {
    		background-color: #F0F;
    		color: #000;
    		font-size: 1em;
    		padding: 0.1em 0.5em;
    	}
    	
    	.section p {
    		background-color: #999;
    		color: #FFF;
    		padding: 0.1em 0.5em;
    	}
    
    #footer {
    	background-color: #00F;
    	clear: left;
    	color: #FFF;
    	padding: 1em;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <h1>Web Page Title</h1>
    <ul id="menu">
    	<li><a href="">Menu Link</a></li>
    	<li><a href="">Menu Link</a></li>
    	<li><a href="">Menu Link</a></li>
    	<li><a href="">Menu Link</a></li>
    </ul>
    <div id="content">
    	<div class="section">
    		<h2>Content Header</h2>
    		<p>Lorem ipsum dolar sit emit...</p>
    	</div>
    	<div class="section">
    		<h2>Content Header</h2>
    		<p>Lorem ipsum dolar sit emit...</p>
    	</div>
    	<div class="section">
    		<h2>Content Header</h2>
    		<p>Lorem ipsum dolar sit emit...</p>
    	</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; Me, Myself, and I. All Rights Reserved, suckas.</p>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats a good idea Dan, i like it.

    I have to say though, when im trawling through code i like to be able to keep my eye in one place rather than moving from left to right, it helps you find the element you're looking for quicker and thats why i align all my code down one line and then use comments to seperate sections.

    Each to his own though
    Last edited by elduderino; Oct 18, 2006 at 07:56.

  8. #8
    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)
    Quote Originally Posted by elduderino
    I have to say though, when im trawling through code i like to be able to keep my eye in one place rather than moving from left to right, it helps you dinf the element you're looking for quicker and thats why i align all my code down one line
    I do a combination of both. If a rule only has one or two properties, I'll do it on one line. Particularly with lists of navigation items that might each have their own individual style. If there's six links, I'd rather look at 6 lines of code where it's easy to compare corresponding values than say 18 or 24 lines.


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
  •