CSS Coding Standards

CSS files

style.css – main css style
responsive.css – responsive css style

Create Typography

Before start with any page HTML must create css for following base Typography first.

<body>
<h1> to <h6> title tag
<p>
<a>
<ul> & <li>
<ol> & <li>
<blockquote>
<input> fields
<hr>
<img>
<table>

Commenting

Each css code should be proper commented with level wise as following.


/* 7.Layout Framework
-------------------------------------------------*/
/*------- home page --------*/
/*--- banner Part ---*/
.banner {
display:block;
width: 100%;
}

/*--- news part ---*/
.news-block {
width: 100%; 
height: auto;
}

/*------- about page --------*/
/*--- overview part ---*/
.overview-block {
width: 100%;
}

Class and Id

All the class or id name should be use the hyphens (-) rather than underscore (_).


/* Badly formed CSS */

/*------- about page --------*/
/*--- news part ---*/
.news_block {width: 100%; height: auto;}

/*--- overview part ---*/
.overview_block {width: 100%;}


/* Well formed CSS */

/*------- about page --------*/
/*--- news part ---*/
.news-block {
width: 100%;
height: auto;
}

/*--- overview part ---*/
.overview-block {
width: 100%;
height: auto;
}

Code formating

All the css code must be in multiple line.


/* Badly formed CSS */

/*------- about page --------*/
/*--- news part ---*/
.news-block::after{
content:'';
position: absolute;
}

/*--- overview part ---*/
.overview-block{
position: absolute;
top:0;
margin:0;
bottom:0;
display:block;
left:0;
color:rgba(0,0,0,1);
font-size:16px;
right:0;
background-color:rgba(0,0,0,1)
}



/* Well formed CSS */

/*------- about page --------*/
/*--- news part ---*/
.news-block:after {
content:'';
position: absolute;
}

/*-- Must be follow order of css like as below --*/
/* Positioning */
/* Box model */
/* Typography */
/* Visual */

/*--- overview part ---*/
.overview-block {
position: absolute;                  
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;                      
margin: 0;
font-size: 16px;                       
color: rgba(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 1);    
}

Media query

General media query fo responsive css


/* ----- Desktop ≥1024px and ≤1190 ----- */
@media ( min-width: 1024px ) and ( max-width: 1199px ) {

}

/* ----- iPad ≥768px and ≤1023 ----- */
@media ( min-width: 768px ) and ( max-width:1023px ) {

}

/* ----- iPhone X landscape ≥375px and ≤812 ----- */
@media ( min-width: 375px ) and ( max-width: 812px ) and ( orientation: landscape ) {

}

/* ----- Medium devices ≤767px ----- */
@media ( max-width: 767px ) {

}

/* ----- Small devices ≤640px ----- */
@media ( max-width: 640px ) {

}