Do's and Dont's While Designing with CSS

(1) Don't Use Style Tag in the page:

Define a new CSS class in CSS File (for example Sample.css) for every style you need and call the respective class in your HTML Element/ASP.NET Control.

For Ex:

For HTML control:

Do : < div class="textalignleft" > < / div >
Don't : < div style="text-align:left;" > < / div >

For ASP.NET control:

Do : < asp:label runat="server" text="SampleLabel" ID="lblSample" CssClass="textalignleft" > / asp:label >

Don't :< asp:label runat="server" text="SampleLabel" ID="lblSample" style="text-align:left;" > < / asp:label >

Define the class in CSS file (Sample.css) as follows:

.textalignleft
{
text-align:left;
}

(2) Avoid giving multiple properties to same CSS class:

Instead define mutiple classes with single property and call the multiple classes in the HTML/ASP.NET control class tag as follows

For Ex:

Do : < div class="textalignleft yellowcolor fullscreen" > Test < / div >

In the css class define as follows:

.textalignleft
{
text-align:left;
}
.yellowcolor
{
background-color: #ffff00;
}
.fullscreen
{
width:100%;
}

Don't : < div class="leftyellowtextfullscreen" > Test < / div >

.leftyellowtextfullscreen
{
text-align:left;
background-color: #ffff00;
width:100%;
}

Because these Single property classes can be used for other controls or other div's

(3) Always Check for existing classes for your required property, before creating a new one:
Do not repeat class name or create a new class with same existing property values.

For Ex:

.textaligncenter
{
text-align:center;
}
.textcenter
{
text-align:center;
}


(4) Use lower case to define class name

For Ex:

Do:
.textaligncenter
{
text-align:center;
}
Don't:
.TextAlignCenter
{
text-align:center;
}

(5) Define all CSS class in CSS file and not in respective Page/ Page Head Tag

For Ex:

Do: Define in Sample.css
.displaynone
{
display:none;
}


Don't
< asp:Content ID="cntInstrumentSearchHeader" ContentPlaceHolderID="head" Runat="Server" >
.displaynone
{
display:none;
}
< / asp:Content >


(6) Avoid giving CSS to HTML element

For Ex:

Don't

input, select
{
font-size: 1em;
width: 17.5em;
margin: 0;
float: left;
margin-right: 4px;
}

table
{
position: relative;
margin: 0 8px 8px 8px;
max-height: 400px;
clear: both;
}