Code Better with Google HTML CSS Style Guide

Did you know Google has published an HTML CSS Style Guide to help new coders understand good coding practices? We all edit CSS, HTML in our blogs, but do we do it the right way? Do we know the basic styling tips which professional web developers and web designers follow?

It is important to code the right way, not only because the code looks great to visualize and understand, but also because it is very useful to detect bugs and errors easily and fix them quickly.

Google HTML CSS Style Guide

good coding practices

Did you know Google suggests you mark todo items in CSS with TODO!

Read the Google recommended HTML/CSS style guide. Press the toggle summaries button to read the whole document in one go – do spend the 10 minutes reading the whole document. I am sure everyone will have some useful tips to improve.

Although I have been experimenting with HTML/CSS for over a decade, here are some tips I still love and keep refreshing.

1. Indent by 2 spaces

Do NOT use the TAB button to do this.

  <div class="box">
    <p>Its all about style</p>

2. Use only lowercase

All uppercase is not a good coding practice.
color: #aabbcc;
In fact, it is better to shorten it further to
color: #abc;

3. Use CSS shorthand

To make CSS load faster.

padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;

should be better written as
padding: 1em;

4. Put declaration in alphabetical order

A super idea to find code faster.

.box {
  background: #fff;
  border: 1px;
  color: black;
  text-transform: uppercase;

h3 {
  color: #000;

Can you spot some more great coding practices in this simple code above?

  • Indent all block content
  • Add space after the colon
  • Add a semicolon at end of declarations
  • Separate selectors and declarations by new lines.
  • Separate rules by new lines

Always Test …

Do remember to use the HTML Validator to check your HTML and the CSS validator to check CSS code.

Google publishes several other styling guides which will be helpful for correct styling practices in other coding projects using C++, javascript, Python, Java, Shell, Lisp, AngularJS, Vimscript, etc.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.