After researching and developing some part of my project I am in agreement with some researchers and web developers that CSS practices help us to avoid design faux pas easily. I have tried to enumerate some of those, as seen below:-
1. The code should be compact and legible. This is important for the future, as it is easier to maintain and development is quicker, when the developer wishes to enhance the functionality of the page and is not incapacitated by seeing the irrelevant and scattered code written. The code or CSS rules can be written ‘All on one line’ or ‘Each style gets its own line’. And to me the latter appeals more as for example:
1. .someDiv {
2. background: red;
3. padding: 2em;
4. border: 1px solid black;
5. }
Where ‘.someDiv’ is a class name and the CSS rules are enclosed between the curly brackets respectively.
2. Another advantage of creating legible and compact code is it remains consistent throughout the webpage no matter how many pages are developed for the website. Later the developer can start using their own “sub-language” of CSS allowing them to write the code easily and speedily.
3. Another CSS tool that speeds up production is CSS framework. This is particularly important as it not only increases production but also helps avoid common mistake. And gain best suited browser-compatibility. Also following it one can develop a clean well-structured and complete code. Some developers scoff at this tool but it is a great help. However, CSS framework is a great tool to use for developers, who know how to use them intelligently. But for beginners it can be quite confusing.
4. In order to avoid browser inconsistencies in terms of height and width, font-sizes, margins etc, it is a good practice to reset these. This one can do by using CSS rules of reset or having popular reset tools such as MeyerWeb, Yahoo’s developer reset incorporated. But I used my own reset CSS rules. The reset allows the layout to appear consistent across all browsers.
5. It is a good to organize the Stylesheet in a Top-down framework and to comment each section appropriately. I followed this approach for the layout of my pages. An example is as follows:
1. Generic classes (body, a, p, h1, etc.)
2. #header /***header***/
3. #nav-menu
4. #main-content /***main content****/
6. It is a good practice to combine elements that share common properties instead of re-writing same code repeatedly also in this way elements can have their unique properties as and when deemed fit.
1. h1, h2, h3 {font-family: tahoma, color: #333}
and
h1 {size: 2.1em}
7. It is advantageous to create the HTML document first and then decide the Layout style in CSS. Writing the HTML document first visualizes the entire page and allows one to consider CSS holistically, top-down manner.
8. Use the correct doctype (Document type declaration) as that matter as to whether or not HTML document and CSS will render in the browser properly. The doctype informs the validator what version of (X)HTML is used and appears atop in every webpage. I have used the doctype "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> this is compliant with XHTML 1.0 transitional version across various browser platforms.
9. CSS can be shrunk by using shorthand when crafting elements like padding, margin, and font, i.e., one can combine styles in one line as for example.
1. #crayon {
2. margin-left: 5px;
3. margin-right: 7px;
4. margin-top: 8px;
5. }
It can all be stated in one line like
1. #crayon {
2. margin: 8px 7px 0px 5px; // top, rightright, bottombottom, and left values, respectively.
3. }
10. It is imperative to understand the difference between Block and Inline elements to be able to force the correct CSS rule for the (X)HTML element. Generally all Block elements like p, h1, h2 and h3 span the entire width of the available space but Inline elements take only as much space as they need, and do not force a new line after usage. Some block tags are div, h1...h6, p, ul, li, table, blockquote, pre, form and common inline tags are span, a, strong, em, img, br, input, abbr, acronym.
11. In order to maintain consistency, increase legibility and avoid repetition a handy tool is that CSS rules must be written in an alphabetic order.
1. #cotton-candy {
2. color: #fff;
3. float: left;
4. font-weight:
5. height: 200px;
6. margin: 0;
7. padding: 0;
8. width: 150px;
9. }
12. CSS compressors remove line breaks, white spaces and combine elements. It results in increased upload speeds and reduced file size, although performance is enhanced legibility of CSS file in terms of reading and editing it later is compromised. Two good industry tools to shrink CSS are CSS Optimizer and CSS Compressor.
13. To center layouts on browser designers must use ‘margin: 0 auto;’ //top, bottombottom – and left, rightright values, respectively under div, paragraph or other elements in your layout.
14. A must have tool for all developers is ‘Firebug’. This is a FF extension and helps to inspect, modify and edit CSS in real time. Firebug also helps to debug JavaScript, inspect HTML and find errors.
15. It is recommended for the novice designers to use text-transform to format the site. This property in header style is shown as: text-transform: lowercase; Then all the letters in the header will be lowercase by default.
16. It is a good idea to check for errors in the CSS or HTML code by using CSS Validator (http://jigsaw.w3.org/css-validator/) and markup (http://validator.w3.org/) and then rectify them quickly. The validators have spot errors normally as missing a closing div tag or a semicolon (“;”) in CSS property.
17. Many different web browsing systems (laptop, mobile, PDA) show that ems (em) are increasingly becoming the default for font size measurements, because of their increase affinity and flexibility to scalability. Whereas pixels (px) are a static way to define font sizes. So, many designers are defaulting to pixel based layouts because of browser zooming capacity.
18. It is worthy to use list items to structure format and it is also easy to modify the structure of the CSS property (I used listing option in getting the feedback input). List help in creating navigation menu and things of the sort. Novice designers land up using div for each element in the list as they are not aware how to utilize the list properly.
19. Another mistake that beginners make is adding extra selectors to CSS elements. This is easy to do but it clutters and complicates the CSS style sheet. An example of this is: body #container .someclass ul li {....}. Here.someclass li would have worked.
20. Because of heterogeneity in rendering properties browsers render pages differently. And an important difference between them is how rendering conforms to margin and padding. In order to limit this variance developers can use a simple code with global reset like * {margin:0; padding:0;} (I used this in my layout CSS file to conform to all browsers while rendering my page). 21. Another good option is to develop the layout code separately (multiple stylesheets) at start and then combine them into one file. This reduces the number of HTTP requests to one. Also the entire file is cached at the user’s computer, so, data viewing and editing is faster.
22. Another practice that can be indulged in but after some proficiency is migrating to Object Oriented CSS (OOCSS). This could be bit of a challenge for the beginner to grasp instantaneously. But the principles of OOCSS are of separating different aspects of CSS into more logical sections, organizing CSS rules into more modular and reusable.
23. When checking for error while debugging with XHTML validator developers need to note the missing close div tags.
<1311:6502>
Reference:-
