样式管理

hzs
143 阅读4分钟

1、class名、id名规范

1.1 类名使用小写字母，以中划线分隔

正例

.page-title {
    font-size: 14px;
}

.sub-cnt {
    width: 100%;
}

反例

.pagetitle {
    font-size: 14px;
}

.subCnt {
    width: 100%;
}

1.2 id 采用驼峰式命名

正例

<h1 id="pageTitle"></h1>

反例

<h1 id="page-title"></h1>

1.3 避免使用 ID 选择器及全局标签选择器防止污染全局样式

正例

.header { 
    padding-bottom: 0px; 
    margin: 0em; 
}

反例

#header { 
    padding-bottom: 0px; 
    margin: 0em; 
}

2、书写顺序

① 定位属性：position  display  float  left  top  right  bottom  overflow  clear  z-index

② 自身属性：width  height  padding  border  margin  background

③ 文字样式：font-family  font-size  font-style  font-weight  font-varient  color

④文本属性：text-align  vertical-align  text-wrap  text-transform  text-indent  text-decoration  letter-spacing  word-spacing  white-space  text-overflow

⑤ css3中新增属性：content   box-shadow   border-radius  transform……

按照上述1 2 3 4 5的顺序进行书写。

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

原理：浏览器的渲染流程为：

①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染正如按照这样的书写书序：

.box {
    width: 100px;
    height: 100px;
    background-color: red ;
    position: absolute;
}

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。

3、预处理

3.1 为什么要使用less

  • 更清晰和更可读的代码可以以有组织的方式编写
  • 增加了变量、继承、函数等功能
  • 让CSS代码书写更简洁，提高代码复用性、逻辑性
  • 使项目更容易修改和维护

3.2 less安装

npm i -g less

3.3 less的使用

变量
@width: 10px;
@height: @width + 10px;

.header { 
   width: @width;
   height: @height; 
}

编译为：

.header {
 width: 10px;
 height: 20px;
}
混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {
 color: #111;
 .bordered();
}

.post a {
 color: red;
 .bordered();
}

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。

嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
 color: black;
}
#header .navigation {
 font-size: 12px;
}
#header .logo {
 width: 300px;
}

用 Less 语言我们可以这样书写代码：

#header {
 color: black;
 .navigation {
   font-size: 12px;
 }
 .logo {
   width: 300px;
 }
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
 display: block;
 zoom: 1;

 &:after {
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   clear: both;
   visibility: hidden;
 }
}
  • 此外还有运算、转义、函数、映射等，可在官网查看

4、适配

由于设备多样化，每个人的电脑分辨率不同，如果不进行适配，都会导致页面呈现结果参差不齐，为了解决这种情况，我们不得不进行适配

安装 postcss-pxtorem
npm install postcss postcss-pxtorem --save-dev
配置 .postcssrc.js
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      "rootValue": 100,
      "propList": [
        "*"
      ]
    }
  }
}
设置根元素字体大小

在 App.vue 中

created () {
   this.setRootFontSize();
   window.addEventListener('resize', () => {
     this.setRootFontSize();
   });
},
methods: {
   setRootFontSize () {
     let defaultSize = 1920 // 默认分辨率
     let defaultFontSize = 100 // 根元素默认字体大小
     let fontSize = document.documentElement.clientWidth * defaultFontSize / defaultSize
     document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px'
   },
}
  • 原理：利用rem单位，再动态设置根元素的字体大小，结合postcss-pxtorem把样式单位都改成rem，从而达到适配的效果
  • 非原创，参考多位大神的发文，记录一下子
avatar
文章
阅读
粉丝