正文
HTML编写规范
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
HTML和CSS编码规范内容一、HTML规范
二、CSS规范
三、注意事项:
四、常用的命名规则
五、CSS样式表文件命名
六、文件命名规则
一、HTML规范:1.代码规范
页面的第一行添加标准模式声明 <!DOCTYPE html>代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小)html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言 lang="zh-CN"不同doctype在不同浏览器下会触发不同的渲染模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge"><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"></head>....</html>
不要使用@import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:使用多个 <link> 元素通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能<!-- Use link elements --><link rel="stylesheet" href="core.css"> <!-- Avoid @imports --><style>@import url("more.css");</style>
引入 CSS 和 JavaScript 文件
根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值<!-- External CSS --><link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --><style>/* ... */</style> <!-- JavaScript --><script src="code-guide.js"></script>
2.注释
<!--注释内容--!>注意:--后不要留空格,若留空格,其他注释全加空格(方便后续程序开发)换句话说,注释要全局统一eg:<!-- Better --!><!--S 注释内容--!>为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <!--E 注释内容--!><!-- No so great --!><!--S 注释内容--!>为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <!--E 注释内容--!>
3.命名规范
class用 “-” ;ID用 “_” ;name:data-自定义名;根据内容书写语义化编码:可用以项目名简写开头-语义化名称eg: class="tb-head"; id="tb_head"; data-head="tb-head";
4.属性排序
(方便后台程序员整理代码)1、根据属性定义排序 : class,id,name排序 (建议用此方法)(class用于标识高度可复用组件,因此排首位,id用于标识具体组件,慎用,因此排第二位)class [强制]class用中划线 ' - ' 区分id, name [强制]ID用下划线 ' _ ' 区分data-*src, for, type, hreftitle, altaria-*, roleeg:<a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="..."> 2、特殊属性可根据元素跟随排序,后根据(1)方法排序eg:<a href="#" class="..." id="..."</a>Example link</a> <input type="text" class="...">3、根据字母开头顺序排序eg:<a class="bfl-head" data-head="bfl-head" href="javascript:;" id="bfl_head"></a>
根据自己理解排序。5.减少标签量
<!-- Not so great --><span class="avatar"><img src="..."></span> <!-- Better --><img class="avatar" src="...">
6.布尔型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值,但是 HTML5 规范不需要。换句话说,不用赋值。<input type="text" disabled> <input type="checkbox" value="1" checked> <select><option value="1" selected>1</option></select>
二、css规范1、语法
1.1、缩进
[强制]使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。1.2、空格
[强制]为了代码易读性,每个声明块的左花括号前添加一个空格[强制]每条声明语句的" : "后应该插一个空格[强制]属性多值每个逗号后应该插入空格 eg:box-shadow,border-image[强制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代,替 -0.5px)1.3、选择器
[强制]为选择器分组时,将单独的选择器单独存放在一行 eg:tr,td{}[强制] >、+、~ 选择器的两边各保留一个空格。[强制]为选择器中的属性添加双引号 不允许单引号例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。[强制] 如无必要,不得为 id、class 选择器添加类型选择器进行限定。[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。eg:/* good */#error,.danger-message {font-color: #c00;}#username input {}.comment .avatar {} /* bad */dialog#error,p.danger-message {font-color: #c00;}.page .header .login #username input {}.comment div * {}
1.4、行
[强制]每行不得超过 120 个字符,除非单行不可分割。[强制]声明块右花括号应当成行[建议] 对于超长的样式,在样式值的 空格 处或 , 后换行,建议按逻辑分组。eg:background:url(....) 此处应有换行 no-repeat;1.5、属性
[强制] 属性定义必须另起一行。[强制] 属性定义后必须以分号结尾。即每条声明应单独成行,以分号结尾[建议] 在可以使用缩写的情况下,尽量使用属性缩写。eg:font: 12px/1.5 arial, sans-serif;1.6、前缀
[强制] 带私有前缀的属性由长到短排列,按冒号位置对齐。[建议] 可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。1.7、简写
十六进制值应该全部小写,尽可能简写 eg:#fff.避免为 0 值指定单位例如,用 margin: 0; 代替 margin: 0px;/* Bad CSS */main>nav {padding: 10px;}.selector, .selector-secondary, .selector[type=text] { padding:15px;margin:0px 0px 15px;background-color:rgba(0, 0, 0, 0.5);box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}.selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;} /* Good CSS */main > nav {padding: 10px;}.selector,.selector-secondary,.selector[type="text"] {padding: 15px;margin-bottom: 15px;background-color: rgba(0,0,0,.5);background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat 0 0;box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}
2.注释
/* 注释内容 */注意:*后不要留空格,若留空格,其他注释全加空格(方便后续程序开发)换句话说,注释要全局统一eg: /* S 注释内容 */为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。/* E 注释内容 */
3.命名规范
1.应用 英文缩写命名法,杜绝用中文拼音或者中文拼音缩写(这是因为英文具有简易性,必要时可上网搜索国际缩写英文)2. 只能出现小写字符或者中划线(破折号符),不用下划线,驼峰命名法。eg: .btn 或者 .btn-danger3.避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思4.class 名称应当尽可能短,并且意义明确。使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。基于最近的父 class 或基本(base) class 作为新 class 的前缀。使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。/* Bad example */.t { ... }.red { ... }.header { ... } /* Good example */.tweet { ... }.important { ... }.tweet-header { ... } 4.选择器
对于通用元素使用 class ,这样利于渲染性能的优化。对于经常出现的组件,避免使用属性选择器(例如,[class="..."])。浏览器的性能会受到这些因素的影响。选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 -- 前缀类似于命名空间)。/* Bad example */span { ... }.page-container #stream .stream-item .tweet .tweet-header .username { ... }.avatar { ... } /* Good example */.avatar { ... }.tweet-header .username { ... } //不要超过3个.tweet .avatar { ... }5.声明顺序
5.1. 相关的属性声明应当归为一组,并按照下面的顺序排列:
* Positioning* Box model* Typographic* Visual由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。 eg:.declaration-order {/* Positioning */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100; /* Box-model */ display: block;float: right;width: 100px;height: 100px; /* Typography */font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;color: #333;text-align: center; /* Visual */background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px; /* Misc */opacity: 1;}5.2.设置盒子模型 - 是否脱离标准(子絶父相)- 其他属性
注意兼容性写法(纯属个人习惯)盒子模型1.设置是否需要浮动元素 或者 转块(float,display)2.设置盒子边框、背景颜色、字体颜色(border,background,font,color)3.设置宽高大小(width,height)4.文字垂直居中(line-hight,text-align,vertical-align等等)5.设置margin、padding值标准流(子絶父相)position :relative、absolute、static、fixedleft/top/right/bottomz-index其他属性opcaity、cursor等css3新属性transition、transform、animation等每个范围可由首字母开头为排序:eg:盒子模型中的第2条中,可由background,border,color等首字母为先排序; 但有些例外,如position肯定排先,后定义left等方向位属性
ps:需要用到媒体查询,将媒体查询放在尽可能相关规则的附近
eg:.declaration-order {display: block;float: right;background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px;color: #333;font: normal 13px "Helvetica Neue", sans-serif; width: 100px;height: 100px;text-align: center;line-height: 100px; margin: 0 auto;padding: 10px 0; position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;opacity: 1; transtion: all .5s ease 0s;animation: name initial 2s;}@keyframes name{0%{}100{}///from{}to{}}@media screen and (min-width) and (max-width){and左右之间要留空格}5.3.按照首字母排列顺序编写
注意事项:1. 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。
2.媒体查询(Media query)的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。
3.带前缀的属性
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。在 Textmate 中,使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中,使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);
4.单行规则声明
对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行 (能仔细分析,检测错误)
5.简写形式的属性声明
在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:paddingmarginfontbackgroundborderborder-radius/* Bad example */.element {margin: 0 0 10px;background: red;background: url("image.jpg");border-radius: 3px 3px 0 0;} /* Good example */.element {margin-bottom: 10px;background-color: red;background-image: url("image.jpg");border-top-left-radius: 3px;border-top-right-radius: 3px;}
6.Less 和 Sass 中的嵌套
避免非必要的嵌套。这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素时才使用嵌套。// Without nesting.table > thead > tr > th { … }.table > thead > tr > td { … } // With nesting.table > thead > tr {> th { … }> td { … }}
了解更多请点击,本文更多参照此文章常用的命名规则class的命名用中划线 ' - '
头: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标签:tags文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guide服务:service注册:regsiter状态:status投票:vote合作伙伴:partnerId的命名:用下划线 ' _ '
1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center(2)导航导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary(3)功能标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:register 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标籤页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyrightCSS样式表文件命名主要的 master.css模块 module.css基本共用 base.css布局、版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css文件命名规则项目命名 全部采用小写方式,以下划线分隔 例:my_project_name 目录命名参照项目命名规则;有复数结构时,要采用复数命名法。例:scripts, styles, images, data_models JS文件命名参照项目命名规则。例:account_model.js CSS, SCSS文件命名参照项目命名规则。例:retina_sprites.scss HTML文件命名参照项目命名规则。例:error_report.html 鸣谢:小码农雯转载至:https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
1.代码规范
页面的第一行添加标准模式声明 <!DOCTYPE html>
代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小)
html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写
建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言 lang="zh-CN"
不同doctype在不同浏览器下会触发不同的渲染模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"></head>....</html>
不要使用@import
与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:
使用多个 <link> 元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
@import url("more.css");
</style>
引入 CSS 和 JavaScript 文件
根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值
<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>/* ... */</style><!-- JavaScript --><script src="code-guide.js"></script>
2.注释
<!--注释内容--!>
注意:--后不要留空格,若留空格,其他注释全加空格(方便后续程序开发)换句话说,注释要全局统一
eg:<!-- Better --!><!--S 注释内容--!>为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <!--E 注释内容--!><!-- No so great --!><!--S 注释内容--!>为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <!--E 注释内容--!>
3.命名规范
class用 “-” ;ID用 “_” ;name:data-自定义名;
根据内容书写语义化编码:可用以项目名简写开头-语义化名称
eg: class="tb-head"; id="tb_head"; data-head="tb-head";
4.属性排序
(方便后台程序员整理代码)
1、根据属性定义排序 : class,id,name排序 (建议用此方法)
(class用于标识高度可复用组件,因此排首位,id用于标识具体组件,慎用,因此排第二位)
class [强制]class用中划线 ' - ' 区分
id, name [强制]ID用下划线 ' _ ' 区分
data-*
src, for, type, href
title, alt
aria-*, role
eg:
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
2、特殊属性可根据元素跟随排序,后根据(1)方法排序
eg:
<a href="#" class="..." id="..."</a>
Example link
</a>
<input type="text" class="...">
3、根据字母开头顺序排序
eg:
<a class="bfl-head" data-head="bfl-head" href="javascript:;" id="bfl_head"></a>
根据自己理解排序。
5.减少标签量
<!-- Not so great --><span class="avatar"><img src="..."></span><!-- Better --><img class="avatar" src="...">
6.布尔型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值,但是 HTML5 规范不需要。换句话说,不用赋值。
<input type="text" disabled><input type="checkbox" value="1" checked><select><option value="1" selected>1</option></select>
二、css规范1、语法
1.1、缩进
[强制]使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。1.2、空格
[强制]为了代码易读性,每个声明块的左花括号前添加一个空格[强制]每条声明语句的" : "后应该插一个空格[强制]属性多值每个逗号后应该插入空格 eg:box-shadow,border-image[强制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代,替 -0.5px)1.3、选择器
[强制]为选择器分组时,将单独的选择器单独存放在一行 eg:tr,td{}[强制] >、+、~ 选择器的两边各保留一个空格。[强制]为选择器中的属性添加双引号 不允许单引号例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。[强制] 如无必要,不得为 id、class 选择器添加类型选择器进行限定。[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。eg:/* good */#error,.danger-message {font-color: #c00;}#username input {}.comment .avatar {} /* bad */dialog#error,p.danger-message {font-color: #c00;}.page .header .login #username input {}.comment div * {}
1.4、行
[强制]每行不得超过 120 个字符,除非单行不可分割。[强制]声明块右花括号应当成行[建议] 对于超长的样式,在样式值的 空格 处或 , 后换行,建议按逻辑分组。eg:background:url(....) 此处应有换行 no-repeat;1.5、属性
[强制] 属性定义必须另起一行。[强制] 属性定义后必须以分号结尾。即每条声明应单独成行,以分号结尾[建议] 在可以使用缩写的情况下,尽量使用属性缩写。eg:font: 12px/1.5 arial, sans-serif;1.6、前缀
[强制] 带私有前缀的属性由长到短排列,按冒号位置对齐。[建议] 可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。1.7、简写
十六进制值应该全部小写,尽可能简写 eg:#fff.避免为 0 值指定单位例如,用 margin: 0; 代替 margin: 0px;/* Bad CSS */main>nav {padding: 10px;}.selector, .selector-secondary, .selector[type=text] { padding:15px;margin:0px 0px 15px;background-color:rgba(0, 0, 0, 0.5);box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}.selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;} /* Good CSS */main > nav {padding: 10px;}.selector,.selector-secondary,.selector[type="text"] {padding: 15px;margin-bottom: 15px;background-color: rgba(0,0,0,.5);background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat 0 0;box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}
2.注释
/* 注释内容 */注意:*后不要留空格,若留空格,其他注释全加空格(方便后续程序开发)换句话说,注释要全局统一eg: /* S 注释内容 */为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。/* E 注释内容 */
3.命名规范
1.应用 英文缩写命名法,杜绝用中文拼音或者中文拼音缩写(这是因为英文具有简易性,必要时可上网搜索国际缩写英文)2. 只能出现小写字符或者中划线(破折号符),不用下划线,驼峰命名法。eg: .btn 或者 .btn-danger3.避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思4.class 名称应当尽可能短,并且意义明确。使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。基于最近的父 class 或基本(base) class 作为新 class 的前缀。使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。/* Bad example */.t { ... }.red { ... }.header { ... } /* Good example */.tweet { ... }.important { ... }.tweet-header { ... } 4.选择器
对于通用元素使用 class ,这样利于渲染性能的优化。对于经常出现的组件,避免使用属性选择器(例如,[class="..."])。浏览器的性能会受到这些因素的影响。选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 -- 前缀类似于命名空间)。/* Bad example */span { ... }.page-container #stream .stream-item .tweet .tweet-header .username { ... }.avatar { ... } /* Good example */.avatar { ... }.tweet-header .username { ... } //不要超过3个.tweet .avatar { ... }5.声明顺序
5.1. 相关的属性声明应当归为一组,并按照下面的顺序排列:
* Positioning* Box model* Typographic* Visual由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。 eg:.declaration-order {/* Positioning */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100; /* Box-model */ display: block;float: right;width: 100px;height: 100px; /* Typography */font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;color: #333;text-align: center; /* Visual */background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px; /* Misc */opacity: 1;}5.2.设置盒子模型 - 是否脱离标准(子絶父相)- 其他属性
注意兼容性写法(纯属个人习惯)盒子模型1.设置是否需要浮动元素 或者 转块(float,display)2.设置盒子边框、背景颜色、字体颜色(border,background,font,color)3.设置宽高大小(width,height)4.文字垂直居中(line-hight,text-align,vertical-align等等)5.设置margin、padding值标准流(子絶父相)position :relative、absolute、static、fixedleft/top/right/bottomz-index其他属性opcaity、cursor等css3新属性transition、transform、animation等每个范围可由首字母开头为排序:eg:盒子模型中的第2条中,可由background,border,color等首字母为先排序; 但有些例外,如position肯定排先,后定义left等方向位属性
ps:需要用到媒体查询,将媒体查询放在尽可能相关规则的附近
eg:.declaration-order {display: block;float: right;background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px;color: #333;font: normal 13px "Helvetica Neue", sans-serif; width: 100px;height: 100px;text-align: center;line-height: 100px; margin: 0 auto;padding: 10px 0; position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;opacity: 1; transtion: all .5s ease 0s;animation: name initial 2s;}@keyframes name{0%{}100{}///from{}to{}}@media screen and (min-width) and (max-width){and左右之间要留空格}5.3.按照首字母排列顺序编写
注意事项:1. 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。
2.媒体查询(Media query)的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。
3.带前缀的属性
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。在 Textmate 中,使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中,使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);
4.单行规则声明
对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行 (能仔细分析,检测错误)
5.简写形式的属性声明
在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:paddingmarginfontbackgroundborderborder-radius/* Bad example */.element {margin: 0 0 10px;background: red;background: url("image.jpg");border-radius: 3px 3px 0 0;} /* Good example */.element {margin-bottom: 10px;background-color: red;background-image: url("image.jpg");border-top-left-radius: 3px;border-top-right-radius: 3px;}
6.Less 和 Sass 中的嵌套
避免非必要的嵌套。这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素时才使用嵌套。// Without nesting.table > thead > tr > th { … }.table > thead > tr > td { … } // With nesting.table > thead > tr {> th { … }> td { … }}
了解更多请点击,本文更多参照此文章常用的命名规则class的命名用中划线 ' - '
头: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标签:tags文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guide服务:service注册:regsiter状态:status投票:vote合作伙伴:partnerId的命名:用下划线 ' _ '
1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center(2)导航导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary(3)功能标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:register 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标籤页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyrightCSS样式表文件命名主要的 master.css模块 module.css基本共用 base.css布局、版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css文件命名规则项目命名 全部采用小写方式,以下划线分隔 例:my_project_name 目录命名参照项目命名规则;有复数结构时,要采用复数命名法。例:scripts, styles, images, data_models JS文件命名参照项目命名规则。例:account_model.js CSS, SCSS文件命名参照项目命名规则。例:retina_sprites.scss HTML文件命名参照项目命名规则。例:error_report.html 鸣谢:小码农雯转载至:https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
[强制]使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
[强制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格
对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代,替 -0.5px)
[强制]为选择器中的属性添加双引号 不允许单引号
例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
eg:
/* good */#error,.danger-message {font-color: #c00;}#username input {}.comment .avatar {}/* bad */dialog#error,p.danger-message {font-color: #c00;}.page .header .login #username input {}.comment div * {}
[建议] 对于超长的样式,在样式值的 空格 处或 , 后换行,建议按逻辑分组。
eg:background:url(....) 此处应有换行 no-repeat;
[强制] 属性定义后必须以分号结尾。
即每条声明应单独成行,以分号结尾
[建议] 在可以使用缩写的情况下,尽量使用属性缩写。
eg:font: 12px/1.5 arial, sans-serif;
.避免为 0 值指定单位
例如,用 margin: 0; 代替 margin: 0px;
/* Bad CSS */
main>nav {
padding: 10px;
}
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
.selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;}
/* Good CSS */
main > nav {
padding: 10px;
}
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
background:
transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
no-repeat 0 0;
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
/* 注释内容 */
注意:*后不要留空格,若留空格,其他注释全加空格(方便后续程序开发)换句话说,注释要全局统一
eg: /* S 注释内容 */
为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。
/* E 注释内容 */
2. 只能出现小写字符或者中划线(破折号符),不用下划线,驼峰命名法。
eg: .btn 或者 .btn-danger
/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... } //不要超过3个
.tweet .avatar { ... }
* Positioning
* Box model
* Typographic
* Visual
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */ display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
盒子模型
1.设置是否需要浮动元素 或者 转块(float,display)
2.设置盒子边框、背景颜色、字体颜色(border,background,font,color)
3.设置宽高大小(width,height)
4.文字垂直居中(line-hight,text-align,vertical-align等等)
5.设置margin、padding值
标准流(子絶父相)
position :relative、absolute、static、fixed
left/top/right/bottom
z-index
其他属性
opcaity、cursor等
css3新属性
transition、transform、animation等
.declaration-order {
display: block;
float: right;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
color: #333;
font: normal 13px "Helvetica Neue", sans-serif;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 0 auto;
padding: 10px 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
opacity: 1;
transtion: all .5s ease 0s;
animation: name initial 2s;
}
@keyframes name{
0%{}
100{}
///
from{}
to{}
}
@media screen and (min-width) and (max-width){
and左右之间要留空格
}
1. 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。
2.媒体查询(Media query)的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。
3.带前缀的属性
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。
在 Textmate 中,使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中,使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。
Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);
4.单行规则声明
对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行 (能仔细分析,检测错误)
5.简写形式的属性声明
在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:
padding
margin
font
background
border
border-radius
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
6.Less 和 Sass 中的嵌套
避免非必要的嵌套。这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素时才使用嵌套。
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}
了解更多请点击,本文更多参照此文章
常用的命名规则class的命名用中划线 ' - '
头: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标签:tags文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guide服务:service注册:regsiter状态:status投票:vote合作伙伴:partnerId的命名:用下划线 ' _ '
1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center(2)导航导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary(3)功能标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:register 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标籤页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyrightCSS样式表文件命名主要的 master.css模块 module.css基本共用 base.css布局、版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css文件命名规则项目命名 全部采用小写方式,以下划线分隔 例:my_project_name 目录命名参照项目命名规则;有复数结构时,要采用复数命名法。例:scripts, styles, images, data_models JS文件命名参照项目命名规则。例:account_model.js CSS, SCSS文件命名参照项目命名规则。例:retina_sprites.scss HTML文件命名参照项目命名规则。例:error_report.html 鸣谢:小码农雯转载至:https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
用中划线 ' - '
头: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
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
Id的命名:用下划线 ' _ '
1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center(2)导航导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary(3)功能标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:register 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标籤页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyrightCSS样式表文件命名主要的 master.css模块 module.css基本共用 base.css布局、版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css文件命名规则项目命名 全部采用小写方式,以下划线分隔 例:my_project_name 目录命名参照项目命名规则;有复数结构时,要采用复数命名法。例:scripts, styles, images, data_models JS文件命名参照项目命名规则。例:account_model.js CSS, SCSS文件命名参照项目命名规则。例:retina_sprites.scss HTML文件命名参照项目命名规则。例:error_report.html 鸣谢:小码农雯转载至:https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css