CSS编写规范

EchoROne

发布于 2022-08-15 08:24:48

2.7K0

发布于 2022-08-15 08:24:48

文章被收录于专栏：玩转大前端

一、目录

二、制作目的

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等)

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

2）去掉小数点前的“0”和0后面的单位，如：0px -> 0

3）简写命名

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

4）16进制颜色代码缩写

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

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

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

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

输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6 是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）

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

6）不要随意使用id

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

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

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

3、CSS命名规范（规则） 1）常用的CSS命名规则

内容

类名

内容

类名

头

header

搜索

内容

content/container

友情链接

friendlink

尾

footer

页脚

footer

导航

nav

版权

侧栏

sidebar

滚动

scroll

栏目

column

内容

content

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

wrapper

标签

四、补充

该规范是由个人从网上搜索资料以及日常项目总结而来，目前自己能够做成模板的元素还比较少，并且适用范围也有一定限制，都需要在以后的实践中不断补充和完善。等模板多了，就尽量形成自己的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、二元、三元运算符前后一定要用空格隔开，一元的则不需要。便于阅读。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

ide

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

ide

css

登录后参与评论

0 条评论

热度