Recipe 1.9. Adding Comments Within CSS

Problem

You want to organize and keep track of the CSS with comments.

Solution

Add /* and */ anywhere in the styles to show the start and end of a comment.

/* This is a comment */
a {
 text-decoration: none;
}
/* This is also a comment */
h1, h2 {
 font-size: 100%;
 color: #666666;
}

Discussion

You may look at old code and not remember why you took certain steps with that code. Comments can explain and organize code to help with reviewing at a later time. Comments also help those who don't create the original code understand its purpose. Browsers ignore content that appears between the /* and */ .

As you break up your code by section, comments come in handy in identifying each section such as header, footer, primary navigation, subnavigation, and so on. Comments provide a great way to test your web pages. If you're not sure about a style rule or how it affects the page, add a comment around the style to turn it off.

/* 
a {
 text-decoration: none;
}
*/

The style rule for text-decoration won't take affect with the comments taking it out of circulation. Unless there are other styles for a , the underline appears under links until the comment is removed.

Recipe 1.10. Organizing the Contents of a Style Sheet

Problem

You want to know how effectively to organize contents within a style sheet for easier management.

Solution

Managing CSS can be accomplished by grouping common visual elements of a web page together. The following list shows a suggestion of the order of items grouped in a style sheet:

Elements (h1h6, p, a, list, links, images)
Typography
Page layout (header, content, navigation, global navigation, subnavigation, sidebar, footer)
Form tags (form, fieldset , label, legend)
Content (post, events, news)

Here are the comments from three style sheets with each organizing the CSS differently:

/* Typography & Colors 
------------------------------------ */
[css code ]

/* Structure
------------------------------------ */
[css code ]

/* Headers
------------------------------------ */
[css code ]

/* Images 
------------------------------------ */
[css code ]

/* Lists
------------------------------------ */
[css code ]

/* Form Elements 
------------------------------------ */
[css code ]

/* Comments
------------------------------------ */
[css code ]

/* Sidebar
------------------------------------ */
[css code ]

/* Common Elements 
------------------------------------ */
[css code ]

Discussion

What works for one person may not work for another. This setup from the solution is a recommendation based on a combination of experience and best practices that should work best for small- to medium- size web sites.

For different projects and your own personal preference, you may find a way that works better for you. Visit your favorite web sites and review their style sheets to study how they're organized.

Recipe 1.11. Organizing Style Sheet Files

Problem

You want to effectively manage and organize your CSS files.

Solution

Manage CSS files by placing them in their own directory. The following CSS files live in their own css directory.

/_assets/css/print.css
/_assets/css/screen.css

For a large or complex sites, rather than having one CSS file for each type (print, screen, and so on), break out CSS by function. These are in the same directory as the simple version.

/_assets/css/layout.css
/_assets/css/color-imagery.css
/_assets/css/type.css

Then, in the HTML file, link to these files by placing the following in the head element :

<link rel="stylesheet" type="text/css"

media="print"


href="/_assets/css/print.css"

/>
<link rel="stylesheet" type="text/css"

media="screen"


href="/_assets/css/screen.css"

/>

For the large sites, the screen.css would include methods for importing the separate CSS files that dictate the design for screen delivery. Here's what the screen.css would look like in this solution:

/* import style sheets */
@import url("/_assets/css/layout.css");
@import url("color-imagery.css");
@import url("type.css");

Discussion

If you are using external style sheets (Recipe 1.6) for smaller or easily managed sites, breaking out style sheets by media type (print, screen, and so on) does the job nicely .

Taking this approach with larger or more complex site can make it difficult to search the files to see how the CSS is set up.

Currently, there isn't a standard or recommended approach for managing CSS- related files. Like the previous recipe, you may discover another approach that works better for you. Experiment with file and content organization until you find one that works well.

Flylib.com

Category list

Similar pages

Recipe 1.9. Adding Comments Within CSS