1 / 30
文档名称:

前端开发规范.pdf

格式:pdf   大小:859KB   页数:30页
下载后只包含 1 个 PDF 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

前端开发规范.pdf

上传人:wxc6688 2022/6/22 文件大小:859 KB

下载得到文件列表

前端开发规范.pdf

相关文档

文档介绍

文档介绍:: .

(images/) no-repeat 9999px 9999px;}
7. /* 统一清除浮动 */
8. .g-bdc:after,.m-dimg
ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;over
flow:hidden;content:'.';}
9. .g-bdc,.m-dimg ul,.u-tab{zoom:1;}
10. /* 布局 */
11. .g-sd{float:left;width:300px;}
12. /* 模块 */
13. .m-logo{width:200px;height:50px;}
14. /* 元件 */
15. .u-btn{height:20px;border:1px solid #333;}
16. /* 功能 */
17. .f-tac{text-align:center;}18. /* 皮肤 */
19. .s-fc,-fc:hover{color:#fff;}
命名规则
使用类选择器,放弃 ID 选择器
ID 在一个页面中的唯一性导致了如果以 ID 为选择器来写 CSS,就无法重用。
特殊字符:"-"连字符
"-"在本规范中并不表示连字符的含义。
她只表示两种含义:分类前缀分隔符、扩展分隔符,详见以下具体规则。
分类的命名方法:使用单个字母+"-"为前缀
布局(grid)( .g-);模块(module)( .m-);元件(unit)( .u-);功能(function)( .f-);皮肤(skin)
(.s-);状态(.z-)。
对以上的解释详情参见:分类方法中的“CSS 内部的分类及其顺序”。
注:在你样式中的选择器总是要以上面前五类开头,然后在里面使用后代选择器。
如果这五类不能满足你的需求,你可以另外定义一个或多个大类,但必须符合单个字母+"-"为前缀
的命名规则,即 .x- 的格式。
特殊:.j-将被专用于 JS 获取节点,-定义样式。
后代选择器命名
约定不以单个字母+"-"为前缀且长度大于等于 2 的类选择器为后代选择器,如:.item 为 m-list 模块
里的每一个项,.text 为 m-list 模块里的文本部分:.m-list .item{}.m-list .text{}。
一个语义化的标签也可以是后代选择器,比如:.m-list li{}。
不允许单个字母的类选择器出现,原因详见下面的“模块和元件的后代选择器的扩展类”。
通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块或元件中
生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时
候效果尤为明显!后代选择器不需要完整表现结构树层级,尽量能短则短。
注:后代选择器不要在页面布局中使用,因为污染的可能性较大;
1. /* -list 中有效 */
2. .m-list{margin:0;padding:0;}
3. .m-list .itm{margin:1px;padding:1px;}
4. .m-list .cnt{margin-left:100px;}
5. /* -page 中有效 */
6. .m-page{height:20px;}
7. .m-page .cnt{text-align:center;}