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.

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

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;
}

h1,
h2,
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.

Share with friends

8
Leave a Reply

avatar
5 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
thomasbsuman singhsiya sinhaTechlasersP. Chandra Recent comment authors
  Subscribe  
Notify of
Pat
Pat

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

Karan Rawat
Karan Rawat

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

thomasb
thomasb

Hopefully new developers will quickly move away from w3schools.

http://www.w3fools.com

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

Techlasers
Techlasers

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

siya sinha
siya sinha

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

suman singh
suman singh

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