Sunday, March 4, 2012

CSS Format

Arranging CSS is really important while designing.
Many people write comments which is good but just adding css selectors and classes one after another is not the solution.
there are different styles of arranging css properly.
One of them i found really nice and which helps us to understand the childNode we are using in one or which is the parentNode of one's.
Previously i used to write only comments and tried to divide these with
/* ---------------- Global ---------------- */
/* ---------------- Header ---------------- */
/* ---------------- Navigation ---------------- */
/* ---------------- Page Structure ---------------- */
and /* ---------------- Footer ---------------- */
but I found it confusing after adding more and more css.

This is good that we add comments to css but more easy way to understand what goes where? and after what? is writing css as follows
#content_holder{
  text-align:left;
  width:960px;
  background:#fff url(/images/new/main-bg.gif) 0 0 repeat-x ;
  border-left:2px solid #E7E5D2;
  border-right:2px solid #E7E5D2; 
  min-height:100%;
  height:auto !important;
  height:100%;}
  #tabs {
    float:left;
    overflow:hidden;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc}
    #tabs, #tabs ul{
      padding: 0;
      margin: 0;
      width:100%; }
      #tabs li {
        margin: 0;
        padding: 0;
        list-style: none; }
        #tabs a, #tabs a:visited {
          color: #333;
          text-decoration: none;
          background-color:#fff;
          width:97%;
          display:block;
          font-size: 13px;
          font-weight: normal;
          padding: 3px 0px 5px 5px;
          margin: 0px 0px;
          border-bottom:1px solid #ccc;}
          #tabs li a:hover, #tabs li a.current {
            color: #000; 
            background-color:#F2F0DC; }
      #tabs .workspace a, #tabs .workspace a:visited { color: #fff;}

No comments:

Post a Comment