css规范

一、制作目的

1、为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,也为了更好阅读、修改和提高对CSS的加载速度,CSS的编写应该遵循一定的编写规范。目前网上已经流行一些比较好的规范,大多由网友总结;大公司的CSS规范也值得我们去参考。但由于无法获取到大公司的内部资料,只能参考部分网上一些比较好的资料来制作一套自己的规范。

2、目前我司在编写CSS样式时存在编写混乱、多页面的样式写在同一CSS文件、不方便阅读等几乎毫无原则的现象,产生诸多弊端,罗列如下:

1)多个页面的样式写在同一个CSS文件中:

  • 加载一个页面同时把其他页面的、不必要的样式、背景图片都加载进来,严重拖长了加载时间

  • 样式过多,命名时容易冲突,甚至会导致被覆盖

  • 可复用的样式几乎每次都会重新编写

  • 样式过多,不便于阅读

  • 不便于交接

2)复用性高的布局、组件样式没有单独集中在一个CSS文件中:

  • 导致每次都需要重新编写,延长了项目制作时间

  • 每次编写的并不统一,造成一种布局有多套做法,包括对其进行操作的js编写

  • 不便于统一进行样式更改

  • 不便于交接

3)表现与结构没有分离——频繁使用行内样式与以style标签定义样式(嵌入式),而由于行内样式与style标签定义的样式优先级比以CSS文件引入样式(外部样式表)优先级要高:

  • 导致无法被以简单的类选择器样式覆盖

  • 导致以js的addClass来添加的简单类选择器样式优先级低而无无法起作用

  • 不便于交接

4)不合理使用CSS选择器(组合、属性选择器)和id选择器

  • 导致无法被以简单的类选择器样式覆盖

  • 导致以js的addClass来添加的简单类选择器样式优先级低而无无法起作用

  • 不便于交接

当然,我司也有做得好的地方——能用CSS布局的就不用js:

  • 便于阅读和交接

  • 不依赖于js,降低制作及修改该布局时所要求的技术基础

  • 有效避免使用js对其进行操作时产生不必要的冲突

3、CSS规范化之后,有诸多好处:

1)提高代码复用性:

2)有效压缩了文件大小

3)节省编写代码时间

4)便于统一修改

5)有效避免命名难的问题

6)便于阅读

总之,对CSS编写进行规范化之后有诸多好处,不在这里一一论述。

*注:规范化之后,更改文件的频率会大大降低,这时就可以对CSS代码进行文件压缩

三、CSS编写规范

(一)设计原则

为了使CSS样式的编写更加规范,部分模板应该从产品设计和UI设计人员最初就规划好设计原则,进而让前端工程师能够根据该原则一贯地执行下去。相关原则有:

1、常用控件、表格、布局和页面做出一套或者多套模板

  • 单选、复选框、按钮、轮播图的上一张/下一张按钮等,应该根据不同场合提前做好一套或者数套模板,每次使用这些控件时应该在这些模板的基础上进行相应更改,如:更改大小、颜色等。

2、需要使用统一的颜色、图标的地方产品、UI设计人员应该提前规划好

  • 前端工程师应根据这些主题元素提前做好规划,最好能够将使用这些主题元素的样式都写在一个CSS文件当中、相应的主题图标的图片放在同一个文件夹,那么以后就能够很方便的更改主题了。

3、常用控件所需要用到图片都应该成套设计

  • 成套的控件的图片应同时设计好,不应该在使用的时候再临时设计,以免出现控件之间不搭配的情况。而成套的控件图片都应经过CSS Sprite处理过之后再使用,以减少图片的加载,也可以在上传图片的时候减少操作。另外,这些控件的CSS样式、js代码都应该写在单独的文件中,方便统一管理和进行统一更换样式,使用的时候直接调用这些文件即可。

4、每一个页面都应用一个独立的CSS文件,常用页面应该做成CSS文件模板

  • 每一个页面都应用一个独立的CSS文件,而不能出现多个页面的样式放到同一个CSS文件中,这样会延长加载时间,也会使得命名更加困难。

  • 常用页面如详情页和含有大量表格的页面的CSS样式应写到各自独立的CSS文件中制作成模板,以后每次使用时直接调用即可。

5、表现与结构分离:CSS样式都应写在CSS文件中,且尽量少用id、组合、属性选择器和行内样式以及style标签样式

  • 为避免在CSS文件使用类选择器和使用js添加类选择器进行样式覆盖时因优先级问题而无法覆盖成功,所有样式的编写都应尽量使用单一的类选择器来编写样式,应尽量少用或不用id选择器、组合/层级选择器和属性选择器,这也可以减少浏览器的查找时间;同时,使用层级/组合选择器时对布局的依赖性太大,耦合性太强,稍微更改布局就没法用了;如果样式不改变的可能性很低的,则可以使用以上类型的选择器。

  • 所有选择器的样式都应写在CSS文件中,尽量少用或不用行内样式和style标签样式。

6、CSS布局不能用js:

  • 便于阅读和交接,不依赖于js,降低制作及修改该布局时所要求的技术基础,有效避免使用js对其进行操作时产生不必要的冲突。

7、引入CSS文件应在html页面的顶部引入

  • 能加快页面内容显示;并能避免页面产生白屏,和网速过慢时避免让用户看到没有经过样式修饰的html代码。

8、禁止在css中使用*选择器

  • *选择器因为需要遍历页面的所有元素,所以编译的时候会非常消耗时间。

9、层级(z-index)必须清晰明确

  • 页面弹窗、气泡为最高级(最高级为999),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比。

