设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 731|回复: 0

[其他] CSS编写规范

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-8-20 08:41:46 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
规范的编写,有助于代码的阅读性;
不管对于后端开发人员,还是以后的维护都有很好的,便利性!所以在此总结,在总结个人书写习惯。希望对朋友们有所帮助!

一:通过w3c 标准
二:css样式一律小写
三:使用Reset但并非全局Reset(Reset并不是一成不变的,具体还需要根据项目的不同 需求做适当的修改)
四:良好的命名习惯
1:面向对象命名(navgation,blaner,footer.....)
2:面向功能性命名(float_right,float_left....)
3:“_”链接命名:
4:私有样式命名规范:”前缀_位置缩写/功能/”
如:该模块是属于产品就可以用product为前缀,
上中下就可以依次是。product_t,product_m,product_b,
中间又分为左右结构,那就是product_m_l,product_m_r。
五:代码缩写 font:normal small-caps bold 110%/1.3 serif;
六:利用CSS继承(如已经继承上级样式则不再重写,故衡量全局共同样式,写出全局公共样式)
七:使用多重选择器
八:适当的代码注释
九:给你的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等
十:保持CSS的可读性
1:属性多的分行写,属性少于3个可以写一行
2:分个样式间用空格隔开
3:多重选择器间用class隔开
.nav, .nav_left, .content_right{
float:left;
margin:10px 5px;
padding:5px 0 10px 5px;/*布局*/

background-color:#3399cc
border:1px solid #FFF;/*自身*/

color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;/*文本*/

z-index:10;/*其它*/
}
.nav, .nav_left, .content_right{background-color:#3399cc; color:#666; height:300px;}
十一:选择更优的样式属性值 border:0变为border:none
十二:使用<link>代替@import
十三:使用外部样式表
十四:避免使用CSS表达式(Expression)
十五:代码压缩
十六:值为0的不加单位H1{margin:0px; padding:0px;} = H1{margin:0;padding:0;}
十七:颜色值简写:#333333-------#333;
十八:主要文件命名与html项目名称对应(如:yunzhi.css)-----全小写,英文“-”分开(与html文件名一样方式);
十九:
二十:样式以class为主,不用id
二十一:重置样式reset:
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin:0;
padding:0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font:12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size:100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style:none; }
/** 重置超链接元素 **/
a { text-decoration:none; color:#333;}
a:hover { text-decoration:underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse:collapse; border-spacing:0;
二十二:常用命名
(1)页面结构类容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
(2)导航类
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
位置导航: crumb
菜单:menu
子菜单:submenu
面包屑:breadcrumb(即页面所处位置导航提示)
(3)网页内容类
标题: title
摘要: summary
箭头: arrow
商标: label
网站标志: logo
转角/圆角: corner
横幅广告: banner
栏目: column
子菜单: subMenu
搜索: search
搜索框: searchBox
登录: login
工具条: toolbar
下拉: drop
标签页: tab
当前的: current
列表: list
滚动: scroll
服务: service
提示信息: msg
新闻: news
小技巧: tips
下载: download
栏目标题: title
热点: hot
加入: joinus
注册: regsiter
指南: guide
友情链接: friendlink
状态: status
版权: copyright
按钮: btn
合作伙伴: partner
投票: vote
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-4 14:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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