清楚CSS指定样式，怎么清除？_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
清楚CSS指定样式，怎么清除？
css 里面有height有一个style:300
有两个js都用到了这个style.我现在其中一个js不用这个height:300了我还不能改style.css中的公共样式， 我怎么做才能清除掉这个css；（不是修改height的值；我现在有一个js不用了，是清除掉
问题问的比较含糊吧，其实不太能理解是想要整理样式，还是想要在原有基础上覆盖样式。======整理样式=====在我们写样式的时候，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存 在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。下面介绍几个分析无用样式的工具：【Dust-Me selectors】Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。支持本地和远程样式文件，包括使用&link&标签、&?xml-stylesheet?&处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的&style&块和内联样式)支持IE条件注释中引入的样式文件；可以检查一个页面，也可以检查整个网站；支持CSS1选择器、大部分CSS2和CSS3选择器；理解通用的CSS hack，比如 “* html #fuck-ie”将会被认为是”html #fuck-ie”；支持Firefox 3.5和Firefox 3.0，事实上得益于FF 3.5的js引擎的改进，FF 3.5中的性能比FF 3.0要高50%。你可以下载该项目的源代码，了解更多请访问 Dust-Me selector官方页面。【Page Speed】Page Speed是Google提供的一个前端性能分析工具，有些类似于YSlow，但是提供了一些比较个性且很有用的工具，比如Remove unused CSS：Page Speed和YSlow一样依赖Firebug。【CSS Redundancy Checker】CSS Redundancy Checker 是一个免费的在线应用，可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能 检查多个HTML页面，但每次只能检查一个CSS文件，而且还要手动输入：【IntelliJ IDEA】IntelliJ IDEA 这是一个颇强大的IDE，类似于DreamWeaver，不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis)，可以分析CSS文件中未用到的class和id。【Expression Web】Expression Web作为微软的新一代网站开发工具，还是有很多人使用的，其CSS Report功能可以检查未用到需要被清除的CSS（我的确没有使用EW开发过网站，希望使用该软件的童鞋可以帮忙确认一下这一点）。另外，通常我们将整个网站的样式写入一个或多个样式文件中，然后在页面中全部调用或者分模块调用，那么某个CSS文件中的样式可能在某个页面中的确 没有用到但是在其它的页面中被用到了，所以使用这些工具检测CSS文件中多余的样式的时候，需要保持一定的谨慎，清除样式可能会影响到其它的页面，所以 page speed提供的检查结果只适用于单个页面，不适合整个网站，而使用Dust-Me或CSS Redundancy Checker的时候可以对整个网站或者网站的多个页面同时检查，这样可能能避免万无一失。&======覆盖样式=====有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下:&/*&css样式&*/#navigator&{height:100%;width:200position:&left:&0;border:&solid&2&#EEE;}.current_block&{border:&solid&2&#AE0;}CSS优先级如下排列：&1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：id选择器指定的样式 & 类选择器指定的样式 & 元素类型选择器指定的样式所以上例中，#navigator的样式优先级大于.current_block的优先级，及时.current_block是最新添加的，也不起作用。&2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：/*&Css代码&*/&.class1&{color:&}&&.class2&{color:&}而某个元素指定class时采用 class=&class2 class1&这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。3. 如果要让某个样式的优先级变高，可以使用!important来指定：/*&Css代码&&*/.class1&{color:&black&!&&}&&.class2&{color:&}&此时class将使用black，而非red。对于一开始遇到的问题，有两种解决方案：1. 将border从#navigator中拿出来，放到一个class .block中，而.block放.current_block之前：/*&Css代码&*/&&#navigator&{height:&100%;width:&200;position:&&left:&0;&&}&&.block&{border:&solid&2&#EEE;&}.current_block&{border:&solid&2&#AE0;}&需要莫仁为#navigator元素指定class=&block&&2. 使用!important:&/*&Css代码&&*/#navigator&{height:&100%;width:&200;position:&left:&0;&border:&solid&2&#EEE;}&&.current_block&{border:&solid&2&#AE0&!}&此时无需作任何其他改动即可生效。可见第二种方案更简单一些。&
采纳率：55%
来自团队：
还原height为默认值，.style.height = “auto!important”
本回答被网友采纳
removeAttr('#demo')那就用Jquery清除掉$(&#39
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包【译】CSS变量的正确使用方法
我的图书馆
【译】CSS变量的正确使用方法
原文：原作者：翻译：百度外卖FE - 安秦译者注前端的发展真的是好快，这两年JS的发展几乎掩盖了其他前端技术的光芒，然而不知不觉中原生CSS也变得这么强大。这篇文章不是语法介绍也不是教程，看完之后却才真正地体会CSS变量的好处。先简单说明一下CSS变量目前的规范语法：用两个“-”开头表示声明变量，如：--white-color: #FFF用var(...)引用变量值，如：background: var(--white-color)译文CSS变量（又称自定义属性）现以得到所有主流浏览器的支持，人们已经开始再生产环境中使用它们。这很好，不过它们跟各种预处理器中的变量是不一样的，而我见过很多例子，写代码的人并没有意识到CSS变量真正的优势。它们终究会改变我们CSS的写法以及思维方法。我认为我有必要做进快速的demo来演示一些CSS变量的正确或者错误的使用案例，挺尸也演示它们与预处理器的区别是如何改变我们CSS代码结构的。有什么区别？首先，它们区别在哪里？最主要的区别是，CSS变量可以改变。这听起来一点也不让人惊讶，变量肯定能变。你可能没仔细想过，像Sass这样的预处理器，里面的变量是静态的。的确，你可以在编译过程中的不同时间点改变一个变量的值，但是当它被翻译成CSS以后他们就是静态的了。预处理器里的变量是个非常的好的工具，能够帮助我们写出很DRY（don't repeat yourself：不冗余）并且易于维护的CSS代码。CSS变量不太一样，它可以响应页面上下文变化。变量作用域可以是静态或动态的，CSS变量作用域是动态的。具体来说，动态作用域意味着可以存在继承与层叠。这很棒，因为这样你的可以在媒体查询里或者符合某种选择器的元素里改变变量的值。同样的变量可以在页面的不同位置有不同的值。你甚至可以用JavaScript读取或更改CSS变量。如果你没有仔细想过多少CSS变量的用法，看完这篇文章你就见识到了。不过我会先演示一下CSS变量的错误用法。CSS变量实现缩放模块化我将以模块化（modular scale）为例。缩放模块化是一种尺寸缩放方法，可用于给标题元素设置合适的尺寸。我很喜欢这么做，而且还喜欢给不同的屏幕尺寸设置不同的缩放比例。我想要给小屏幕设置1.2倍缩放，大屏幕1.33倍。我不喜欢算数所以我从获取以下的数值并用作我的标题元素尺寸：不要这么做…这是个使用CSS变量的完美场景。如果使用Sass的思考方式，也是我如今见过很多人用CSS变量的方式，会是如此：:root { /* 1.2倍缩放 */ --ms-small-1: 1em; --ms-small-2: 1.2em; --ms-small-3: 1.44rem; --ms-small-4: 1.728rem; --ms-small-5: 2.074rem; --ms-small-6: 2.488rem; /* 1.33倍缩放 */ --ms-large-1: 1rem; --ms-large-2: 1.333rem; --ms-large-3: 1.777rem; --ms-large-4: 2.369rem; --ms-large-5: 3.157rem; --ms-large-6: 4.209rem;}这看起来很合理，我们为每一种尺寸定义了相应的变量。然后我想就会看到这：/* 小屏幕有小的缩放比例: */h1 { font-size: var(--ms-small-6);}h2 { font-size: var(--ms-small-5);}h3 { font-size: var(--ms-small-4);}h4 { font-size: var(--ms-small-3);}h5 { font-size: var(--ms-small-2);}h6 { font-size: var(--ms-small-1);} /* 大屏幕有大的缩放比例 */@media screen and (min-width: 800px) { h1 { font-size: var(--ms-large-6); } h2 { font-size: var(--ms-large-5); } h3 { font-size: var(--ms-large-4); } h4 { font-size: var(--ms-large-3); } h5 { font-size: var(--ms-large-2); } h6 { font-size: var(--ms-large-1); }}正常运行！更好的是，如果我希望改变任何一个值我只需要在一处更改。在CSS的其他地方使用变量还会带来更多的好处。就像Sass一样，这很DRY，比普通的CSS要好很多。然而我们可以做得更好。要像这样做……上面的例子看起来逻辑很严谨，但是它并没有真正利用到CSS变量的真正原理。我们再来一次，这次记得CSS变量是根据DOM产生作用域的，所以可以有集成与层叠。:root { /* scale for 1.2 */ --font-size-1: 1em; --font-size-2: 1.2em; --font-size-3: 1.44rem; --font-size-4: 1.728rem; --font-size-5: 2.074rem; --font-size-6: 2.488rem;} @media screen and (min-width: 800px) { :root { /* scale for 1.33 */ --font-size-1: 1rem; --font-size-2: 1.333rem; --font-size-3: 1.777rem; --font-size-4: 2.369rem; --font-size-5: 3.157rem; --font-size-6: 4.209rem; }}注意我这次只有一组变量，而不是每种缩放比例都有一组。我是根据屏幕尺寸改变变量的值。这种写法导致：我必须改变变量的命名方式（不再有small或large）CSS的其他地方不再需要有媒体查询我现在可以在我的属性定义当中直接使用变量，并且知道它们会根据需要而改变。所有响应式逻辑都在变量里。剩下的CSS就如下即可：h1 { font-size: var(--font-size-6);}h2 { font-size: var(--font-size-5);}h3 { font-size: var(--font-size-4);}h4 { font-size: var(--font-size-3);}h5 { font-size: var(--font-size-2);}h6 { font-size: var(--font-size-1);}以上的例子展示了一种更好的方式来使用CSS变量。CSS变量代码结构的组织技巧变量是可以根据CSS结构而变化的，尤其在于响应式设计相关的方面。逻辑与设计分离：最大的优势是，我们现在可以完全分离逻辑与设计。更明确的说法是，我们可以把变量声明与属性声明分开。.this-is-a-variable-declaration { --my-var: red;}.this-is-a-property-declaration { background: var(--my-var)} 在用预处理器的时候，把变量与其余的定义声明分开是很好的实践方式，用CSS变量时也应如此。改变值而不是变量：在大多数情况中，我认为在媒体查询或选择器中用另一个变量覆盖原有的变量是很臭的写法。与其改变引用的变量，更好的做法是只定义一个变量，设置一个厨师值然后在媒体查询或选择器中改变它的值。如果它会变那就是个变量：我相信在多数情况下，响应式设计逻辑应该用变量实现。这里还有过很激烈的讨论，不论是在媒体查询或是元素作用域中，如果有任何属性值是需要变化的，它就应该使用变量。如果它会变，那么它从字面上讲就是个变量，那么这个逻辑就应该与设计分离。减少媒体查询：讲道理，所有与变量相关的逻辑都应该放到文档的最开头。这样更好维护，因为你可以在一个地方改变它们，这样也更好阅读，因为你不用看整个样式代码就可以知道有哪些东西会发生变化。用媒体查询达不到这样的效果，因为它会需要把对同一个元素的样式定义分成碎片并分布到代码的不同位置。这样的做法操作麻烦还不好维护，所以只好把媒体查询与被他们影响的选择器放到一起。用变量就可以将逻辑与设计的实现联系起来。这就是说，通常媒体查询除了修改变量值就不再有别的需求了，然后它们应该存在于文档的开头语变量声明放在一起。以上，“逻辑折叠”。简化选择器：将逻辑与设计里可以简化你的主要属性声明以至于你可以把很多选择器直接组合在一起。这个例子，我有一个侧边栏和一个主元素，它们拥有不同的字体大小。侧边栏有深色背景而主元素有浅色背景。/* 变量默认值 */:root { --font-size: 1.2em; --background-color: #fff; --text-color: #222;}/* 侧边栏的变量值 */aside { --font-size: 1em; --background-color: #222; --text-color: #FAFAFA;} /* 相同的属性声明 */main,aside { font-size: var(--font-size); color: var(--text-color); background-color: var(--background-color);}虽然拥有完全不一样的样式，这两个元素却拥有一样的属性定义。减少通用变量：提一个警告：不要使用过于通用的变量。你也许会觉得搞个全局选择器，然后使用变量实现所有的逻辑很有趣：/* 别这样 */*{ display: var(--display); width: var(--width); height: var(--height); border: var(--border); background: var(--background); ...}虽然很好玩，但是我们应当谨慎地复用变量以及合并选择器。CSS变量会响应层叠定义，按照上面的例子，当给.container如下设置边框时：.container { --border: solid 2px tomato;}所有在这个容器里的元素都会继承相同的边框。很快你就需要给所有的元素重设变量，不用 * 全局选择器就不会栽入这个坑。利用预处理器使用静态变量：CSS变量可以完全替代预处理器？并不能，使用预处理器依然有意义。所有的静态变量保持使用Sass（或其他什么你正在用的预处理器）是很好的想法。// 静态变量:$breakpoint-small: 600px;$theme-color: rebeccapurple;// 动态变量@media screen and (min-width: $breakpoint-small) { body { background: $theme-color; }}这不光是演示在用静态变量表示一个会动态变化的值，事实上CSS变量只能在属性声明中引用，不能在媒体查询里引用。预处理器还有颜色计算函数、mixin以及文件拆分，这些东西依然有用。新的响应式设计实现方案我认为CSS变量提供了一种全新的方式来实现响应式设计，并且会挑战很多我们已经习惯使用的技巧以及思维方式，以上只是一些显而易见的的提示。我围绕文中介绍的一些技巧与建议做了一个简单的例子：，我极力推荐大家去研究一下这代码。
TA的最新馆藏
喜欢该文的人也喜欢拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3c5e367f362e43b3-ua98).
重新安装浏览器，或使用别的浏览器怎样正确使用Stylelint来对你的Sass/CSS代码静态检查 - 众成翻译
最后更新于 日 。
很少人会去对样式表进行静态检查。不过，许多人应该尝试这么做，尤其是在一个大家都会修改代码库的队伍里。
在这篇文章里，我会讲一讲为什么我们需要对样式表进行静态检查，以及怎样把纯CSS或者Sass的样式表静态检查加入我们的构建流程中。
什么是静态检查？
静态检查就是对源代码进行语法和代码规范的检查。它对定位一些编程过程中常见或不常见的错误都很有帮助。本质上，它就是一个编程语言的拼写检查工具。静态检查不仅仅在你一个人工作时很有帮助，在很多（不小心的）人会接触代码的团队里，静态检查更是会带来额外的好处。
静态检查器是一个实现静态检查（检查代码质量）的程序或者工具。目前，主流的语言，如C，Python，JavaScirpt，CSS等都有对应的静态检查工具。
我们为什么要对样式表静态检查？
对样式表进行静态检查的原因有很多。它能确保代码的一致性，定位代码中的错误，减少冗余代码，以及避免出现偷懒的写代码方式。
让我们来看一些例子
.no-space-after-colon {
.no-semicolon {
position: relative ?
静态检查很擅长发现这样的编码风格问题。怎么样配置你的代码风格检查不是最重要的，重要的是它们保证了代码的一致性。而且，我不知道你怎么想，但是对我来说，这样的两种编码风格问题是我不能忍受的。
.invalid-hex {
color: #FFF00G;
静态检查同样很擅长发现像是由于拼写错误导致的不合法的hex颜色值。这样的错误如果没被发现，可能会破坏你们非常重要的显示效果。
.unnecessary-prefixes {
-webkit-border-radius: 5
-moz-border-radius: 5
border-radius: 5
现在，有不少CSS3的规则已经不需要前缀才能工作了。静态检查可以发现这样的规则，帮助你删除不必要的前缀跟过时的代码。前缀的静态检查跟一起工作时表现得特别好--它们帮助你去掉所有的前缀，仅仅在你指定的目标对象上加前缀。
.duplicate-rule {
transition: opacity .2s;
color: #444;
background-color: #
transition: background-color .4s; ?
重复的规则是一种常见的错误。如果程序员希望不透明度跟背景色都是动态过渡的，那上面的代码里，不透明的过渡就不会起作用。不过，静态检查可以发现这个错误。
信了么？如果还没有，那就接着往下看...
Stylelint简介
是一个JavaScirpt实现的可扩展、灵活的CSS静态检查工具。它在CSS静态检查方面是最新、最好的。它支持最新的CSS语法，理解类CSS语法，并且支持插件扩展。还有，由于它是用JavaScirpt而不是Ruby实现的，它比要快得多得多。
Stylelint是一个高效、现代的CSS静态检查工具，它能帮助你实现代码规范的一致性，并且能避免样式表里的一些错误。
Stylelint使用了 ，所以它能处理任何PostCSS能处理的语法，包括Sass。
PostCSS是一个用JS插件处理样式表的工具。这些插件可以检查你的CSS，支持变量跟mixin，编译未来的CSS语法，以及行内置你的图片等等。
PostCSS的宗旨是只做一件事，并把它做好。所以，它完全是基于插件的。目前，PostCSS有超过200个插件，而且因为它们都是由JavaScirpt实现的，所以速度很快！
在下面的章节里，我们会用PostCSS和Stylelint来检查我们的样式表。
Stylelint配置文件
Sytlelint的魅力之处在于它的灵活。你可以从头开始构建自己的编译规则，所以它灵活不灵活都是你决定的。你完全不需要在开始之前，花很多时间来删除你不需要的规则。
你最好在开始前读一读，他们同时提供了一个 让你在你的工程中使用，这个配置文件已经相当不错了。
不过，我们开始的时候，会用一个短小精悍、包含了最基本的一些东西的配置文件。我个人而言，它比Stylelint提供的那个要好，因为它让你可以在里面加规则，而不是删除你不需要的多余规则。
这个配置文件大致长这个样子：
&rules&: {
&block-no-empty&: true,
&color-no-invalid-hex&: true,
&declaration-colon-space-after&: &always&,
&declaration-colon-space-before&: &never&,
&function-comma-space-after&: &always&,
&function-url-quotes&: &double&,
&media-feature-colon-space-after&: &always&,
&media-feature-colon-space-before&: &never&,
&media-feature-name-no-vendor-prefix&: true,
&max-empty-lines&: 5,
&number-leading-zero&: &never&,
&number-no-trailing-zeros&: true,
&property-no-vendor-prefix&: true,
&rule-no-duplicate-properties&: true,
&declaration-block-no-single-line&: true,
&rule-trailing-semicolon&: &always&,
&selector-list-comma-space-before&: &never&,
&selector-list-comma-newline-after&: &always&,
&selector-no-id&: true,
&string-quotes&: &double&,
&value-no-vendor-prefix&: true
我建议你通读一遍 ，然后在里面添加你需要的检查配置。现在，先让我们来用这些规则配置我们的工作流。
怎么检查CSS
首先，让我们从检查纯CSS开始。你一定会惊讶于它的配置是多简单。你需要先安装gulp-postcss, postcss-reporter以及 stylelint：
`npm install gulp-postcss postcss-reporter stylelint --save-dev`
然后这个gulp文件可以把它们连在一起：
* Linting CSS stylesheets with Stylelint
* /2016/02/How-to-lint-your-css-with-stylelint/
= require('gulp');
var postcss
= require('gulp-postcss');
var reporter
= require('postcss-reporter');
var stylelint
= require('stylelint');
gulp.task(&css-lint&, function() {
// Stylelint config rules
var stylelintConfig = {
&rules&: {
&block-no-empty&: true,
&color-no-invalid-hex&: true,
&declaration-colon-space-after&: &always&,
&declaration-colon-space-before&: &never&,
&function-comma-space-after&: &always&,
&function-url-quotes&: &double&,
&media-feature-colon-space-after&: &always&,
&media-feature-colon-space-before&: &never&,
&media-feature-name-no-vendor-prefix&: true,
&max-empty-lines&: 5,
&number-leading-zero&: &never&,
&number-no-trailing-zeros&: true,
&property-no-vendor-prefix&: true,
&rule-no-duplicate-properties&: true,
&declaration-block-no-single-line&: true,
&rule-trailing-semicolon&: &always&,
&selector-list-comma-space-before&: &never&,
&selector-list-comma-newline-after&: &always&,
&selector-no-id&: true,
&string-quotes&: &double&,
&value-no-vendor-prefix&: true
var processors = [
stylelint(stylelintConfig),
// Pretty reporting config
reporter({
clearMessages: true,
throwError: true
return gulp.src(
// Stylesheet source:
['app/assets/css/**/*.css',
// Ignore linting vendor assets:
// (Useful if you have bower components)
'!app/assets/css/vendor/**/*.css']
.pipe(postcss(processors));
怎么样，简单吧？把所有的检查规则跟import加起来，我就写了50多行。你要做的就是把里面源文件的位置改成你自己的项目！
更棒的是，只要改一行代码，就可以支持Sass！让我们来看看怎么做：
怎么检查Sass
用PostCSS检查Sass文件超级简单。检查CSS跟Sass的唯一不同，就是你要让PostCSS能理解.Scss语法。而你要做的，就只是安装postcss-scss并修改一行上面的代码
`npm install postcss-scss --save-dev`
return gulp.src(
['app/assets/css/**/*.scss',
'!app/assets/css/vendor/**/*.scss']
.pipe(postcss(processors, {syntax: syntax_scss})); ?
`npm install gulp-postcss postcss-reporter stylelint postcss-scss --save-dev`
这里是完整的gulp文件：
* Linting Sass stylesheets with Stylelint
* /2016/02/How-to-lint-your-css-with-stylelint/
= require('gulp');
var postcss
= require('gulp-postcss');
var reporter
= require('postcss-reporter');
var syntax_scss = require('postcss-scss');
var stylelint
= require('stylelint');
gulp.task(&scss-lint&, function() {
// Stylelint config rules
var stylelintConfig = {
&rules&: {
&block-no-empty&: true,
&color-no-invalid-hex&: true,
&declaration-colon-space-after&: &always&,
&declaration-colon-space-before&: &never&,
&function-comma-space-after&: &always&,
&function-url-quotes&: &double&,
&media-feature-colon-space-after&: &always&,
&media-feature-colon-space-before&: &never&,
&media-feature-name-no-vendor-prefix&: true,
&max-empty-lines&: 5,
&number-leading-zero&: &never&,
&number-no-trailing-zeros&: true,
&property-no-vendor-prefix&: true,
&rule-no-duplicate-properties&: true,
&declaration-block-no-single-line&: true,
&rule-trailing-semicolon&: &always&,
&selector-list-comma-space-before&: &never&,
&selector-list-comma-newline-after&: &always&,
&selector-no-id&: true,
&string-quotes&: &double&,
&value-no-vendor-prefix&: true
var processors = [
stylelint(stylelintConfig),
reporter({
clearMessages: true,
throwError: true
return gulp.src(
['app/assets/css/**/*.scss',
// Ignore linting vendor assets
// Useful if you have bower components
'!app/assets/css/vendor/**/*.scss']
.pipe(postcss(processors, {syntax: syntax_scss}));
超级简单是不是！就只要这样，你现在可以同时检查CSS跟Sass了！
如果你想知道怎么用插件扩展Stylelint以及这么做的原因，请继续阅读，我会用一个例子来讲解。
用插件扩展Stylelint
跟PostCSS一样棒，Stylelint可以用插件扩展。
让我们看一个例子，这个例子里，静态检查可以提高代码的可读性，也可以提醒那些偷懒的程序员，如果他们想用奇怪的方法修改代码来达到目的，并把这样的代码放到代码库里。
例子: 实际使用静态检查
####喜欢写代码的PM
这个例子怎么样。一个PM正管理着一个开发中的web应用，为了节省其他程序员的宝贵时间，他决定自己加一个新功能。这个功能是在鼠标悬停于一个组件上时，给它加一个阴影，并给子组件的链接加一个悬停的状态。
最坏的情况是怎么样的呢？
PM: 相信我，我行的。
把这个代码库给毁了。
— I Am Devloper (@iamdevloper)
这是那个PM加到项目里的代码：
.component {
&:hover { ?
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
.component__child { ?
&:hover { ?
text-decoration:
别在Sass里用嵌套的选择器 —用静态检查！
用Sass开发的时候，嵌套的选择器虽然不好，但是不可避免。如果用得好，它非常有用。但是如果乱用，就会导致代码 。嵌套常常是偷懒导致的，而偷懒会让代码难以阅读，实现糟糕。第一个&:hover{...}可能在父元素定义的10行以下，这导致你很难看出它属于哪个元素。但是，更关键的是，这里的嵌套完全是没必要的。
上面的规则会被编译成：
.component:hover .component_child ul li a:hover {}
/* 握草什么鬼 */
如果我的组里有人把这样的代码提交到代码库里，我真的真的会想骂人。
后来想改这段代码的程序员会很头疼。记着，我建议你绝对不要用嵌套的CSS，除非你知道你自己在干嘛。
好在，有个插件可以解决这个问题！我们可以给Stylelint安装stylelint-statement-max-nesting-depth并设置一个最大嵌套值来避免乱用嵌套。
`npm install stylelint-statement-max-nesting-depth --save-dev`
简单地把下面的加入我们的Sass检查任务里，它们就都连起来了：
gulp.task(&scss-lint&, function() {
var stylelintConfig = {
&plugins&: [
&stylelint-statement-max-nesting-depth&
&rules&: {
&statement-max-nesting-depth&: [3, { countAtRules: false }],
对于有经验的队伍，我会把最大嵌套设为3。（对于新手，把这个值调小）。
当最大嵌套设置为3之后，Stylelint会提醒PM重写他的代码。PM回去想了想，又写了这样的代码：
.component:hover {
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
.component__child {
text-decoration:
这个重写的版本比原来的好看一点，但是还是不能接受。这里嵌套的选择根本就没必要！静态检查知道这一点，并会让PM重新想直到他能通过检查。
.component:hover {
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
.component__child {
text-decoration:
现在，有点像样了。静态检查会接受这些代码。上面的代码不差，但是还能更好。如果你想特别严格，你可以把所有嵌套全关了，除了@规则。这会逼得所有人，包括PM，在他们写代码的时候，仔细想想他们在做什么。
.component:hover {
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
.component__link:hover {
text-decoration:
不错！ 如果没有静态检查样式表，提醒你重构代码，这样的偷懒永远不会被发现，然后代码库的质量就会不断下降。
希望到此为止，我已经让你相信对样式表静态检查是值得的投入。静态检查是你的朋友。你只要投入一点，就可以保证你的队伍不受糟糕代码的影响。
赶紧去用吧，我的程序员以及设计师朋友们！
从此以后，都用静态检查！
一键安装Sass的gulp构建流
你觉得，如果只要安装一个很小的npm模块，就能够免费得到一个完整的构建Sass以及静态检查的工作流怎么样？
我觉得不错。为此，我开源了一个模块，叫，你可以看看去了解它。
文章内容对你有帮助吗？
不确定有没有帮助
非常有帮助
你觉得译者翻译得如何？
非常感谢！您的评价已成功提交。}