CSS 命名法

命名原则：
    原则1：前缀+后缀
        应用名 + 标签功能
    原则2：应用功能 > 布局功能
        关于命名中的位置名：left,right,center,middle,top,bottom
            如果该元素的主要用途就是定位，那么可以选择这几个词，非常明确。
            如果该元素可以用功能名足够表达，则不使用定位名。
    原则3：能给个id ，就给个id吧。
    原则4：没有container概念
        因为：html里都是一层套一层，大家都是container。
   

单词分隔符：减号
    不采用任何驼峰命名法：原因：太长了，看不清。
    不得采用任何下划线。原因：不对称，不好看。

大小写
    全小写。原因：大写多了太吓人。

图片名的后缀命名

    首先是用图片的视觉效果命名,然后再考虑下面的:

    -icon.*    单个图标
    -icons.*    多个图标
    -button.*    单个button
    -buttons.*    多个button
    -logo.*    LOGO
    -item.*    某一项
    -page.*    整个页面的背景
    -head.*    头部的背景
    -tail.*    尾部的背景
    -banner.*    条幅（多用于广告）
    -tab.*    标签盒的标签背景
    -tabpanel.*    标签盒的标签主体背景
    -l-t-corner    左上角
    -r-t-corner 右上角
    -l-b-corner 左下角
    -r-b-corner 右下角
    -l-border    左边框
    -r-border    右边框
    -t-border    上边框
    -b-border    下边框
    -text    图片型文字
    -cover    封面图，一般用于新闻的图片，或首页的大中图
   

那hover的图呢？
    hover的图一半与原图放在同一个图片文件中
   
用不用-bg
    能用上述表达的，就不用bg,毕竟css里都是bg


常用css名
.button    普通button
.text    普通正文
.link    普通链接

.portlet-box
.portlet-head-box
.portlet-body-box
.portlet-title-box
.portlet-icon-box


关于h1,h2,h3的使用 ???(还不确定）
    h1与h2尽量不使用
    模块如果需要heading，用h3
   


常用ID名
    #page-head-box
        #page-head-top-box
            #page-head-top-left-box
            #page-head-top-right-box
        #page-head-middle-box
            #page-head-middle-left-box
            #page-head-middle-center-box
            #page-head-middle-right-box
        #page-head-nav-box
            #page-head-nav-list
    #page-head-menu-box
    #page-head-menu-list
        #page-head-menu-home-item
        #page-head-menu-news-item
        #page-head-menu-about-item
    #page-menu-box
        #page-menu-home-item
        #page-menu-news-item
        #page-menu-about-item
    #page-body-box
        #page-body-left-box
        #page-body-center-box
        #page-body-right-box
        #news-portlet-box
        #faq-portlet-box
    #page-tail-box
   
    #article-box
    #arricle-title-box
    #article-info-box
    #article-body-box
   
    #last-articles-box
    #last-articles-list


一些混淆名词的约定，不使用缩写
pg    page
l    left
r    right
m    middle
mid    middle
c    center
btn    button
li    list
img    image
ico    icon


top    head    当head已经被用过后用top
center middle    水平用center,垂直用middle
tail bottom    党tail已经被用过后用bottom

常用后缀规则
body
    -body
   
div
    -box
    -head-box
    -body-box
    -tail-box
    -left-box
    -right-box
    -center-box
    -middle-box
    -portlet-box
    -image-box
    -icon-box
    -tools-box
    -buttons-box
    -sidebar-box
    -nav-box
    -search-box
    -content-box
    -msg-box
    -title-box
    -tip-box
    -status-box

ul
    -menu
    -list

li
    -item
    -menu-item
    -listitem
   
h1,h2,h3,h4,h5
    -heading

span,label
    -label
    -title-label
   
a
    -link
    -button

image
    -image
    -icon
    -button
   
button,input[type="button"]
    -button

form
    -form
   
input[type="text"]
    -textinput

input[type=checkbox]
    -check

input[type=radio]
    -radio

select
    -select

option
    -option