CSS coding standards and best practices for beginners

Here is a list of CSS coding standards and best practices for beginners as well as for any CSS developer.

CSS  coding standards and best practices for beginners – Plan, plan and plan

Well it is said that programming is 90% planning.
Once you have a good plan, execution is pretty simple.
Before you start working on any project, interface, screen or element.

  • Take a deep breathe
  • Review all the designs/screens, try to find similar patterns.
  • Ask questions, how many browsers and devices we are targeting.
  • How many elements are dynamically generated, consider accessibility and scalability.
  • Once you have all the answers, Write your markup first and make sure your page is accessible and makes sense without css.
  • Do the magic with css.

CSS coding standards and best practices for beginners – Clear you concepts

  • Know the difference between inline and block level elements.
  • Understand the box model, avoid adding padding and borders to element which is given a width if you are targeting ie7 users.
  • Be sure when to use float and positions.
  • Know the difference between ID and class

CSS coding standards and best practices for beginners – Formatting

  • Make sure your CSS file is readable.
  • Comment, group and indent using a common standard.
  • Keep it consistent.
  • Use an empty line between style definition and a space after colon.
  • Make use of short hand where possible.

CSS coding standards and best practices for beginners – Make use of a Reset file

  • Lots of HTML elements have a pre-defined properties and this causes in-consistencies in different browser.
  • If is recommended to reset all elements to eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc.
  • You can use the most popular reset file by Eric Meyer or write you own.

CSS coding standards and best practices for beginners – Organize

Organize your css file from top to bottom so that it becomes easy you or your team member to find part of your code. A typical order that I follow is follows:

  • Reset
  • Global
  • Patterns
  • header
  • navigation
  • Content
  • Sidebar
  • Browser specific fixes/hacks
  • Media Queries

CSS coding standards and best practices for beginners – Combine or group elements
Group common patterns and selectors to avoid duplicate code

CSS coding standards and best practices for beginners – Make use of common class patterns to avoid code bloat.

CSS coding standards and best practices for beginners – Use multiple class

Make use of multiple class names to control state instead of repeating code

CSS coding standards and best practices for beginners – Property order

While there is no hard and fast rule but it is always wise to Group like properties together, especially if you have a lot of them. A baseline that can be followed for property order is:

  • Display
  • Positioning
  • Box model
  • Colors and Typography
  • Other

Another method that is often used is order them alphabetically

CSS coding standards and best practices for beginners – naming convention

  • This may not sound important to a newbie but trust me this makes a lot of sense.
  • Meaningful class names and ID’s give so much life to your code.
  • Use class name that is contextual to an element.
  • separate the class name with a hyphen and use small letters for naming class

CSS coding standards and best practices for beginners – Dont hack

CSS coding standards and best practices for beginners – Validate your CSS

Validate your CSS using of the following tools to check for errors

  1. http://jigsaw.w3.org/css-validator/
  2. http://csslint.net/

CSS coding standards and best practices for beginners – Use proper units

  • Do not mix your code with em’s, px and percentage.
  • Use percentage for columns if you are working on fluid or responsive design
  • Make sure you understand em’s before you are using it
  • Use ‘px’ for font sizes, border, box shadows etc.
  • Use ‘pt’ if you are writing a print style sheet
  • Here is a very good article to understand CSS unit better

CSS coding standards and best practices for beginners – Avoid extra selectors

Adding unnecessary selectors makes the CSS file heavy and affects performance.

CSS coding standards and best practices for beginners – Provide fallback

You should provide a fallback if you are using advanced CSS3 properties which are still not supported by major browsers

CSS coding standards and best practices for beginners -Make sure to add vendor prefixes

While most of the latest firefox and webkit browsers support css3 properties, there are still older versions of these browsers which depend on vendor prefixes. So make sure you add the vendor prefixes for better experience.

CSS coding standards and best practices for beginners – drop unit type for 0

  • Do not put units for property value ‘0’.
  • Lot of experienced develop analyse your code based on this knowledge

CSS coding standards and best practices for beginners – Images

CSS coding standards and best practices for beginners – preprocessors

CSS coding standards and best practices for beginners – References and resources

The content has been from some of the below mentioned links

One thought on “CSS coding standards and best practices for beginners”

  1. Pingback: Web | Pearltrees

Comments are closed.