10、用于编写js选择用的class名称应与一般的样式class名称有所区别

  • 例如一般的样式类名:.content-wrapper;而用于js选择用的类名:.content_wrapper_hook。即用下划线替代横杠、后面加一个hook字段。

11、单位一定要统一,除了极个别情况需要用到之外,其他时候不能混用

12、尽量不用id选择器做css样式编写,因为id选择器一般用做js选择,有时可能会因为js的原因改动,那么对应的css就会失效。

13、链接要么都用相对地址、要么都用绝对地址。二者混用时接手的人看起来费劲。

14、css和js的缩进都只能用空格,不能用tab,因为不同人的tab缩进量不同,有的是两个空格,有的是四个空格。

15、小程序里面,rem和rpx是可以相互替代的,不能二者混用。

16、

*注:模板都应该设计好相应的html模板页,调用时直接从模板文件中调用html代码即可。

(二)规范细则

1、CSS书写顺序

1)位置属性(position, top, right, z-index, display, float等) 2)大小(width, height, padding, margin) 3)文字系列(font, line-height, letter-spacing, color- text-align等) 4)背景(background, border等) 5)其他(animation, transition等)

image

2、CSS书写规范 1)使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。可缩写的属性中,如果属性值只有1个或2个,那应该分开写;如果大于2个,应该合并写在一起。这样就可以使其编译的时间最优化。

image

2)去掉小数点前的“0”和0后面的单位,如:0px -> 0

image

3)简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

image

4)16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

image

5)连字符CSS选择器命名规范

① 长名称或词组可以使用中横线来为选择器命名。

② 不建议使用“_”下划线来命名CSS选择器,为什么呢?

输入的时候少按一个shift键; 浏览器兼容问题 (比如使用tips的选择器命名,在IE6 是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“”)

③用字母、_号、-号、数字组成,必须以字母开头,不能为纯数字。

image

6)不要随意使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先于class,所以id应该按需使用,而不能滥用。

image

7)为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

image

3、CSS命名规范(规则) 1)常用的CSS命名规则

内容

类名

内容

类名

header

搜索

search

内容

content/container

友情链接

friendlink

footer

页脚

footer

导航

nav

版权

copyright

侧栏

sidebar

滚动

scroll

栏目

column

内容

content

页面外围控制整体布局宽度

wrapper

标签

tags

左右中

left right center

文章列表

list

登录条

loginbar

提示信息

msg

标志

logo

小技巧

tips

广告

banner

栏目标题

title

页面主体

main

加入

joinus

热点

hot

指南

guide

新闻

news

服务

service

下载

download

注册

regsiter

子导航

subnav

状态

status

菜单

menu

投票

vote

子菜单

submenu

合作伙伴

partner

2)注释的写法

/* Header / 内容区 / End Header */

3)id的命名

①页面结构

内容

Id名

内容

Id名

容器:

container

导航

nav

页头

header

侧栏

sidebar

内容

content/container

栏目

column

页面主体

main

页面外围控制整体布局宽度

wrapper

页尾

footer

左右中

left right

center

②导航

内容

Id名

内容

Id名

导航

nav

右导航

rightsidebar

主导航

mainnav

菜单

menu

子导航

subnav

子菜单

submenu

顶导航

topnav

标题

title

边导航

sidebar

摘要

summary

左导航

leftsidebar

③功能

内容

Id名

内容

Id名

标志

logo

提示信息

msg

广告

banner

当前的

current

登陆

login

小技巧

tips

登录条

loginbar

图标

icon

注册

register

注释

note

搜索

search

指南

guild

功能区

shop

服务

service

标题

title

热点

hot

加入

joinus

新闻

news

状态

status

下载

download

按钮

btn

投票

vote

滚动

scroll

合作伙伴

partner

标籤页

tab

友情链接

link

文章列表

list

版权

copyright

4、注意事项

1)一律小写; 2)尽量用英文; 3)不加中槓和下划线; 4)尽量不缩写,除非一看就明白的单词。

5、CSS样式表文件命名

内容

文件名

内容

文件名

主要的

master.css

专栏

columns.css

模块

module.css

文字

font.css

基本共用

base.css

表单

forms.css

布局、版面

layout.css

补丁

mend.css

主题

themes.css

打印

print.css

四、补充

该规范是由个人从网上搜索资料以及日常项目总结而来,目前自己能够做成模板的元素还比较少,并且适用范围也有一定限制,都需要在以后的实践中不断补充和完善。等模板多了,就尽量形成自己的UI。

重要布局案例(兼容版/纯CSS3版)

1)sticky footer布局可以使得在不用定位的情况下将内容固定到页面底部。

2)左右等高布局

3)flex布局

4)水平垂直自动居中布局(多行文本/+图片垂直居中布局)

5)巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

6)左边/右边宽度固定,右边/左边宽度自适应布局(左右两边宽度固定,中间宽度自适应)

7)响应式布局

8)多元素水平居中

9)清除浮动方法

10)在移动端实现真正的1px线

11)css画三角形

12)多行文本省略号

五、js编写规范

1、一个对象里面的方法:私有的默认在方法名前面加下划线“”,可被外部调用的不加下划线“”,以此来区分方法能不能被外部调用。

2、一个变量在声明 / 初始化赋值时定好了格式之后,后续该变量尽量不要更改其格式,否则很容易就不知道格式变成什么样、导致随意调用,容易出错

3、二元、三元运算符前后一定要用空格隔开,一元的则不需要。便于阅读。

你可能感兴趣的:(css规范)