收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2862|回复: 3

[其它] 页面基本结构和CSS书写命名规范

[复制链接]
发表于 2010-9-9 13:01:27 | 显示全部楼层 |阅读模式
此份文档为杭州易网灵杰科技有限公司技术部内部文档,其制定目的是在于多人合作切页面时,防止命名冲突、样式书写不规范,页面结构杂乱无章。

1、        页面基本结构为(必须使用div+css布局):
1.jpg
其中<div id="content"></div>会根据项目需求继续拆分子框架,其命名可以根据方位、区域来命名,如:
2.jpg
2、        页面结构的命名统一使用id对其命名。
3、        id和class的命名总规则为:内容优先,表现为辅。首先根据内容来取名,比如:main-nav,如果内容找不到合适的命名,可以结合表现来定,如:skin-blue、present-tab。
4、        id和class一律小写,多个单词用连接符“-”连接,如:main-nav。
5、        id 和 class 名称中只能出现小写的26个英文字母、数字和连字符(-),任何其它字符都严禁出现。名称开头必须使用小写的26个英文字母。名称必须出现小写的26个英文字母。
6、        id和class尽量使用英文单词命名,一是提高自身的英文能力,二是为了更专业。如果实在找不到合适的单词时,可以考虑使用中文拼音,但不推荐使用拼音缩写。
7、        在不影响语义的情况下,id和class名称中可以适当采用英文单词缩写,比如nav、img。如需注释使用双斜杠注释:
//注释内容
……
8、        Css样式书写规范1:单个模块最外面的div样式必须写成独立式,并写好注释
3.jpg
   如上图,其样式书写为:
   #content{ … }
   #pink-div{ … }
   #dark-div{ … }
   #green-div{ … }
   #green-div .red-div{ … }
9、        Css样式书写规范2:⑴继承式、⑵独立式
4.jpg
   ⑴继承式:
    #content{ background: blue;}
    #content .green-div{ background: green;}
    #content .green-div .red-div{ background: red;}
    #content .green-div .red-div .gray-div{ background: gray}
   ⑵独立式:
    #content{ background: blue;}
    .green-div{ background: green;}
    .red-div{ background: red;}
    .gray-div{ background: gray}
   以上两种书写方式各有各的有点,继承式可以出现相同命名而不怕样式的继承;独立式则css代码更为精简,对css书写要求更严格。
   在多人合作切页面时,不管使用哪种方式,都必须事先统一好使用哪种方式,以防后续整合工作无法开展。
10、注释书写方式:
单个模块统一使用单行注释(/*注释内容*/),单个模块样式结束后空两行表示结束
11、图片命名规范:
        负责切主页的人按照正常流程给图片命名,负责切内页的人,则按照这个公式命名:“css样式中的模块名称_图片名称”。如:
        Css样式:
        #service{ … }
        #service .title{ background: url(../Service_title.jpg)}        //对应的图片名称
12、样式格式化代码,放在css文件最上面:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{font-size:100%;}
这段css代码把常用的样式都格式化了,比如ul里的list-style属性设置为none等。
13、让IE8强行使用IE7模式渲染:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
14、当多人合作切页面时,请遵守上面的条例规范。如果有新的意见、建议或需要修改之前的条例规范,在通过所有页面切割人员的一致通过后,可以对此文档进行修改。
发表于 2010-9-9 14:39:46 | 显示全部楼层
嗯,代码规范化是应该的,这个规范也是属于很简单的那种,蛮好
回复 支持 反对

使用道具 举报

发表于 2010-9-9 16:08:07 | 显示全部楼层
样式不要写在id上,兄弟
回复 支持 反对

使用道具 举报

发表于 2010-9-9 16:21:35 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-22 15:39 , Processed in 0.093516 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表