WEB前端之CSS规范

JavaScript语言 2020-11-13 05:03:58
前端 Web css 规范


CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

1. 通用规范

文件编码

  • 为了避免内容乱码,统一使用 UTF-8 编码保存。

  • 样式文件第一行设置字符集为 UTF-8

@charset 'UTF-8'; /* 注意字符集说明应在第一行 */

缩进规范

统一使用两个空格缩进

2. 初始化规范

各浏览器厂商的初始样式都不一样,为了消除不同浏览器对 HTML 文本呈现的差异,我们常引入一些初始化样式,如 normalize.css、reset.css 等,当对于这些样式的引入我们需要注意下面几种情况:

  • 不使用 UI 框架,由零开始搭建
    从零开始搭建的情况下,进行样式初始化,在项目最开始的时候就引入,不要在开发中途引入,避免不可预知的样式冲突。

  • 不使用 UI 框架,但使用了部分插件
    插件往往都带有自己特有的样式,如富文本插件,在开发中途使用初始化样式有可能导致样式错乱,所以不建议大范围的初始化,只需简单进行初始化即可。

* {
padding: 0;
margin: 0;
}
  • 已使用 UI 框架
    在明确知道需要使用 UI 框架的时候,不使用第三方初始化样式,不管是在项目开始前还是进行中,因为 UI 框架一般都自带初始化,额外引入了反而会影响原有效果。

3. 代码规范

命名规范

class 应以功能或内容命名,不以表现形式命名
class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class
web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

代码风格

  • 统一使用展开格式,不推荐紧凑格式

    /* 展开格式 */
    .test {
    color: red;
    font-size: 12px;
    }
    
    /* 紧凑格式 */
    .test {
    color: red;
    font-size: 12px;
    }
    
  • 统一两个空格缩进

  • 属性声明结尾加分号

  • 选择器与左括号之间一个空格,属性冒号后一个空格

    /* 推荐 */
    .test {
    color: red;
    font-size: 12px;
    }
    
    /* 不推荐 */
    .test {
    color: red;
    font-size: 12px;
    }
    
  • 不要为 0 指明单位

  • 颜色值和属性值十六进制数值能用简写的尽量用简写

    /* 推荐 */
    .test {
    color: #fff;
    }
    
    /* 不推荐 */
    .test {
    color: #ffffff;
    }
    
  • 引号使用

    url() 、属性选择符、属性值使用单引号

  • 清除浮动

    当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

    触发 BFC 的方式很多,常见的有:

    • float 非 none
    • position 非 static
    • overflow 非 visible

字体规范

  • 对外商用网站,不要用font-face引入微软雅黑字体,避免侵权(包括图片内容)
  • 需要在 Windows 平台显示的中文内容,其字号应不小于 12px
网站上使用 微软雅黑 字体有三种形式:
1、【侵权】图片中使用 微软雅黑 字体,比如网站头图
2、【安全】网站 CSS 用 font-family 声明网站使用 微软雅黑 字体,比如文章标题和正文
3、【侵权】网站通过 font-face 引用 微软雅黑 ,这种方式不常见

选择器规范

在严格遵照BEM(Block Element Modifier)时,建议只使用类选择器,但 BEM 书写麻烦,所以建议如下

  • 禁用通用选择器 *
  • 不使用无具体语义定义的标签选择器

属性顺序

CSS 属性顺序是 CSS 良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作,但在项目中发现部分同学在书写属性顺序时较为随意,想到一个属性就写一个。

建议使用下列顺序进行书写

  1. 定位属性(position、display、float、left、right)
  2. 尺寸属性(width、height、padding、margin、border)
  3. 字体属性(color、font、text-align)
  4. 其他属性(background、cursor、outline)

目的是在浏览代码时,能逐步清晰目标元素的效果。

