I have been writing HTML, CSS, JavaScript codes for quite sometime, but I never thought of following best practices. If you are a blogger or a website developer, then go back to your code and see if you have coded the right way. Being a web developer, it is important to know the basic Style rules, Meta rules and Formatting rules. Thankfully, Google HTML/CSS Style guide can be a good start for new developers and web designers.
Google HTML/CSS Style guide tells us how to code, style and format the documents like a pro. The idea is to improve the coding quality, collaboration and follow W3C standards coding practice.
So, it hardly takes few minutes to become a good coder and here are the few tips that I like to share.
Avoid Protocol mentioning for embedded resources
If you are linking a resource (JavaScript, CSS, image or media) in your HTML/CSS document, then avoid mentioning the protocol (http or https).
Note: You should only mention protocol when the resource is not available over both http and https protocols.
The wrong way…
<script src="http://www.test.com/js/jquery.js"></script>
The right way…
<script src="//www.test.com/js/jquery.js"></script>In CSS…
The wrong way…
.className {
background: url(http://test.com/images/bg.jpg);
}The right way…
.className {
background: url(//test.com/images/bg.jpg);
}Advantages: It reduces the document size.
Avoid using Tabs for indentation
That’s my habit, using tabs for indentation. But Google says, you should not use space, tab or mix tabs for indentation. The right way is to use only two spaces for indentation.
<ol> <li>Apple <li>Orange </ol>
.myClass {
float: left;
}Never use CAPITALIZATION
Never use capitalization for HTML tag names, attributes, style properties, property values etc…code them all with small case.
The wrong way…
<DIV><P>THIS TEXT IS CAPITAL</P></DIV>
The right way…
<div><p>This text is capital</p></div>And use CSS to capitalize the text using text-transform:uppercase; Remember to write HTML elements in lowercase.
Remove the Trailing white space
Make sure there is no unnecessary white space after the text.
The wrong way…
<p>Lookout for the space after me_</p>
The right way…
<p>Trailing spaces are unnecessary and they create problems</p>Avoid using Type attributes for script and link tags
It’s not must to use ‘type‘ attribute for ‘script‘ and ‘link‘ tags, as the HTML5 takes care of assigning ‘text/css’ and ‘text/javascript’ by default.
The wrong way…
<link rel="stylesheet" href="//www.test.com/css/style.css" type="text/css">
The right way…
<link rel="stylesheet" href="//www.test.com/css/style.css">The wrong way…
<script src="//www.test.com/js/script.js" type="text/javascript"></script>
The right way…
<script src="//www.test.com/js/script.js"></script>Omit Optional tags
According to HTML5 specification, you can omit few tags such as html, head, body etc…Consider the below example.
<!DOCTYPE html>
<html>
<head>
<title>See if you can omit few tags</title>
</head>
<body>
<p>Here as well</p>
</body>
</html>You can omit tags as below…
<!DOCTYPE html> <title>I saved some bytes.</title> <p>some text here</p>
Note: You can choose to omit html tag, when it’s followed by another HTML element. For e.g,
<!DOCTYPE html>
<html>
<!--Comment tag follows html tag, in this case you cannot omit html tag-->
<head>
<title>See if you can omit few tags</title>
</head>
<body>
<p>Here as well</p>
</body>
</html>Similarly, you can choose to omit head, body tags with a condition. Read through the HTML5 specification to understand what tags can be omitted.
Keep Markup, Presentation and Behaviour separate
Well, I mean, keep the HTML structure, CSS Styles and Scripts separate. This separation will provide better understanding of code, better optimization and easy maintenance. For e.g, I need not edit a HTML document to style an element or modify a behaviour.
The wrong way…
<!DOCTYPE html>
<title>Avoid too many stylesheets and embedded styles, scripts</title>
<style>
.myClass{float:left}
</style>
<script>
function a(){//do something}
</script>
<link rel="stylesheet" href="style1.css" media="screen">
<link rel="stylesheet" href="style2.css" media="screen">
<link rel="stylesheet" href="style3.css" media="print">
<h1>Actual content</h1>The right way…
<!DOCTYPE html> <title>Group those styles into one</title> <link rel="stylesheet" href="default.css"> <script src="script.js"></script> <h1>My first CSS-only redesign</h1>
Use proper HTML tags
It’s important to use right tags for certain purpose. For e.g, the below two codes accomplishes same task, but using the right semantics provides better accessibility and code reuse.
<div onclick="functionToGenerateLink()">Click here to access Next page</div>
The right semantics is to use anchor tag to help user to navigate to next page.
<a href="nextpage.html">Click here to access Next page</a>
Don’t close VOID elements in HTML5
It was necessary to close void elements in earlier versions of HTML. But not anymore!
What is void elements?
Void elements are HTML elements that do not (actually cannot) have any text in between the start and end tag. For e.g, br, meta, input, area, base, img, source, embed, hr, keygen, link, col, command, track etc…Learn various types of void elements here.
According to HTML5 specifications, you need not close void element tags. So, <br /> can be just <br>. It saves some byte isn’t?
Stop using Single quote for attribute values
I found an interesting article from a friend Ben Nadel – he says, stop using single quote for attribute values in HTML elements and use only double quotes.
For e.g. the below code is not recommended
<a class='nextpage.html'>Click me</a>
But this one is…
<a class="nextpage.html">Click me</a>People normally use single quote while using notepad/vim for coding. But IDE’s doesn’t have special colour coding for single quotes and thus makes the code hard to read.
Ben has another interesting point here…Aren’t we use single quote for character and double quote for strings? Makes sense isn’t? and that’s what even Google suggests.
CSS Quotation Marks
Don’t use quotation marks for URI values. For e.g.,
The wrong way…
@import url("//www.test.com/css/style.css");The right way…
@import url(//www.test.com/css/style.css);
Use Single quotes and not double quotes for attribute selectors in CSS
The wrong way…
.myClass {
font-family: "open sans";
}The right way…
.myClass {
font-family: 'open sans';
}Use ID and Class naming properly
When I was learning HTML/CSS coding, I heard of ID and Class usage. ID meant to be unique and should be used only once, but class can be used over and over. But I never followed it, because it didn’t seems to behave differently.
The best practice is to use ID and class naming properly. Here’s an interesting article which explains the differences between ID and Class naming.
Avoid unnecessary use of ancestor selectors
It’s important to keep performance in mind while coding CSS, especially while using CSS selectors.
The wrong way…
ul#example {}
div.error {}The right way
#example {} .error {}
Avoid unnecessary use of ancestor selectors to improve the CSS performance. Read more about the CSS performance analysis by steve.
Use Shorthand properties
Using shorthand properties in your code saves lots of bytes. For e.g,
padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
Can be written as…
padding: 0 1em 2em;Avoid using Unit specification after ‘0’ value
It’s simple! If the property has a value of ‘0’, then why does it require unit specification? So, avoid using unit specification after zero value.
margin:0;Use short HEX codes for color property
Use short 3 character HEX code for color property and only that seems to support it. For e.g,
color: #eebbcc;
Can be written as…
color: #ebc;
End every CSS declaration with a semi-colon
Every CSS property should end with a semi-colon, because it is consistent and provides extensibility. However, it doesn’t make a difference in the styling aspect.
For e.g:
.myClass{padding:0; margin:0;}
Well, these are the few tips that can help you to become a good coder. Have more? Share with us in the comment section below.
