CSS的引用、开头:
- 样式放头上,脚本放脚下。不内嵌,只外链。
- @charset “utf-8”;
注意:必须要定义在 CSS 文件所有字符的前面(包括编码注释),@charset 才会生效。 - 注释用英文,避免解析出现乱码;
- 慎用 * 通配符。
所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
命名空间规范:
提示:个人习惯问题自行选用
- 布局:以 g 为命名空间,例如:.g-wrap 、.g-header、.g-content。
- 状态:以 s 为命名空间,表示动态的、具有交互性质的状态,例如:.s-current、s-selected。
- 工具:以 u 为命名空间,表示不耦合业务逻辑的、可复用的的工具,例如:u-clearfix、u-ellipsis。
- 组件:以 m 为命名空间,表示可复用、移植的组件模块,例如:m-slider、m-dropMenu。
- 钩子:以 j 为命名空间,表示特定给 JavaScript 调用的类名,例如:j-request、j-open。
CSS书写顺序:
- 位置属性(position, top, right, z-index, display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其他(animation, transition等)
CSS书写规范:
提示:根据场景选择
-
使用CSS缩写属性,精简代码
-
去掉小数点前的“0“
-
简写命名,注意要有可读性
-
16进制颜色代码缩写
-
长名称或词组可以使用中横线来为选择器命名“-”。
-
字符小写
-
当一个规则包含多个选择器时,每个选择器独占一行。
-
、+、~、> 选择器的两边各保留一个空格。
-
代码注释
(1)单行注释 - 星号与内容之间必须保留一个空格。
(2)多行注释 - 星号要一列对齐,星号与内容之间必须保留一个空格。 -
文件注释
文件顶部必须包含文件注释,用 @name 标识文件说明。星号要一列对齐,星号与内容之间必须保留一个空格,标识符冒号与内容之间必须保留一个空格。/** * @name: 文件名或模块名 * @description: 文件或模块描述 * @author: author-name(mail-name@domain.com) * author-name2(mail-name2@domain.com) * @update: 2015-04-29 00:02 //为可选项,建议每次改动都更新一下 */
-
数值与单位
(1)当属性值或颜色参数为 0 - 1 之间的数时,省略小数点前的 0 。color: rgba(255, 255, 255, 0.5) color: rgba(255, 255, 255, .5);
(2)当长度值为 0 时省略单位。
margin: 0px auto margin: 0 auto
-
不要随意使用Id
-
为选择器添加状态前缀
.widthdrawl{ background-color: #fff; } .is-widthdrawl{ background-color: #fff; }
样式属性顺序:
-
单个样式规则下的属性在书写时,应按功能进行分组,并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写,提高代码的可读性。
如果包含 content 属性,应放在最前面;(1)Positioning Model 布局方式、位置,相关属性包括:position / top / right / bottom / left / z-index / display / float / …
(2)Box Model 盒模型,相关属性包括:width / height / padding / margin / border / overflow / …
(3)Typographic 文本排版,相关属性包括:font / line-height / text-align / word-wrap / …
(4)Visual 视觉外观,相关属性包括:color / background / list-style / transform / animation / transition / …Positioning 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。
其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。
合理使用使用引号:
-
在某些样式中,会出现一些含有空格的关键字或者中文关键字。
(1) font-family 内使用引号
当字体名字中间有空格,中文名字体及 Unicode 字符编码表示的中文字体,为了保证兼容性,都建议在字体两端添加单引号或者双引号:body { font-family: 'Microsoft YaHei', '黑体-简', '\5b8b\4f53'; }
(2)background-image 的 url 内使用引号 如果路径里面有空格,旧版 IE 是无法识别的,会导致路径失效,建议不管是否存在空格,都添加上单引号或者双引号:
div { background-image: url('...'); }
CSS命名规范(规则):
-
常用的CSS命名规则
头: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
-
注释的写法:
/* Header */ 内容区 /* End Header */
-
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 版权:copyright
避免使用 !important :
除去某些极特殊的情况,尽量不要不要使用 !important。
!important 的存在会给后期维护以及多人协作带来噩梦般的影响。
当存在样式覆盖层叠时,如果你发现新定义的一个样式无法覆盖一个旧的样式,只有加上 !important 才能生效时,是因为你新定义的选择器的优先级不够旧样式选择器的优先级高。
所以,合理的书写新样式选择器,是完全可以规避一些看似需要使用 !important 的情况的。
SASS 使用建议 :
嵌套层级规定
使用 SASS 、 LESS 等预处理器时,建议嵌套层级不超过 3 层。
-
组件/公用类的使用方法
组件/公用类使用 %placeholders 定义,使用 @extend 引用。如:%clearfix { overflow: auto; zoom: 1; } .g-header { @extend %clearfix; }
-
组件类的思考
使用 SASS ,经常会预先定义好一些常用公用组件类,譬如清除浮动,水平垂直居中,文字 ellipsis。又或者多个元素具有同样的样式,我们希望能够少写这部分代码,公共部分抽离出来只写一次,达到复用。但是复用的方式在 SASS 中有多种,那么是使用单独使用一个类定义,给需要的标签添加,还是使用 @include 或者 @extend在定义的类中引入一个 @mixin,或者一个 @function 呢?
基于让 CSS 更简洁以及代码的复用考虑,采用上面的使用 %placeholders 定义,使用 @extend 引用的方案。
(1)%placeholders,只是一个占位符,只要不通过 @extend 调用,编译后不会产生任何代码量
(2)使用 @extend 引用,则是因为每次调用相同的 %placeholders 时,编译出来相同的 CSS 样式会进行合并(反之,如果使用 @include 调用定义好的 @mixin,编译出来相同的 CSS 样式不会进行合并)
(3)这里的组件类特指那些不会动态改变的 CSS 样式,注意与那些可以通过传参生成不同数值样式的 @mixin 方法进行区分 -
尽量避免使用标签名
基于 CSS 选择器的解析规则(从右向左),建议使用 .g-content .g-content-list .item { } ,避免使用通用标签名.g-content .g-content-list li { } 作为选择器的一环可以提高 CSS 匹配性能。
编写CSS样式表需要注意的15个点 :
- 不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。
- 无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。
- 慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
- 样式放头上,脚本放脚下。不内嵌,只外链。
- 坚决不用 CSS 表达式
- 使用引用样式表,而不是通过 @import 导入。
- 一般来说,PNG 比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。
- 千万不要在 HTML 中缩放图片,一者不好看,二者占资源。
- 正文字体最好用偶数,12px、14px、16px,效果非常好。特例,15px。
- block、ul、ol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。
- 段落之间,至少要有一倍行距。
- 强行指定某些元素的 line-height,正文 1.6 倍于文字大小,标题 1.3 倍。
- 中文标点用全角。英文夹杂在中文中,左右空格,半角。
- 中文字体的粗体和斜体,远离较好,利民利己。
- CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。