Tips for CSS

Introduction:

In this article I will explain you some tips for writing style for your application.

1. Place CSS in a Separate File

When you're working with CSS code you should always use an external file to load CSS from. It's very important to have your project files well organized and this helps you doing that.

2. Reset CSS

You need to reset CSS because as you've seen, browsers assign different styles to some elements and the best approach is to clear (reset) all styles from the beginning. In this way you'll be sure you made a good start.

Here are few commonly used reset.css frameworks - Yahoo Reset CSS, Eric Meyer's CSS Reset, Tripoli

You can create your own reset method. You can start by resetting the elements you think you'll use most like in this example:

3. Use Meaning Full Class Name

Try to use meaning-full class name.

Use 

4. Difference between Class and ID

In CSS, class is represented by a dot "." while id is a hash '#". In a nutshell id is used on style that is unique and don't repeat itself, class on the other side, can be re-use.
 

  

 5. Use Inline And Block Elements Correctly

This mean it's recommended for you as a designer/developer to use the block elements like "div" when you need a block element and not use a "span" element for example with "display: block" style. This is available also for the inline elements like "b" or "I", they must be used as inline elements when possible.

6. Don't repeat yourself

You should use the cascade and avoid repeating code. It's more than just using common classes, you could make good use of the heritance, for instance, so properties that can be set in the parent should be left there. Also you could use the same set of properties for multiple elements (separating multiple selectors using commas).

Use

Instead of

  

7. Use DIV instead of TABLE Element

TABLE contents are locked within a cell. DIV are light weight compare to TABLE. DIV provide more flexibility than TABLE

8. CSS Font Shorthand

Declare different property of Font in a single line.

Use

  

Instead of

Also declare the entire border (left, right, top and bottom) in a single line

10. CSS Background Shorthand

Declare different property of Background in a single line.

Use
 

Instead of

    

11. Avoid declaring CSS class for all elements for TABLE

Try to avoid declare CSS class for each TR, TD etc element of a TABLE

The HTML

  

The CSS

  

12. Vertical Centering Text with Line-Height

If you want to vertically center text within a containing block whose height is fixed, simply set the line-height of the text to be the same as the height of the containing block

The HTML

  

13. Margin Auto

Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, "margin: auto" will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block

14. Link Style Order

When setting CSS on the different link states, the link states need to be set in a particular order