Best Practices for CSS

(Do's & Don'ts)





Aimed for JSP Developers

First the Basics

<HTML>

  • 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!






<XHTML />

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

XHTML... 

(continued)


  • 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






CSS

(Cascade style sheets)

CSS...

HTML Tags, visual classification


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

    display:block for <p>

    display:table for <table>

    & ETC!



BOX MODEL

(Thinking inside the Visual BOX)




BOX Model...



Outline • Margin • Border • Padding • Width • Height



BOX MODEL DEMO

(in FireFox)

CSS Rules Classification

(Properties & Values)

  • Text
    .fs-12{font-size:12px;}
    .font-family{font-family:Arial}


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

CSS Rules Classification...

  • Background
    .bg-color-white{background:#fff}
    .opacity -half{opacity:0.5}



  • BOX Model
    .m-5{margin:5px} 
    .p-5{padding:5px}
    .reset-m-t{margin-top:0}

  • 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)

    CSS...

    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

    #WIP

    (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>


    #color-red-id{color:green}
    .color-red{color:blue}

    Float Property

    (Let it float the boat)

    • .float-l {float:left}

    • .float-r {float:right}


    Float Usage

    (Layout)

    Clear Float!

    (With power comes responsibility)


    Use .clearfix

    (Twitter Bootstrap)

    Before


    After using

    .clearfix{}

    After using .clearfix




    Lets <br />eak

    (for 15 mins)



    CSS Frameworks

    BluePrint | 960.gs | Twitter Bootstrap etc.



    Twitter Bootstrap

    (web demo)





    Features

    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>)

    Features...

    (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 -->
    ...




    Discussion

    (Question & Answer)

    References

    (used)

    • http://www.htmlgoodies.com/primers/html/article.php/3616146/Why-Switch-to-XHTML.htm

    • http://css-tricks.com/the-css-box-model/

    • http://css-tricks.com/all-about-floats/


    • http://twitter.github.com/bootstrap/index.html







    Wish you!
    {All.The.Best.}




    EOM

    introduction to css for jsp developers

    By Gaurav Mishra

    introduction to css for jsp developers

    • 1,886

    More from Gaurav Mishra