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

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

前言:


开发的时间久了,也越来越感受到开发效率的提升有多重要,从刚入行的一天一个静态页到现在的……大概2天完成一个项目的所有静态?具体多长时间没有统计,毫无疑问的是,现在开发的速度有了质的提升,我想是该到了总结经验的时候了,也就有了本篇文章,我想这只是一个开始,以后我会写出更多的这样的经验。

ps:因为vue用的比较多,主要以vue示例,react以及其他我也用,不过殊途同归,一样的道理。

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


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

1.1 目录结构:

image.png

2.2 index.css设置引入css文件

image.png

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

image.png

2.提升效率重要方法


第一件事,先去问公司的UI,一般而言,像是按钮大小,输入框大小,文字字体大小颜色,行间距,各种边距都是有着标准的,对于这样的情况要做到心中有数。

总而言之,第一步就是先问UI,哪些东西是固定的通用的。

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


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

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

image.png

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

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


官网类电商类这些可能用的少些,但对于后台管理类,就是B端产品,很多页面样式结构其实差不多,那么这个时候就要快速复制了。

总而言之,哪些页面长得差不多就复制,细微之处之后处理。

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


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

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


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

image.png

至于加类名的方法,请设想这样一个场景:

我本来设置的全局输入框是长200px,但是我想让全局某个地方的表单的某个输入框长度为300px,怎么办呢?而面临的现实是,想修改它,必须要动某个类名,且这个类名关系着全局。

我们可以给这个输入框的上级加一个独特的类名,这样就可以控制某些输入框,而不是全部的输入框。

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


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

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

我们可以使用flex布局:

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

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


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

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

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

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

image.png

相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
13天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
10天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
10 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
4天前
|
前端开发 JavaScript
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
11 0
|
4天前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
|
8天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
10天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
17 0
|
14天前
|
Web App开发 前端开发
设计,兼容性----字体-------Css样式的字体,字体样式导入
设计,兼容性----字体-------Css样式的字体,字体样式导入