This article provides some tips for a 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 do that.
2. Reset CSS
You need to reset CSS because as you've seen, browsers assign various styles to some elements and the best approach is to clear (reset) all styles from the beginning. In this way, you'll be sure to have made a good start.
A few commonly used reset.css frameworks are Yahoo Reset CSS, Eric Meyer's CSS Reset and Tripoli.
You can create your own reset method. You can start by resetting the elements you think you'll use most as in this example:
3. Use a Meaningful Class Name
Try to use a meaningful class name.
Use
Instead of
4. Difference between Class and ID
In CSS, a class is represented by a dot "." while id is a hash '#". In a nutshell id is used on a style that is unique and doesn't repeat itself, however a class can be re-used.
5. Use Inline And Block Elements Correctly
This means 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 a "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 inheritance, 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 is lightweight compared to a TABLE. DIV provides more flexibility than TABLE.
8. CSS Font Shorthand
Declare multiple properties for a Font in a single line.
Use
Instead of
9. CSS Border Shorthand
Declare multiple properties of a Border 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 multiple properties of a Background in a single line.
Use
Instead of
11. Avoid declaring CSS class for all elements for TABLE
Try to avoid declaring a CSS class for each TR, TD and so on elements 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 width is declared for the element. This also means that to apply a margin: auto to inline elements, the display first must be changed to a block.
14. Link Style Order
When setting CSS on the various link states, the link states need to be set in a specified order.