【方法篇·壹】css开发技巧-全局样式设置和局部样式

你的名字 2023-09-29 12:30 44阅读 0赞

**目录**

前言：

1.全局样式和局部样式设置

2.提升效率重要方法

3.提升效率重要方法-集中处理UI样式

4.提升效率重要方法-学会复制

5. 提升质量方法-flex、百分比、rem布局

6.解决疑难杂症方法-::v-deep和加类名

7.提升质量方法：巧用flex实现元素对齐、居中

8.提升质量方法：巧用三元表达式

--------------------

### 前言： ###

> 开发的时间久了，也越来越感受到开发效率的提升有多重要，从刚入行的一天一个静态页到现在的……大概2天完成一个项目的所有静态？具体多长时间没有统计，毫无疑问的是，现在开发的速度有了质的提升，我想是该到了总结经验的时候了，也就有了本篇文章，我想这只是一个开始，以后我会写出更多的这样的经验。
> 
> ps:因为vue用的比较多，主要以vue示例，react以及其他我也用，不过殊途同归，一样的道理。

--------------------

### 1.全局样式和局部样式设置 ###

> 请参考以下步骤，设置全局的css文件，按照下面就可实现样式全局生效。此方法各项目通用

#### 1.1 目录结构： ####

![5310fb607e364a9586867d2183035ea3.png][]

--------------------

#### 2.2 index.css设置引入css文件 ####

![38734068586c47f0a2704cfdbda7b631.png][]

--------------------

#### 3.3 入口文件main.js设置为全局 ####

![b0d9d30fc56c42678005ce0a98476e77.png][]

--------------------

### 2.提升效率重要方法 ###

> 第一件事，先去问公司的UI,一般而言，像是按钮大小，输入框大小，文字字体大小颜色，行间距，各种边距都是有着标准的，对于这样的情况要做到心中有数。
> 
> **总而言之，第一步就是先问UI，哪些东西是固定的通用的。**

--------------------

### 3.提升效率重要方法-集中处理UI样式 ###

> 举个例子，我是用elementUI的组件库，在项目中肯定不是直接用他们样式，需要自己改颜色改大小之类的，我们从一开始就专门搞一个文件集中处理他们。

如：新建element-ui.css文件，在这里集中处理以全局生效

![75d0b04545e54b73b5f2ff81ae25ee7c.png][]

**总而言之，单独集中处理第三方UI库，全局生效，大大提高效率**

--------------------

### 4.提升效率重要方法-学会复制 ###

> 官网类电商类这些可能用的少些，但对于后台管理类，就是B端产品，很多页面样式结构其实差不多，那么这个时候就要快速复制了。
> 
> **总而言之，哪些页面长得差不多就复制，细微之处之后处理。**

### 5. 提升质量方法-flex、百分比、rem布局 ###

> **前端发展到今天，几乎不存在按照1920×1080设计图固定写死的样式了，想想页面大小变化整个静态页面崩了的画面……我们需要考虑适配各种分辨率的屏幕以及尺寸，传统的媒体查询写起来属实笨重，推荐使用大量flex布局、流式布局以及淘宝的rem或者elementUI框架的el-row之类的布局，结合使用才是王道！**

--------------------

### 6.解决疑难杂症方法-::v-deep和加类名 ###

> **在vue中，我们只想修改局部的样式，而不想污染全局样式，导致其他页面跟着变化，我们可以再style中加上scope属性 然后各种::v-deep**

![27def468378a4ffe954951409e8296af.png][]

> **至于加类名的方法，请设想这样一个场景：**
> 
> **我本来设置的全局输入框是长200px，但是我想让全局某个地方的表单的某个输入框长度为300px，怎么办呢？而面临的现实是，想修改它，必须要动某个类名，且这个类名关系着全局。**
> 
> **我们可以给这个输入框的上级加一个独特的类名，这样就可以控制某些输入框，而不是全部的输入框。**

--------------------

### 7.提升质量方法：巧用flex实现元素对齐、居中 ###

**在实际项目中常常面临一个问题：**

**按钮的高度要和输入框一样高，或者这个logo要垂直居中，上下边距要一毛一样且自适应。**

**我们可以使用flex布局：**

display:flex;  
justify-content: center;//水平居中  
align-items: center;//垂直居中

--------------------

### 8.提升质量方法：巧用三元表达式 ###

在实际项目中，应该会经常遇到这样的业务场景：

密码强度验证低中高对应三种颜色；

后端返回一个字段，低危中危高危对应三个颜色；

**我们可以使用三元表达式提高效率，但是如果是需要判断两次我们又不想写函数来处理，可以使用:class+:style结合的方式，可以使代码逻辑更清晰，也避免了三元嵌套地狱的情况。**

![8cab70b906bf4ab38ae1b331b9bece39.png][]

[5310fb607e364a9586867d2183035ea3.png]: https://img-blog.csdnimg.cn/5310fb607e364a9586867d2183035ea3.png
[38734068586c47f0a2704cfdbda7b631.png]: https://img-blog.csdnimg.cn/38734068586c47f0a2704cfdbda7b631.png
[b0d9d30fc56c42678005ce0a98476e77.png]: https://img-blog.csdnimg.cn/b0d9d30fc56c42678005ce0a98476e77.png
[75d0b04545e54b73b5f2ff81ae25ee7c.png]: https://img-blog.csdnimg.cn/75d0b04545e54b73b5f2ff81ae25ee7c.png
[27def468378a4ffe954951409e8296af.png]: https://img-blog.csdnimg.cn/27def468378a4ffe954951409e8296af.png
[8cab70b906bf4ab38ae1b331b9bece39.png]: https://img-blog.csdnimg.cn/8cab70b906bf4ab38ae1b331b9bece39.png