عالمى الإلكترونى

وضع مسافات فى بداية العناصر الوارثة من عنصر رئيسى لتوضيح العلاقات بينهم كالتالى :

#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
        display:block;
} 

HEADER
------------------- */
#header{width:650px;}
 #header a:link,
    #header a:visited{
        color:#0033CC;
}

/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
 #nav ul li{
          float:left;
              padding:0 10px;
}        

استخدم مسافات والمحاذاة لفصل الخصائص عن قيمها :

               width: 650px;
}     
           #main h1{
                               color:          #000;
                               font-size:      22px;
                               font-weight:    bold;
    }
          #main p{
                               color:          #000;
                                font-size:      12px;
                                padding:        10px;
   }

ضم العناصر المتشابهة فى الخصائص فى مجموعات

مثال:

                 background:url(facebook.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}

يفضل كتابته بهذه الطريقة ,,

.icon-facebook,                              
 .icon-twitter,                                  
.icon-delicious{                             
                          padding-left:  26px;         
                          margin-right:  20px; 
                     width:        100px;                  
                          }                                                        
     .icon-facebook{background:url(facebook.gif);}        
      .icon-twitter{background:url(twitter.gif);}           
      .icon-delicious{background:url(delicious.gif);}       

#container{...}
/*---- Top section ----*/

#header{...}
#navbar{...}

/*---- Main ----*/
#menu{...}
#main{...}
#sidebar{...}

/*---- Footer ----*/
#footer{...}

حيث :

1. Container

هو الذى يضم عناصر الصفحة كاملة وتحدد مكانها فى الصفحة وتسمى أيضاَ " #container"
"wrapper", "wrap", "page".

2. Header
وهو القسم العلوى فى الصفحة الذى يضم اسم الموقع والشعار وأى عناصر أخرى ويسمى أيضاً"
"top", "logo", "page-header" (or pageHeader).

3. Navbar
يضم قائمة أفقية تحتوى على عناصر وتصنيفات الموقع يسمى أيضاً "#navbar"
use these names: "nav", "navigation", "nav-wrapper".

4. Menu
يحتوى على روابط خارجية وقوائم وتسمى أيضاً"#menu"
"sub-nav ", "links".

5. Main
القسم الرئيسى للصفحة التى تضم الموضوعات والمحتوى الرئيسى ويسمى أيضاً"#main"
"content", "main-content" (or "mainContent"),

6. Sidebar
قسم يحتوى على معلومات إضافية مثل : آخر الموضوعات ,عن الموقع , إعلانات ويسمى أيضاً
"sub-nav", "side-panel", "secondary-content".

7. Footer
يحتوى على معلومات إضافية عن الموقع وحقوق الملكية ويسمى أيضاً"#footer"
"copyright".

مقتبس من
CSS coding: semantic approach in naming convention