Best Practices for CSS

(Do's & Don'ts)
Introduction of Twitter Bootstrap Framework (v 2)

Aimed for JSP Developers

First the Basics


  • Introduction to HTML tags

  • Single Body HTML tags  for e.g. <br> <hr> <input>
  • Normal HTML tags (Paired Body) for e.g <p>Paragraph</p>, <em>Emphasis</em> <strong>Strong</strong>, <i>italics</i>, <div> Division</div>, <span>Span</span>

Switch to XHTML

XHTML 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML.
~ W3C!


Strict and cleaner version of HTML

  1. !DOCTYPE required

  2. Single body tag, should be written as 
    <br />, <hr />, <input />, <img />

  3. All html tags should be lowercase



  • Proper code nesting
<p>Paragraph<span>Span</span></p> [OK]
<p>Paragraph<span>Span Away</p></span> [NOT OK]

  • Tags should be properly closed

  • Standardization among different vendors and so forth on web industry


(Cascade style sheets)


HTML Tags, visual classification

  • For e.g.
    display:inline for <span>

    display:block for <p>

    display:table for <table>

    & ETC!


(Thinking inside the Visual BOX)

BOX Model...

Outline • Margin • Border • Padding • Width • Height


(in FireFox)

CSS Rules Classification

(Properties & Values)

  • Text

  • Layout
    .display{display:inline-block;} .float{float:left}

CSS Rules Classification...

  • Background
    .opacity -half{opacity:0.5}

  • BOX Model

  • CSS3

    What this all about?

    • Round corners

    • Fancy things - reflect, shadow, Glow

    • Transition, Rotate

    • Bells and Whistles on Better UX and
      effects for the <peace & silence /> (not a Tag though :) 

    (This is a CSS3 Powered SlideShow System, REVEAL.JS)


    How to write and where to write* 
    (*JSP Devs.)

    • Avoid embedded stylesheets as much as possible in JSP files

    • Avoid inline css rule
      (Acting as Poison for Design scalability)

    • Choose the unique ID's in JSP page and be careful with javascript functions


    (work in progress)

    #ID vs .class

    (#eye-dee vs .clash)

    • #ID Should be unique
      (Help JS to identify such DOM elements uniquely)

    • Classes can be reused, but use them carefully

    Little Teaser

    (CSS Specificity)

    <a style="color:red" id="color-red-id" class="color-red">RED</a>


    Float Property

    (Let it float the boat)

    • .float-l {float:left}

    • .float-r {float:right}

    Float Usage


    Clear Float!

    (With power comes responsibility)

    Use .clearfix

    (Twitter Bootstrap)


    After using


    After using .clearfix

    Lets <br />eak

    (for 15 mins)

    CSS Frameworks

    BluePrint | | Twitter Bootstrap etc.

    Twitter Bootstrap

    (web demo)


    Scaffold (layout)
    • Fixed Grid (.row .span1)
    • Responsive Grid ( .row-fluid .span1)

    Typography, Form, Button (link)
    • .btn .btn-primary
    • .btn-large
    • <a href="#" class="btn btn-large disabled">Link</a>
    • Icon usage (<i class='icon-road'></i>)


    (javascript based widget)

    • Rich UI controls
    • etc
    • etc
    • Addon etc

    Form Layouts

    (in our approach)

    • Grid system - 12 columns grid
      (.row .span1,..., .row .span12)

    • Liquid Grid or say Responsive Grid 
      (.row-fluid .span1, .row-fluid .span12)

    Responsive Form Layouts

    (Thumb rule in our approach)

    for e.g.
    <div class="row-fluid">

    <div class="span6"> <!-- span12  --> </div> <!-- /.span6 -->
    <div class="span6"> <!-- span12  --> </div> <!-- /.span6 -->

    </div> <!-- /.row-fluid -->


    (Question & Answer)







    Wish you!


    Introduction to CSS For JSP Developers (+ Twitter Bootstrap Intro version 2)

    By Gaurav Mishra

    Introduction to CSS For JSP Developers (+ Twitter Bootstrap Intro version 2)

    Inhouse Session with Neutrino Framework Team @Nucleus Software Resonsible for Product Innovation & Development for Banking Domain Products. Nucleus software is 25+ old firm, completely immersed into Banking domain technology & Products.

    • 8,082
    Loading comments...

    More from Gaurav Mishra