Organized CSS

**mathletics** · Oct 17, 2006 11:58

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?

**Ghosty** · Oct 17, 2006 12:37

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.

**sludge01** · Oct 17, 2006 17:09

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.

**Dan Schulz** · Oct 17, 2006 17:48

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.

**DaveWoods** · Oct 18, 2006 03:38

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

**Dan Schulz** · Oct 18, 2006 04:46

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>

**elduderino** · Oct 18, 2006 04:54

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

**Tyssen** · Oct 18, 2006 05:01

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.

User Tag List

Thread: Organized CSS

Thread Tools

Display

Organized CSS

Bookmarks

Bookmarks

Posting Permissions