Most of the people are rushing for java, .net, angular, D3 etc. But how can they forget about HTML and CSS which is the basic part of any great website. Maintaining the code is even bigger headache. We all have some standards but do we regularly follow them. Having standard code helps up in long run. So, here i am gonna list some easy and maintainable html and css standards.

<!--  Home banner wrapper starts  -->
<section class="home-banner-wrapper">
    <div class="container">

     </div>
</section> 
<!--  Home banner wrapper ends  -->

**

HTML

**

• First of all always comment the code along you are writing it . Don't leave it for future.

Here you can see i have commented the block with starting and ending. Always use some nice space in between comment quotes and comment text. It cleans the look of document

• Proper class naming convention

As you can see in previous example i have written the class name "home-banner-wrapper" which represents the banner of the home page. Always name the class according to their block so that other developer can easily recognized for which block this class is used.

• Use one type of class names

There are many types in which we can name the classes for eg. "loremipsum", "LoremIpsum", "LOREMIPSUM" etc Try to use only one type of class name best to use camel casing or all small.

• Use HTML5 code Always use HTML5 section, header, footer, nav tags to separate the different parts of the website.

CSS

/*
The Purpose of the Stylesheet is to add the styling to <Project Name>
@ version 0.0.1
*/
/* 
    Created on : <Date>
    Author     : <Author>
*/


/*==============================================================================
******************       Font Style For The Application      *****************
==============================================================================*/
@font-face {
    font-family: 'proximanova-light';
    src: url('../fonts/proximanova/proximanova-light/proximanova-light.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/proximanova/proximanova-light/proximanova-light.svg#webfont') format('svg'),
        url('../fonts/proximanova/proximanova-light/proximanova-light.woff') format('woff'),
        url('../fonts/proximanova/proximanova-light/proximanova-light.ttf') format('truetype');
}

/*==============================================================================
*****************     Common Style For The Application     *******************
==============================================================================*/
a:focus, select:focus{
    outline: none;
}

/*--  City Form Wrapper  --*/
.city-form-wrapper > li > a{
    color: #fff;
    font-size: 16px;
    font-family: 'proximanova', sans-serif;
}

• Comments the basic part because css is the thing which never get trimmed it always increases. So, best to have comments . Use two level of css comments. first, the main block which is commented in bigger part and second, the smaller section /-- City Form Wrapper --/**. Further we can crite comment for Media Queries etc
• Always keep a common section in css document where you define the code which is going to repeat in whole project.

Folder Structure

One of the most important part we are left with is folder structure

This is the basic structure we commonly use. 1. Assets folder : where you keep all the css, js, images etc 2. Next will be index.html