HTML CSS code standards

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 allalways comment the codealong 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 documentProperclass naming conventionAs 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.Useone type of class namesThere 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.UseHTML5 codeAlwaysuse HTML5 section, header, footer, navtags 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 forMedia Queries etcAlways keep acommon sectionin css document where youdefine the code which is going to repeatin whole project.Folder StructureOne of the most important part we are left with is folder structureThis 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

News Reporter

Leave a Reply

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