CSS编码规范
来源:互联网 发布:java web 用户重复登录 编辑:程序博客网 时间:2024/05/21 15:43
CSS代码有效性
使用有效的CSS代码。
可使用W3C CSS validator来验证css。
命名
class应优先虑以这元素具体目的来进行命名,应尽量简短且富有含义。
统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。
/* 不推荐 */.demoimage {} /* "demo" 和 "image" 中间没加 "-" */
/* 不推荐 */.error_status {} /* 用下划线 "_" 是屌丝的风格 */
/* 推荐 */.ads-sample {}
原则上,不建议缩写,除非一看就懂的缩写,如nav
。
尽量避免使用id来控制样式。
框架css类命名清单- 全屏:
full_bg
(全屏背景) - 容器:
wrapper
(最外面的主框架) - 页头:
header
(子项:h_1、h_2、……) - 内容:
container
- 页面主体:
main
- 页尾:
footer
- 导航:
nav
(子项:n_1、n_2、……) - 菜单:
menu
(子项:m_1、m_2、……) - 导航:
nav
(子项:n_1、n_2、……) - 子菜单:
submenu
- 侧栏:
sidebar
- 栏目:
column
(扩展:column1、column2、……) - 左右中:
left
、right
、center
- 搜索:
search
- 登陆:
signin
选择器
避免出现过多的祖先选择器,各浏览器会有性能差异,消耗在选择器的时间也不尽相同。
尽量最多控制在3级以内。
/* 不推荐 */ul.example {}.example1 .example2 .example3 .example4 {}
/* 推荐 */.example {}.example1, .example2 {}
非必要的情况下不要使用元素标签名和ID或class进行组合。
/* 不推荐 */ul#example {}div.error {}
/* 推荐 */#example {}.error {}
简化css
写属性值的时候尽量使用缩写。
/* 不推荐 */.example { border-top-style:none; font-family:Palatino, serif; font-size:100%; line-height:1.6; padding-bottom:2em; padding-left:1em; padding-right:1em; padding-top:0; }
/* 推荐 */.example { border-top: none; font: 100%/1.6 Palatino, serif; padding: 0 1em 2em;}
属性值为0时,忽略单位
/* 不推荐 */.example { margin:0px; padding:0px;}
/* 推荐 */.example { margin:0; padding:0;}
属性值出现小数点忽略0
/* 不推荐 */.example { font-size:0.8em}
/* 推荐 */.example { font-size:.8em}
省略URI外的引号
/* 不推荐 */.example { background-image: url("images/noise.png");}
/* 推荐 */.example { background-image: url(images/noise.png);}
十六进制尽可能使用3个字符
/* 不推荐 */.example { color: #eebbcc; }
/* 推荐 */.example { color: #ebc; }
Hacks
尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
尽量避免使用CSS filters。
CSS代码格式规则
单行书写
一个类一行,每个属性间用空格隔开,不用强制换行。
/* 不推荐 */.example { display:block; float:left; width:200px; height:300px;padding:10px; }
/* 推荐 */.example { display: block; float: left; width: 200px; height: 300px; padding: 10px;}
分隔选择器
每个选择器和声明都要独立新行。
/* 不推荐 */a:focus, a:active { position: relative; top: 1px;}
/* 推荐 */h1,h2,h3 { font-weight: normal; line-height: 1.2;}
属性名完结
出于一致性的原因,在属性名和值之间加一个空格(可不是属性名和冒号之间噢)。
/* 不推荐 */h3 { font-weight:bold;}
/* 推荐 */h3 { font-weight: bold; }
声明完结
考虑到一致性和拓展性,请在每个声明尾部都加上分号。
/* 不推荐 */.test { display: block; height: 100px}
/* 推荐 */.test { display: block; height: 100px;}
css书写顺序
书写顺序按显示属性,自身属性, 文本属性顺序。
显示属性
display
list-style
position
float
clear
自身属性
width
height
margin
padding
border
background
文本属性
color
font
text-decoration
text-align
vertical-align
white-space
Css Meta规则
编码
一般情况下编码同html
的一致。
如果是urf-8
,则不需要制定样式表的编码,因为它默认为urf-8
。
注释
头部注释
注明本CSS的用处,生成时间及作者等信息。
/* CSS Document Use for: website Version: 1.0 Date: time Author: your name Update: */
页面注释
有时候一份CSS会把首页和各种二级页面样式写在一起,这时需要做页面注释。
/*********************************** * 首页 ***********************************/
分级注释
比如在main
模块下,建立了news
、photo
等栏目,可使用分级注释,以指明层级结构。
/*----------------main-----------------*/#main {}.main-bg {}/* news */.news {}/* photo */.photo {}
区块间注释
/* news */.news {}/* photo */.photo {}
修改注释
当后期维护中有修改到css,需添加修改的注释。
.news {} /* 修正横向滚动条错误 by your name */
常用技巧
样式初始化
/* CSS Reset */ body, div, span, object, input, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } caption{ text-align:left;} input,select{ vertical-align:middle;} input,textarea,select{ font:12px Arial, Helvetica, sans-serif; } fieldset, img { border: 0; } address,code,caption,th,cite,dfn,em,var{font-style:normal;} ol, ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } q:before, q:after { content:""; } legend{ display:none;}
清除浮动
.clearfix:after{ content: ""; height: 0; visibility: hidden; display: block; clear: both;} .clearfix{ zoom: 1;}
阅读全文
0 0
- [css] CSS编码规范
- 编码规范系列:css规范
- CSS编码规范
- HTML CSS 编码规范
- CSS编码规范【整理】
- HTML&CSS编码规范
- CSS编码规范(二)
- css编码规范(一)
- CSS编码规范
- bootstrap css编码规范
- CSS编码规范
- HTML&&CSS编码规范
- CSS编码规范
- css编码规范
- 前端css编码规范
- CSS编码规范总结
- CSS(CS3)编码规范
- html/css 编码规范
- 多项式回归
- Ubuntu学习之路之vi编辑器
- Caffe初步学习
- 在Windows 10 中用 Bash on Windows(WSL) 给 VSCode 搭建 编译调试 C/C++ 环境
- 超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
- CSS编码规范
- 安卓知识点
- python学习---汉罗塔
- 【海康威视研究院】杭州3面试记录
- 如何实现STL中的next_permutation函数?
- 分页技术
- IO流
- hadoop之 Zookeeper 分布式应用程序协调服务
- RHEL6.5更换本地YUM源