CSS tips which every beginning developer should know about?

Question

I'm compiling a list of the most important things beginning web developers should know about Cascading Style Sheets.

I'm looking for good practices, commonly misused or misunderstood concepts or other simply useful tips for newbies. For example:

• Use external stylesheets rather than using inline or embedded CSS separating content from the style.
• Do a reset CSS to remove browser inconsistencies (see here)

What other important advices should my list contain?

Thanks!

Answer 1

Make sure your HTML is valid before you ask yourself why your CSS isn't working in every browser.

Answer 2

Don't create a class for every element. Create one for each type.

I have an application I've inherited at work, and rather than style all the buttons with a class, each one has its own descriptive class, which means I have to change 20+ classes to change what the buttons look like.

Also, name your classes independently of their actual style, e.g. .leftcolumn rather than .greenleftcolumn etc.

Answer 3

• Understand the layers of the box-model.

  Note that paddings are cumulative, while margins collapse (i.e. the distance between two adjacent boxes is the largest of the two margins - not the sum of both margins.)

• Remember to use a doctype that triggers standards mode. Note that the doctype must be the first tag - a comment or XML-declaration before the doctype may (or may not, depending on the browser) trigger quirks mode.

Answer 4

You could get some answers from this post: http://stackoverflow.com/questions/249357/are-there-any-css-standards-that-i-should-follow-while-writing-my-first-styleshee

Answer 5

Do tests in all relevant browsers at short intervals right from the beginning. Ironing things out afterwards is a lot harder and more time-consuming.

Answer 6

Install Firebug

I did not understand the box model (or even the DOM) properly until I took a look at Firebug's box model diagram. It's very useful to know what's going on with an element.

Comment regularly

It's not nice going over code again to find that actually, you can't remember what this particular class does, or where it's used.

@-rules

@import

I import stylesheets all the time. A good way of doing things is to make a stylesheet for a specific type of layout, that imports a reset, a global typography sheet, etc.

@media

While you can specify different stylesheets for different mediums (using media="screen" in the link) @media can be useful for short declarations.

Learn the typical tricks

The tricks we all end up using to get something right. These can include:

• The infamous clearfix
• CSS Spriting (also here)
• Faux columns
• Sliding Doors
• Multi-Column Layouts
• Scalable text sizing (also here) (em, %)
• Seriously, you have to link to the ALA CSS Library

Try some CSS frameworks

Probably not recommended for beginners but for intermediate-advanced programmers looking at other people's code can be very useful. Most are grid related, but I'd recommend YUI and 960.

Answer 7

There are certainly hundreds of tips that could go here, but the biggest one I can write is to be prepared to deal with Internet Explorer 6. IE6 has roughly 20% market share, so it can't be ignored. However, it also is probably one of the biggest problems for web developers.

I develop first for Firefox, Safari, Opera, and Chrome (which are all standards-compliant browsers). Once it's working with them, I move on to IE7, and finally IE6. Here are some specific tips that might help you:

• I validate both my XHTML and CSS.
• I keep my designs simple, even the complicated ones.
• I don't use hacks that invalidate my CSS.
• I use a JavaScript framework/library (I like MooTools, but you'll get a lot of votes for jQuery, Prototype, YUI, Dojo, and many others) that handles most of my cross-browser JavaScript problems.
• I progressively enhance my pages so that they first work without JavaScript and then add all the bells and whistles.
• For some of the double margin problems, I use display:inline;
• If I absolutely have to, I use a separate stylesheet, though I'm finding I have to do this less and less.
• I try to avoid transparent images in my layouts. If I absolutely need them, I use a PNG8 with alpha transparency, which IE6 actually does support.
• To get at the min-height problem, I do the following:

This for IE6, which incorrectly interprets height as min-height:

.classNameHere {height:300px;}

This for for everything else:

div>div .classNameHere {min-height:300px; height:auto;}

Other general tips would include:

• Always use external stylesheets in production.
• Use CSS sprites.
• Use a script to combine and minify your different stylesheets
• Use CSS images for any layout images, use an HTML img tag for images that are a part of the content.
• Use the YSlow tool and Firebug.
• Name your CSS classes and IDs after their purpose, not their appearance. Appearance can and will change, so after a few edits, .redColumn isn't going to tell you anything. .sidebar would be more appropriate.
• Comment and group similar classes and IDs. I generally group by layout, forms, typography, menu, etc.
• Learn by copying. If you see a design you absolutely love, try to replicate it (for learning purposes only). It's great practice and you'll learn a lot. CSS Zen Garden is a great place to start.
• Design your layouts so that they are flexible. Look at your design at different resolutions. Readers can also resize text, so see how text resizing affects your layout. Plan accordingly.
• Don't get discouraged. It will take some time and practice before you really start to get the hang of it.

Answer 8

Definitely validate your HTML before moving forward with your CSS.

Use direct links (http://example.com/css/style.css) instead of local links when importing your CSS.

Answer 9

CSS Selectors

Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets. CSS HTML selectors are simply the names of HTML tags and are used to change the style of a specific tag:

td {
    font-size: 0.8em;
    color: green;
}

Properties

For each selector there are properties inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

Values

A value is given to the property following a colon ":" and semi-colons ";" separate the properties.

Ways to apply CSS to HTML

There are three different ways to apply CSS to HTML.

In-line

In-line styles can be assigned straight into the HTML tags using the style attribute:

 <p style="color: blue">example</p>

Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.

...
<html>
<head>
   <title>Example Page</title>
   <style type="text/css">
      h1 { color: green }
      h2 { color: red   }
   </style>
...

External

External styles are used for the whole, multiple-page website. There is a separate CSS file:

...
<head>
   <title>Example Page</title>
   <link rel="stylesheet" type="text/css" href="web.css" />
...

The best-practice approach though is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Answer 10

I didn't know about this fact until today, and I was thinking exactly the opposite!

That, Browsers evaluate the selector rules from right to left.

Quote from Steve Souders's blog.

Here’s a much more expensive selector: A.class0007 * { }. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.