1.) Always start with a CSS Reset:
This is advised to start with a CSS reset because it avoids browser inconsistencies. As we know Browsers may render the HTML and CSS received according to its native rendering engine, which may use different rendering approaches. In other words different browsers have different default settings for page elements. If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its always recommended to "reset" the browser's styles.
Therefore reseting these styles is an effort to keep web pages looking as consistent in different browsers.
The most popular styles reset is probably Eric Meyer's.
Therefore reseting these styles is an effort to keep web pages looking as consistent in different browsers.
The most popular styles reset is probably Eric Meyer's.
2.) Indent your css rules : .tile{ color:#ffffff; float:left; padding:5px; margin-left:3px; margin-bottom:7px; } The above non-indented code is not so good for scanning. Indenting the rules to makes scrolling through the file and finding the proper css classes and ID’s easier, i.e it gives the ease of scanning. Among the two codes below you can see which one is better to scan. .tile{ color:#ffffff; float:left; padding:5px; margin-left:3px; margin-bottom:7px; } 3.) Alphabetize:
4.) Comments: Comments will not just help you in keeping your style structured but by commenting your block of codes also helps in easier scanning. You can easily find out where are your styles for header , footer, navigation bar , side bar , main content etc are residing in your document.Commenting is also going to be a great help for your clients as well when you pass on your code to them . /********** HEADER code here **********/ 5.) One Rule = One Line … Multiple Rules = Multiple Lines: Do not merge multiple rules in a single line. 6.)Prefer ShortHand Code: use shorthand codes. Example instead of using .tile{ margin-bottom:7px; margin-left:3px; margin-right:5px; margin-top:6px; } You can use: .tile{ margin:6px 5px 7px 3px; } 7.) Create and use a table of contents: This obviously will ease the search for an item in your CSS code. /***************************************************** 1. HEADER code 2. NAVIGATION code 3. CONTENT code 4. SIDEBAR code 5. FOOTER code *****************************************************/ |