Skip to main content

How to create clean and efficient CSS

In a typical workday, I deal with dozens of yahoo stores and very often I have to tweak, fix, or change CSS used by these stores. While some stores have very clean and easy to follow style sheets or CSS definitions, the vast majority of stores I've seen seem to include complete hack jobs, style sheets put together completely haphazardly, or as an afterthought. While working in such a store, the idea came to me to turn my gripes into a post. So the following is my list of dos and don'ts of good CSS or style design.

1. Externalize your style sheets. This means to save your style sheets into one or more css files, and link to them using the <link rel="stylesheet" type="text/css" href="/lib/yourstoreid/yourstyle.css"> notation, or in Editor V3.0, you can use the LINK operator.

2. Combine your style sheets into as few files as possible. Nothing worse than trying to wade through 6, 8, 10 or more different style sheets to find the color of a link for example. If you must use multiple style sheets, at least give them meaningful names. Style1.css, style2.css, mystyles.css, etc. are NOT meaningful. Item.css, section.css, home.css ARE meaningful.

3. If you are using Editor V3.0, you can put your own CSS stuff in the css-edits.css file. You can find it on the “Contents” page.

4. Avoid using inline CSS, that is, putting styling in the style attribute of tags, especially within RTML. Imagine trying to find something like a “style: font-size: 20px” inside one of the store templates if you don't know where it is...

5. Use IDs for elements you know you will only have one. For example, chances are you will only have a single left navigation, so give it an ID, not a class. For instance, <div id="navbar"> ... </div>. Use classes for similar things of which there are more than one on the page.

6. Don't repeat classes without a purpose. So many times I've seen navigation links like this:

<a class="nav" href="index.html">Home</a>
<a class="nav" href="info.html">Info</a>
<a class="nav" href="contents.html">Contents</a>

Instead, do something like this:

<div id="navlinks">
<a href="index.html">Home</a>
<a href="info.html">Info</a>
<a href="contents.html">Contents</a>

You can now easily define the styles for these links like this:

#navlinks a:link, #navlinks a:visited { ... }
#navlinks a:hover { ... }

7. Start from top to bottom. Define the main styles first, and refine them as you get specific. For example, define your default font like this:
body, * { font-family: arial, Helvetica,sans-serif; font-size: 10pt }
Then, as you define your other elements, you won't have to define the font again, only if you needed to override one or more of the global styles (like font-size, for example).

8. This is related to the previous point: don't redefine the same styles more than once. If you defined your default font to be Arial, don't define it again for, say the <a> tags. This makes things complicated. Remember, CSS was meant to make life easier.

9. Don't use !important, only if you absolutely must. I often see people use !important to fix something, but it's a lazy way of fixing styles. True, if you slap !important on a style definition, it will take precedence over anything else defined for that style up to that point. But once you have your style sheet or style sheets littered with !important lines, trying to fix THAT later can be a nightmare.

10. Don't use chained styles with IDs, for example: #main #maintable #navbar. IDs are unique by definition, so it's perfectly enough to just reference the ID by itself. When you chain IDs like in the above example, you are establishing a stronger rule that says, your style should only apply if #navbar is somewhere within #maintable, and #maintable is somewhere within #main.


Anonymous said…
Great tips. I can certainly change some of things I've been doing with my CSS. Thanks for sharing.
Unknown said…
Just a note:
"body, * { font-family: arial, Helvetica,sans-serif; font-size: 10pt }"
can bewritten as body, * { font: 10pt arial, Helvetica,sans-serif; }
Anonymous said…
Good post. Most people don't realise the amount of benefit that can be gained from good clean CSS. It can help with SEO and with page loading times. I follow most things on your list, but you've highlighted a few i'm gonna definitely take on board.

Good stuff. thanks.
Aaron Pyon said…
I accidently deleted "css-edits" there any way to restore or recreate it?
Sure, click on "Contents", then "New", enter css-edits as the id, select "css" as the type, and click Continue.
Anonymous said…
Well written article.

Popular posts from this blog

CPR for a Yahoo Store on Google's Supplemental Index

Recently a client of mine came to me and said that most of his store pages disappeared from Google, and he did not do anything to make this happen. I was a bit skeptical, so I went to Google, did a search on his store, and sure enough, there were only two pages indexed, his home page and his site map (ind.html) page. The rest were in the supplemental results, which means that Google thought the rest of the pages were not much different than these two pages. When I looked at the supplemental results, the little excerpts under each link were exactly the same, and I also noticed that what Google showed under each result was actually text from the ALT tags of the header image. I looked at some of these pages in my client's store, and they were actually different. This was a bit puzzling, but then I thought perhaps Google saw that the header and left navigation was the same throughout the site (which is pretty normal), but that the text that made each page different was too far down ins

What to expect when your redesign goes live

At Y-Times we roll out new designs, redesigns and other major upgrades to Yahoo stores on a fairly regular basis. Some of the main questions our clients ask are how to prepare for a roll-out and what to expect in terms of SEO and conversions when the changes go live? For any functional Yahoo store how well the site ranks and how well it converts are probably the two most important metrics. Since pretty much ANY change you make to any page can potentially alter either or both of these metrics, merchants may understandably feel nervous about far reaching alterations to their sites. However, when those functionality and design changes and additions are done right, there is really very little to fear. First off, what does it mean for a design or redesign to be "done right?" From the technical stand point, search engines look at the underlying structure of your site (the HTML, and increasingly also the CSS and JavaScript code) to try to extract information and meaning from i

Smaller is Better

You often hear the phrase "bigger is better". Sometimes it's true but not when it comes to JavaScript or CSS code in your Yahoo! Store pages. If you include JavaScript code or CSS either as linked files (the preferred method) or embedded inside your pages (obviously not preferred), making these files as small as possible should be your goal. Why? This is no rocket science: smaller files mean faster page loads = happy customers. Ok, so what bloats JavaScript code? In general, white space (tabs, carriage returns, non-used spaces), comments, and the actual code, such as variable and function names. You have control over all of these, however, if you don't use white spaces, carriage returns or comments, it will be immensely difficult to understand and modify your code. And not just for others, you too. There are many commercial JavaScript compression tools around, but I've been using this handy and free utility: This little utilit