Normalize CSS for standard website designs
Normalize CSS is the code that I use for every project I undertake, What Normalize CSS is a CSS which makes browsers render all elements consistently in line with the normal standards that are advised. The file was originally developed by Nicholas Gallagher and he has also been helping in keeping it updated. For those who are not aware Nicholas Gallagher has been acitively helping the community and one of the well known project is boilerplate. You can get the file from Github repository.
Safe font packs for web design
Font Family Groups | Adaptivethemes
Quick list of some handy font family groups (often called “font stacks”) for web design and Drupal theme development. Includes the three groups that come with Adaptivetheme starter theme and an example of how to set the font-family in your CSS.
These are going to be obsolete because of Google Web Fonts but nevertheless you can use them if you want to use safe web fonts.
Practice graceful degradation technique when designing in HTML and CSS
Techniques for writing HTML and CSS code
The developments in the arena of HTML and CSS are so fast it is tough to ensure that the latest techniques are used while creating the code. What further complicates things for designers and developers is that browsers are updated randomly and different elements of HTML and CSS code are implemented at a different pace.
Graceful Degradation is a term used for
writng code where the code is first written catering for the latest techniques and then fixing things so that they work for older technologies
. For example you would code your website so that users are able to browse the website properly using the latest browser like Chrome 16.0.912.63 m. Once the code is written later you would write the code so that the website is displayed properly using other browsers like Firefox.
The opposite of Graceful Degradation is Progressive Enhancement.
When practicing Progressive Enhancement code is written so that it displays properly even if basic techniques are supported
(for example write the code for Internet Explorer 5.0) and then gradually update the code to take advantage for the latest techniques (like for accessing the website using Internet Explorer 9).
Both the techniques are practiced by developers and designers as both of them have their own advantages and disadvantages. Which one do you practice?
Most common mistakes in CSS coding
Six Revisions comes up with posts that are pretty enlightening. Recently they did an interesting post on common mistakes in CSS made by web developers. Some of the issues that have been highlighted are
- Using Color Names Instead of Hexadecimal
- Redundant Selectors
- Redundant Properties
- Not Providing Fallback Fonts
- Unnecessary Whitespace
- Not Organizing Your CSS in a Logical Way
- Using Only One Stylesheet for Everything
- Not Providing a Print Stylesheet
You can read the full post here.
Making CSS code more readable
Some of the rules to follow when creating a CSS file
- Space between deceleration blocks - each block should be exasperated by space.
- Space between selector and curly brace
- Order CSS alphabetically
- Indent child elements
- use comments to separate logical sections of code
- use extra spaces and tabulations to separate single properties from their values
- Group elements with same properties.
Further reading:
- http://www.impressivewebs.com/css-readability
- http://woorkup.com/2009/10/18/5-rules-to-write-more-readable-css-files/
- http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
- http://net.tutsplus.com/tutorials/html-css-techniques/top-15-best-practices-for-writing-super-readable-code/
