您的位置:首页 > Web前端 > CSS

常用的css命名规范

2015-07-23 17:43 495 查看
XHTML-CSS写作建议
1、所有的xhtml代码小写;
2、属性的值一定要用双引号("")括起来,且一定要有值;
3、每个标签都要有开始和结束,且要有正确的层次;
4、空元素要有结束的tag或于开始的tag后加上"/";
5、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等;
6、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询;
7、给每一个表格和表单加上一个唯一的、结构标记id;
8、给重要的区块加上注释;
9、给图片加上alt属性;
10、所有的标签必须进行合理的嵌套;
11、根元素前必须有元素,宣告使用那一种DTD;
12、根元素必须有 xmlns 属性来指定使用 http://www.w3.org/1999/xhtml的namespace。
注释书写规范
1、行间注释 直接写于属性值后面
如: .search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ }
2、整段注释 分别在开始及结束地方加入注释,
如: /*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/
3.协助注释 非作者维护时所加入的表示修改时间、修改人等标识信息。 在区域注释或单行注释的基础上加上修改人和修改时间等信息。
例(区域注释): <!--==S 注释内容[修改人和修改时间]--> <div> ... </div>
<!--==E 注释内容[修改人和修改时间]--> /*=S 注释内容[修改人和修改时间]*/ .class{ ... } .class{ ... } /*=E 注释内容[修改人和修改时间]*/
例(单行注释): <div> <!-- 注释内容[修改人和修改时间]--> ... </div> .class{ /*注释内容[修改人和修改时间]*/ ... }

私有样式命名规范:
为了避免出现样式私有样式的名称和公有样式重复的想象,私有样式采用:”前缀_位置缩写” 的规则。
如:该模块是属于产品就可以用product 为前缀。
上中下就可以依次是:product_h,product_m,product_b.
中间又分为左右结构,那就是product_m_l,product_m_r

区域块:box/area
区域块样式类别+box/area,
比如新闻区域块:newsbox/newsarea,
产品区域块:probox/proarea
标题栏:bar (newsbar/probar)
列表:list (newslist/prolist)

css属性书写顺序
建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性.
此条可根据自身习惯书写, 但尽量保证同类属性写在一起.
属性列举:
布局定位属性主要包括: margin&padding&float(包括clear)&position(相应的top,right,bottom,left)&display&visibility&overflow等;
自身属性主要包括: width & height & background & border;
文本属性主要包括:font&color&text-align&text-decoration&text-indent等;
其他属性包括: list-style(列表样式)&vertical-vlign&cursor&z-index(层叠顺序) &zoom等.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: