CSS Tips : Any web developer should know

I’ve completed many html project and here i am share some basic tips that should know the developer.

  • Habit to write the css within a line single line

    /* Bad */
    .heading {
    font-size:20px;
    color:#000;
    padding-bottom:10px;
    margin-top:20px;
    }
    					
    /* Good */
    .heading { font-size:20px; color:#000; padding-bottom:10px; margin-top:20px; }
    			

  • Take care about the missing the bracket, semicolumn

    .heading {
    font-size:20px;
    color:#000 //bad
    padding-bottom:10px;
    margin-top:20px;
    }
    			

  • Color code can be use with three letter or six.

    /* good */
    .heading { color:#000; background-color:#dddddd; }
    
    /* bad */
    .heading { color:#0000; }			
    			

  • Avoid the use of !important

    Increase the precedency rathar then putting to important

  • Try to use the separate properties for background.

    /* good */
    .heading { background-color: #000; background-repeat: no-repeat; background-image:url(); background-position:center center; }
    
    /* bad */
    .heading { background: <background-color> <background-image> <background-position> }
    			

  • Give overlay of image with background-color

    .overlay { background-color:rgba(0,0,0,0.5); }
    			

  • Media query should be write after the main style to overwrite the style

    /* Main Style */
    .css { color:rgba(0,0,0,0); }
    
    /* Media Style */
    @media (max-width:450px){
    	.css { color: #ddd; }
    }										
    			

  • Clear the floating

    .clear { clear:both; }
    .p-left { float:left; }
    <div class="p-left"></div>
    <div class="p-left"></div>
    <div class="clear"></div>	
    			

One thought on “CSS Tips : Any web developer should know

  1. This is great blog.

    .heading { font-size:20px; color:#000; padding-bottom:10px; margin-top:20px; }

    In above way you can not write css speedly and also it can’t be readable as mush as blow way.

    .heading {
    font-size:20px;
    color:#000;
    padding-bottom:10px;
    margin-top:20px;
    }

    You can write above css and today there are many tools to use css minify. Like below

    https://csscompressor.com/

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s