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>
</div>

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.

Comments

zparacha said…
Great tips. I can certainly change some of things I've been doing with my CSS. Thanks for sharing.
Wouter said…
Just a note:
"body, * { font-family: arial, Helvetica,sans-serif; font-size: 10pt }"
can bewritten as body, * { font: 10pt arial, Helvetica,sans-serif; }
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 said…
I accidently deleted "css-edits"...is 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.
Izellah said…
Well written article.

Popular posts from this blog

What is product-url anyway?

I keep having to field questions about the product-url field, and since it came up yesterday, I figured I'd try to clear up all the confusion about it.

So the name product-url suggests that whatever you type in there will become the URL of that product. Unfortunately, this is not the case, or rather, not in the intuitive way. The URL you enter there will be used as the URL for that product in Yahoo Shopping, on the built-in search results page, and on the shopping cart page, however, the URL you type in there DOES NOT actually change the physical URL of the page.
What is the URL of a page in a Yahoo Store? In any Yahoo Store built in the store editor, the URL of a page is the store's domain name and the page ID + .html. For example, in my store at www.ytimes.info, I have a page whose id is rtml101, thehrefore, the URL of that page is http://www.ytimes.info/rtml101.html.
Why would you want to change the URL? For SEO reasons, it is believed to be better to have a URL that includ…

Referencing Files from Yahoo! Web Hosting Securely

Now that hopefully most of you you have your stores secured (if not and need help, we offer a Secure Storefront Preparation Service here), you may have been faced with the question of how to reference files (images, CSS, JavaScript, src) if those files are stored on your Yahoo! store's web hosting account. Obviously using the old HTTP: method won't work, so something like this

< img src="http://site.ytimes.com/image.jpg" />

will not work. Nor can you simply change the http: part to https: , because as of this writing, only the store editor portion of a Yahoo! Store can be made secure, the web hosting portion cannot.

First a side note: if this sounds totally Greek to you because you have never heard of the web hosting part of your Yahoo! Store, you may have a legacy Yahoo! store account and not a Merchant Solution one. With a legacy store account you will only have the store editor part and no hosting account, in which case none of this applies to you.

The good n…

Really Quick Trick to Improve Page Load Speed of a Yahoo Store a Little Bit

With Google getting more and more aggressive about wanting web sites to be quick to load (particularly on mobile), we often find ourselves trying to find even the smallest of tweaks to nudge up that page speed score even if by a tiny bit. Here is a quick trick you can do completely on your own, without having to ask a developer, that will probably bump up your Google PageSpeed score by a couple of points.

First a short disclaimer: this trick is only applicable if you have enabled the Yahoo! Badge in your Store Manager, under Live Insights & App Gallery.

Before you start, you may want to check your site's Google PageSpeed (the home page is a good place to start) both as a benchmark, and also to get a glimpse at how fast (or slow) Google believes your site (or home page) is. Here is the link:

https://developers.google.com/speed/pagespeed/insights/
Ok, so if you did enable the Yahoo! Badge, your site includes a small Yahoo Live Store badge, much like this:


When you hover over the …