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