一篇技术博文引发的stylelint项目实践
背景
看到项目中团队成员写CSS样式风格迥异,CSS样式的书写顺序没有鲜明的规范。想到以前看过CSS样式书写顺序的文章,决定找出来,给团队成员科普一下。查阅了好几篇文章,觉得这篇文章给出的理由最硬核,css样式的书写顺序及原理——很重要! 然而担心万一文中的观点不对,分享出去被打脸,于是决定验证一下文中的说法。发现文中的核心观点,下面这一段:
没经受起实践的检验。浏览器在渲染页面的过程中,并不是实时逐条读取样式生成CSS Rule Tree,并进行绘制,而是会将同一个文件中的同类样式先合并,再去构建样式规则树并绘制。请看下面的实验,假如浏览器是实时逐条读取样式规则并进行绘制,那么box在渲染绘制的过程中,应该在某一瞬间出现绿色的背景,实际上发现并未出现,未绘制之前,后面设置的样式就把前面设置的背景色重置了。
<style>
.box {
width:100vw;
height: 100vh;
background-color: green;
}
</style>
<script>
setTimeout(() => {
document.querySelector('.item').style.backgroundColor='blue';
}, 2000);
</script>
<style>
.box {
background-color: red;
}
</style>
<div class="box"></div>
实践证明,样式的书写顺序对页面绘制没有影响,虽然这篇文章的作者提出的观点值得商榷,但是却为我打开了学习stylelint的大门。我通过以文查文,找到了stylelint 。stylelint的价值在于能发现样式书写中的问题,并能给出一套合理的书写规范。而这,正是我想找的。
1. stylelint带来的好处
- 如下图真实项目所示,可以发现样式书写的问题,以及对样式书写方法进行优化。
- 此外,能使所有人写的样式风格都一致,看别人写的代码,就像看自己写的代码一样,立刻秒懂,易于代码维护。
- 从心中没有明确规则的书写样式,变成按照业内知名公司 (GitHub、Google、Airbnb)的样式规范要求写样式。毕竟Google就是浏览器业内的知名公司,按照Google的样式书写规则去写,不会被坑。
2. stylelint保存时自动格式化的配置方法
2.1 在VSCode应用市场,下载stylelint扩展
2.2 在项目下的.vscode/setting.json中添加开启保存自动格式化的配置
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
// ...
}
3. 如何批量修复项目样式文件?
3.1 安装stylelint相关的npm依赖包
yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order
stylelint-config-standard
作用:配置 Stylelint 规则。
官方的代码风格 :stylelint-config-standard。该风格是 Stylelint 的维护者汲取了 GitHub、Google、Airbnb 多家之长生成的。
stylelint-order
该插件的作用是强制你按照某个顺序编写 css。例如先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性。这样可以极大的保证我们代码的可读性。
stylelint-config-recess-order
stylelint-order 插件的第三方配置
3.2 根目录添加.stylelintrc.js 文件
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
rules: {
'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'extend', 'content', 'include'] }],
indentation: 2,
'no-descending-specificity': null, // 禁止特异性较低的选择器在特异性较高的选择器之后重写
// ...
},
};
3.3 在package.json中添加stylelint样式修复命令
{
"scripts": {
"lintless": "stylelint src/**/*.less --fix",
// ...
},
}
3.4 在终端下执行yarn lintless命令, 就能对不符合配置样式规范的代码进行修复,部分问题还需要进一步手动修复。
yarn lintless
一篇技术博文引发的stylelint项目实践的更多相关文章
- Windows on Device 项目实践 1 - PWM调光灯制作
在前一篇文章<Wintel物联网平台-Windows IoT新手入门指南>中,我们讲解了Windows on Device硬件准备和软件开发环境的搭建,以及Hello Blinky项目的演 ...
- Android精品源码与技术博文
Android精品源码android遵循Material Design风格天气源码基于exoplay 自定义播放器 支持直播 1 ExoUserPlayer 基本播放器...几种动画效果Animati ...
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
IT咨询顾问:一次吐血的项目救火 年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...
- 开博客这么久以来,第一篇技术文章,python与c的接口对接
在博客园开博客已经有了蛮长时间了,但是从来只是看别人的文章,自己却从未写过一篇技术文章,深表惭愧.内心还是希望能够给大家提供一些帮助的,希望这第一篇技术博客,能够给大家一些帮助.闲话少叙,开始正文. ...
- 使用Asp.Net Core MVC 开发项目实践[第一篇:项目结构说明]
先从下图看整体项目结构: Mango.Manager: 为后台管理项目 Mango.Web: 为前台项目 Mango.Framework.Core: 为常用的基础操作类项目 Mango.Framewo ...
- SAP成都研究院2018年总共87篇技术文章合集
2018年很快就要结束了.Jerry在2017年年底准备开始写这个公众号时,给自己定的目标是:2018年至少保证每周发布一篇高质量的文章.如今2018年就快过去了,高质量与否需要大家来反馈,至少从量上 ...
- Python和Flask真强大:不能错过的15篇技术热文(转载)
Python和Flask真强大:不能错过的15篇技术热文 本文精选了 Python开发者 11月份的15篇 Python 热文.其中有基础知识,机器学习,爬虫项目实战等. 注:以下文章,点击标题即可阅 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- Spring cloud项目实践(一)
链接地址:http://sail-y.github.io/2016/03/21/Spring-cloud%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/ 什么是Spring ...
随机推荐
- CrystalDiskMark v7.0.0h中文版
CrystalDiskMark v7.0.0h中文版 发布时间:2020/03/05 05:03:09作者:zhongdong CrystalDiskMark是一个轻量级高效率检测工具,所有内容整齐的 ...
- nosql数据库之Redis集群
Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施(installation). Redis 集群不支持那些需要同时处理多个键的 Redis 命令, 因为执行这些命令需要在多个 ...
- DOCKER学习_013:Dockerfile配置指令ENTRYPOINT详解
前面已经介绍了一些Dockerfile的一些指令,对于ENTRYPOINT和CMD也有介绍实验 一 ENTRYPOINT和CMD配置使用 ENTRYPOINT相当于CMD,是配置容器后的一个指令,但是 ...
- PID基础
经常有人会问到PID的用法,今天小编在这里例举温度控制中的PID部分,希望能够把PID的具体应用说明白. 先说几个名词: 1.直接计算法和增量算法:这里的所谓增量算法就是相对于标准算法的相邻两次运算之 ...
- spring MyBatis的相关面试题
(相关面试题! 供参考!) 1.ORM框架有哪些? MyBatis:半自动化框架(不是纯ORM) 需要写动态SQL语句,实体类和SQL语句之间建立映射关系 Spring:轻量级框架, Java EE的 ...
- NLP文本分类
引言 其实最近挺纠结的,有一点点焦虑,因为自己一直都期望往自然语言处理的方向发展,梦想成为一名NLP算法工程师,也正是我喜欢的事,而不是为了生存而工作.我觉得这也是我这辈子为数不多的剩下的可以自己去追 ...
- Git 分支基本命令
1. 查看当前分支 (git branch) 2. 创建分支 (git branch 分支名) 3.切换分支(git checkout 分支名) 4.分支上的常规操作 5.分支的合并 (git che ...
- java和kotlin的可见性修饰符对比
private 意味着只在这个类内部(包含其所有成员)可见: protected-- 和 private一样 + 在子类中可见. internal -- 能见到类声明的 本模块内 的任何客户端都可见其 ...
- ubuntu16.04服务自启动(弹控制台)
一.设置root桌面用户登录 1.vim /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 在最后一行添加greeter-show-manual-lo ...
- GO学习-(27) Go语言操作NSQ
Go语言操作NSQ NSQ是目前比较流行的一个分布式的消息队列,本文主要介绍了NSQ及Go语言如何操作NSQ. NSQ NSQ介绍 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优 ...