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

#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