Log in

No account? Create an account
Previous Entry Share Next Entry
Help with google-fu
CSS stands for "Cascading Style Sheets", and are a technique for applying "styling" (i.e., how things look) to web pages.
I want to find resources for best practices in writing CSS files -- essentially, a formatting style guide for CSS files.

Obviously, "CSS style" doesn't work for finding what I want on Google.

Any suggestions?

  • 1
That helped, but most of the best practices I found are things we already do. Which makes me suspect that finding suggestions on how to deal with the problems we currently have is going to be difficult.

I'll also try "CSS coding standards", and see if that gives me anything useful.

Best practice that I've found helpful is the following, which I sythesized from a couple of different sources:

A site design should have its own stylesheet, a global.css. This file contains styling for elements that are on every page (or at least 90% of pages), such as a navbar, footer, main content section, and the like. Each page should also get its own stylesheet for anything else. Try to store .css files in a css/ directory in the same directory location as the page (i.e., /articles/splines/reticulated.html should have a /articles/splines/css/reticulated.css file if it is needed). Some subsystems used on different pages might need their own css file, too (such as a mortgage calculator, say).

Within the css file, be as non-specific as possible in your declarations (e.g., use #content instead of div#content). Group declarations by HTML structure, in increasing order of CSS selector specificity. Don't change indentation for each selector, even if one is vastly more specific. Each attribute-value pair gets its own line. Use rgb() for color declaration. Within a selector block, first declare attributes related to its positioning, then its layout, and finally its decorations. For example:

#content .other-stories {
  position: absolute;
  left: 20px;
  bottom: 30px;

  width: 640px;
  padding: 12px 10px;

  background-color: rgb(200, 200, 0);
  color: rgb(0, 0, 200);
  font-family: Arial, Verdana, sans-serif;

Now, as for best practices regarding the actual use of CSS, well, I've got more than this margin will contain. Mostly because the one problem that I see over and over again is the use of floats to achieve layout. 90% of all problems that people have using CSS for layouts stem from this mistake. The thing to do that works with no surprises (but is harder to understand) is to use relative and absolute positioning to attain a layout.

We have a global stylesheet, called "site.css", which contains styling for elements that are on every page, including navbar, footer, main content, and the like. We don't have page-specific stylesheets, except for a couple of pages which deviate significantly from the main style (such as a report in which virtually everything is explicitly absolutely positioned because it is designed to be printed as well). The toolkit we are using specifies a standard place to put CSS files, which we use.

We try to be as non-specific as possible, use consistent indentation (all selectors begin on the left margin, multiple selectors for a single declaration block on separate lines, braces on left margin, property-value pairs indented). We use #RRGGBB for color declaration.

Of all the best-practices pages I've seen, we either (a) do what is suggested, or (b) knowingly and deliberately don't do what is suggested, consistently. So 90% of the pages haven't been able to help me with my current problem.

Your comment about "Group declarations by HTML structure, in increasing order of CSS selector specificity" intrigues me, and I would like more elaboration.

Here's my problem today: While looking at an element which did not have the width I wanted, Firebug informed me that the element was styled by these declarations

.defaultform label { //Site.css (line 472)
.defaultform label { //Site.css (line 467)
.defaultform label { //Site.css (line 420)

I'm looking for best practices which will help prevent the obvious problem with that, namely multiple declarations in the same file for exactly the same selector.

OK, here's the gist of my sentiment that piqued your interest.

CSS styles generally map one-to-many onto trees of HTML elements. For instance, your .defaultform class probably deals with an HTML form, which can be thought of as a HTML tag tree. So, you have a top-level .defaultform tag block. A typical HTML form might be:

<form action="" method="post" class="defaultform">
		<label class="text">
			<input name="name" value="" maxlength="255"/>
		<label class="email">
			<input name="email" value="" maxlength="255"/>
		<label class="number">
			<input name="age" value="" maxlength="255"/>
	<input type="submit" value="Submit"/>

So, a reasonable CSS structure by the my guidelines would be:

.defaultform {
	display: block;

	border: 0;

.defaultform fieldset {
	border: 1px solid blue;

.defaultform fieldset label {
	font-family: Arial, Verdana, sans-serif;

.defaultform fieldset label.number {
	color: red;
.defaultform fieldset label.number input {
	font-family: monospace;

.defaultform fieldset label.email {
	color: blue

Note how the .email class, while more proximate in specificity to the .number class, is a different "tree structure" than the .number class and its .number input subspecifier.

This doesn't solve the problem of someone creating a new .defaultform class somewhere in the file (which can be a problem with one-off specifiers who have no descendants). But this kind of organization does follow logically (usually) from the HTML.


formatting style guide for CSS sheets

in google.

it will bring up several include:

HJave fun or not.


  • 1