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 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 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.

  1. Pat says:

    What’s wrong with using the TAB key to create spaces?

  2. Karan Rawat says:

    Thanks but New coders and learners are also using w3schools and they are better.

  3. P. Chandra says:

    I also used to use TABS which indents upto 5 spaces, but if you have deep nesting at several levels, there might be lots of horizontal scrolling involved, or the text may wrap back. 2 spaces as standards seems like a good idea, creating moderate indent.

  4. P. Chandra says:

    True. W3Schools is a great resources, and if someone devotes adequate time, they can code well. This guides is a small cheatsheet and created by Google.

  5. Techlasers says:

    Nice CSS Style. I am a Web Designer. your Tips will help me Very Much. thanks for Sharing.

  6. siya sinha says:

    Thank you for good suggestion on ccs style sheet, these tips are very helpful to developers and designers.

  7. suman singh says:

    I would like to thank you for proving nice information going on ccs style sheet, these tips are good tips for learner.

  8. thomasb says:

    Hopefully new developers will quickly move away from w3schools.

    Stick with MDN and trustworthy sites like Css-Tricks, Smashing Magazine, A List Apart and QuirksMode instead.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This

Recommended for You