.test {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-size: 12px;
color: #333;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

4. 注释规范

单行注释

注释以 /* 开始,以 */ 结束,注释内不能嵌套注释,注释内容前后空一个空格

/* 推荐的单行注释 */
/*不推荐的单行注释*/

注:在 sass 和 less 等预处理语言上也可以使用双斜线注释,但编译后注释内容不会出现在 css 文件中,所以建议统一使用/* */注释。

模块注释

有时候我们需要对一个模块(一段代码块)进行功能性说明,并希望能明显区分其它代码,我们可以模块注释的方式。

注释以 /* 开始,以 */ 结束,前后空一个空格,第一行填写描述,最后一行行填写分割线

/* 推荐的模块注释
---------------------------------------------------- */
/* 不推荐的模块注释 ---------------------------------------------------- */

* 文件信息注释

如果需要对一个文件进行功能性说明,方便其他人快速明白该文件的作用,推荐在文件开头(字符集说明下)写入下列注释,注释内容包括文件描述、创建人、创建时间等。

@charset "UTF-8";
/**
* @desc 文件功能描述,方便其他人快速理解
* @author 创建人
* @date 创建时间
*/

5. 覆盖规范

  • 尽可能少用 importent
  • vue 单文件组件统一使用 css/less/sass scoped
  • 每个页面/组件需要有一个全局唯一的标识 id/class,属于它下面的样式都需要加上该唯一标识
  • 避免全局修改已有样式,必须具体到页面上(通过权重)
  • 禁用全匹配*选择器(特殊情况除外,如初始化)

vue 单文件组件修改样式不生效可使用 /deep/>>>

6. 媒体查询

对于内部管理系统,商务多使用 ThinkPad 笔记本,屏幕分辨率为 1366*768。建议使用Resolution Test浏览器拓展进行浏览器窗口大小调试。

下载地址:www.cnplugins.com/devtool/res…

常用尺寸如下

大小 描述
≥1366px 大屏幕 大桌面显示器
≥1200px 中等屏幕 桌面显示器
≥992px 中等屏幕 桌面显示器
≥768px 小屏幕 平板
<768px 超小屏幕 手机

优先 PC 端

默认按最大尺寸进行布局,当尺寸缩小时逐步变成移动端布局

body {
background: gray;
}
@media screen and (max-width: 1366px) {
body {
background: red;
}
}
@media screen and (max-width: 1200px) {
body {
background: yellow;
}
}
@media screen and (max-width: 920px) {
body {
background: green;
}
}
@media screen and (max-width: 768px) {
body {
background: black;
}
}

优先移动端

默认按最小尺寸进行布局,当尺寸放大时逐步变成 PC 端布局

body {
background: gray;
}
@media (min-width: 768px) {
body {
background: red;
}
}
@media (min-width: 920px) {
body {
background: green;
}
}
@media (min-width: 1200px) {
body {
background: yellow;
}
}
@media (min-width: 1366px) {
body {
background: red;
}
}

如果需要做打印样式进行适配,需要使用@media print

@media print {
body {
background: #fff;
}
}
web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

7. 单位规范

CSS 单位有两种,分别是绝对单位相对单位

  • 常用绝对单位

    • px:像素 (计算机屏幕上的一个点)
    • cm:厘米
    • in:英寸
    • pt:磅 (1 pt 等于 1/72 英寸)
  • 常用相对单位

    • %:父元素百分比
    • vw:视口宽度百分比
    • vh:视口高度百分比
    • em:当前字体倍数
    • rem:根元素字体倍数
    • * rpx:微信小程序专用,规定屏幕宽为 750rpx

使用较多的单位有 px、%、rem 三种,建议 PC 端用 px 单位、移动端用 rem,需要具体控制尺寸还是使用 px

备注:如果需要计算不同单位下的值,可以使用 css3 方法 calc()_

8. 兼容性规范

私有属性的使用

正是由于浏览器厂商的不同,导致了一些样式需要加前缀才生效,下面的常见的浏览器内核和前缀

浏览器 内核 前缀
Firefox Gecko -moz-
Chrome WebKit -webkit-
IE Trident -ms-
Safari WebKit -webkit-
Opera Presto -o-
国内知名浏览器 WebKit -webkit-
常见手机浏览器 WebKit -webkit-

CSS3 浏览器私有前缀在前,标准前缀在后

.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

备注:在 webpack 环境下,可以使用 postcss-loader 自动添加私有前缀_

版权声明
本文为[JavaScript语言]所创,转载请带上原文链接,感谢
https://blog.csdn.net/nnnn1235657/article/details/94763561

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple