Creating External CSS Style Sheets: Tips & Examples

Benefits of External CSS Style Sheets

Keeping your style sheets organized enough to find what you want, deal with errors and also load quickly, can sometimes be one tough job, especially when dealing with larger websites or CMS. Here, we’re looking at one or two tips that’ll help you get started with optimization thinking, helping you to work, debug and extend more efficiently.

Comments and Structure

Let CSS commenting help you to keep your external CSS layouts organized. Separate sections using comments (/**/) , for example:

/*———————————

-——» Section « ——–

-——————————–*/

/* =Section

-————————————————————- */

/* -> SECTION ———————> */

The order in which you should organize your sections is much discussed, one method is to start with the elements then ids and lastly classes while, at the same time, taking into consideration navigation and main structural boxes:

Elements / Structure / Layout / Navigation / Grids / Content (and content contextuals)

Look at what other developers are doing, learn from them, then create your own structure, one that works best for you.

Create a Set of Master Templates

As mentioned in the article block vs. inline, the default CSS of user agents may differ from browser to browser, causing inconsistencies in how a website appears in each.

Make yourself a set of external CSS layouts, i.e. masters, for basic resetting of styles like margins, padding and font sizes and for defining sets of single and multiple column grids for both flexible and static layouts.

Finally, test for browser compatibility. This will take some time, but when you’re done you’ll have bomb proof set of masters that you not only know inside out but are also going to save you loads of time.

@import

Use the import rules to include your masters:

• @import “master.css”; or
• @import url(threecolgridframe.css);

The @import rule must be at the top of the file, i.e. before the first block, when importing into an external CSS layout, otherwise it is considered illegal and will be ignored.

Although each website that you develop may differ depending on design and custom client requirements, your masters will give you a starting point that uses naming conventions and structuring that’s familiar to you.

Think Space

Keeping empty space to a minimum reduces file size and loading and parse times, reduce empty space using:

One Liners

Write CSS in one line and remove unused code before publishing.

Grouping

Group elements, classes and ids that share identical property values, separating each selector with a comma:

• h1, h2, h3 { padding: 0; } or
• #main h1, #sub h1 { border-top: solid 3px #eee; }

Shorthand

Use CSS shorthand properties:

• The color #666666 can be written #666
• With margins (and padding):
  { margin-top: 12px; margin-right: 7px; margin-bottom: 17px; margin-left: 0; }
  can be written
  { margin: 12px 17px 7px 0; }, values declared in a clockwise direction top, right, bottom, left

Keep HTML Uncluttered

Make use of inline elements - span, small, em strong, b, i - in contextual declarations:

• h2 strong { color: red; text-transform: uppercase; }

Make Use of Inheritance

Some elements of your website may stay consistent throughout, for example the font-family or text color.

Make use of inheritance defaults, defining properties like font-family and color for the whole site by adding them to the body element:

• body { font-family: arial, helvetica, sans-serif; color: #222;}

Contextual Styles

Make use of contextual styling. For example, create table row striping by creating a TR class with contextual TD:

• CSS:
  tr.stripedrow td { background-color: #f5f5f5; }
• HTML:

In contrasting website areas, white #content area with dark #sidebar, use contextual selectors for the H2 element:

• #content h2 { color: #222; }
• #sidebar h2 { color: #f1f1f1; }

Fishing out Layout Errors in External CSS

Finding errors or dealing with browser (in)compatibility problems can be a pain, use borders to highlight elements so that you can visually detect which areas need adjusting, a favorite of mine is to give everything a red border using:

• * {border: solid 1px red}

and for more complex layouts, varying border colors and/or styles per section:

• #header * {border: dashed 1px lime}
• #content div {border: solid 1px pink}

Place the “Fishing” code either at the bottom of your style sheet or create a special debug.css file to include after your main style sheet in the HTML (remove after testing is over ;)).

To Summarize

Keeping your external CSS layouts organized will help you, and the websites you develop, to work efficiently and productively. Don’t forget to take a look at advanced systems such as CSS minify compressors and CSS Frameworks.

Experiment and enjoy.

References

Images: Author, Screen Shot: Eric Meyer’s Reset