css 指层叠样式表 (Cascading Style Sheets),定义如何显示 html 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。
为了避免内容乱码,统一使用 UTF-8 编码保存。
样式文件第一行设置字符集为 UTF-8
@charset 'UTF-8'; /* 注意字符集说明应在第一行 */
统一使用两个空格缩进
各浏览器厂商的初始样式都不一样,为了消除不同浏览器对 HTML 文本呈现的差异,我们常引入一些初始化样式,如 normalize.css、reset.css 等,当对于这些样式的引入我们需要注意下面几种情况:
不使用 UI 框架,由零开始搭建 从零开始搭建的情况下,进行样式初始化,在项目最开始的时候就引入,不要在开发中途引入,避免不可预知的样式冲突。
不使用 UI 框架,但使用了部分插件 插件往往都带有自己特有的样式,如富文本插件,在开发中途使用初始化样式有可能导致样式错乱,所以不建议大范围的初始化,只需简单进行初始化即可。
* {
padding: 0;
margin: 0;
}
class 应以功能或内容命名,不以表现形式命名 class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class
统一使用展开格式,不推荐紧凑格式
/* 展开格式 */
.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 良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作,但在项目中发现部分同学在书写属性顺序时较为随意,想到一个属性就写一个。
建议使用下列顺序进行书写
目的是在浏览代码时,能逐步清晰目标元素的效果。
.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;
}
注释以 /* 开始,以 */ 结束,注释内不能嵌套注释,注释内容前后空一个空格。
/* 推荐的单行注释 */
/*不推荐的单行注释*/
注:在 sass 和 less 等预处理语言上也可以使用双斜线注释,但编译后注释内容不会出现在 css 文件中,所以建议统一使用/* */注释。
有时候我们需要对一个模块(一段代码块)进行功能性说明,并希望能明显区分其它代码,我们可以模块注释的方式。
注释以 /* 开始,以 */ 结束,前后空一个空格,第一行填写描述,最后一行行填写分割线。
/* 推荐的模块注释
---------------------------------------------------- */
/* 不推荐的模块注释 ---------------------------------------------------- */
如果需要对一个文件进行功能性说明,方便其他人快速明白该文件的作用,推荐在文件开头(字符集说明下)写入下列注释,注释内容包括文件描述、创建人、创建时间等。
@charset "UTF-8";
/**
* @desc 文件功能描述,方便其他人快速理解
* @author 创建人
* @date 创建时间
*/
vue 单文件组件修改样式不生效可使用 /deep/ 或 >>>
对于内部管理系统,商务多使用 ThinkPad 笔记本,屏幕分辨率为 1366*768。建议使用Resolution Test浏览器拓展进行浏览器窗口大小调试。
常用尺寸如下
大小 | 描述 |
---|---|
≥1366px | 大屏幕 大桌面显示器 |
≥1200px | 中等屏幕 桌面显示器 |
≥992px | 中等屏幕 桌面显示器 |
≥768px | 小屏幕 平板 |
<768px | 超小屏幕 手机 |
默认按最大尺寸进行布局,当尺寸缩小时逐步变成移动端布局
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;
}
}
CSS 单位有两种,分别是绝对单位和相对单位。
常用绝对单位
常用相对单位
使用较多的单位有 px、%、rem 三种,建议 PC 端用 px 单位、移动端用 rem,需要具体控制尺寸还是使用 px
备注:如果需要计算不同单位下的值,可以使用 css3 方法 calc()_
正是由于浏览器厂商的不同,导致了一些样式需要加前缀才生效,下面的常见的浏览器内核和前缀
浏览器 | 内核 | 前缀 |
---|---|---|
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 自动添加私有前缀_
目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。
当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。
standard是一个开源的JS代码规范库,制定了所谓standard(标准)的JS代码规范,配合编辑器插件可以实时检查代码规范以及语法错误,通过执行命令检查代码规范以及语法错误,自动修复(可以直接修复的)不合规范的代码,使其符合规范
对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。
为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)
引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...
嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口
W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。
不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!