Top 10 bad CSS usages that should be avoided when refactoring your webpage_html/css

For web page reconstruction, CSS Zen Garden is a sign that the web page layout has changed from table to html css. Over the years, as our websites have become more and more complex: html5, css3, new technologies, new properties, more and more developers have begun to think and try to improve their CSS skills. So where do we start? For web page reconstruction work, what kind of development habits should we develop? What is a bad css usage? What should we do with this bad css. In today’s article, I will talk about 10 bad uses of CSS that we should avoid. Of course, we will also share how to use them correctly.

In order to make it easier for everyone to understand, I have classified these 10 bad usages into three major categories: weight, workflow, and self-righteousness.

Weight! Weight! ! Weight! ! !

As the so-called Matthew effect is, if you write bad css, the bad thing about this bad code is that it will lead to more and worse code. If you need to solve a css bug and find that the only solution is: use more levels of selectors, id selectors, or even worse: use inline-style, until the last killer! important . All the above mentioned usages ultimately end up making the mistake of "excessive weight".

Weight in CSS depends on how you use specific css rules.

#layout #header #title .logo a { display: block; }

Looking at the above string of CSS selectors, you may think this is a semantically "good" choice Device: Simple and clear. If you are accustomed to reading from left to right, you may understand it this way: "First find the main layout area, then find the header area, then find the title area, then find the logo area, and then find all the a anchors in it "Point", for css, this is a very specific and precise positioning, but in fact we rarely have the opportunity to need such precise positioning. Excessive CSS weight will make your style sheet more difficult to maintain (have you ever considered the feelings of your colleague who will take over your shift!), and more difficult to read and understand (what are you doing with so many layers of declarations and a long list)? .

01. Abuse of id

The weight of CSS depends on what kind of selector you use: id, class, tags. For example:

#my-link{color: red}.my-link{color: yellow}a{ colour: blue}

Copy after login

To do a small test, there is such a hyperlink as follows. If we do not define other styles, what color will the final result rendered by the browser be?

<a href="#" id="my-link" class="my-link">举个栗子</a>

Copy after login

The final color will be red, because the id attribute has the highest weight among the three (id can only be used once in a web page, he The weight value is 100), so the red gourd doll successfully defeated the other dolls and lifted the chestnut.

According to the css weight, the weight next to the id is the class class, and finally the tag tag, as you can see in the inspector above.

Of course, the situation of "using id/calss/tag at the same time" like the chestnut we cited above is still rare in actual applications. In daily development, we often do Encountered the following situation:

#header a { border:2px dashed #000 }

Copy after login

Assume this is one of our projects, and now we decide to set a link in the header to be borderless. As we write, we add:

.special-link { border:none }

Copy after login

Then we added a special-link class to the html. Did this solve our problem? The answer is: no! Since the weight of id is so high, we need a higher weighted declaration to achieve our needs. The following is the correct way to write:

#header .special-link { border: none }

Copy after login

Suppose this situation keeps appearing in our code process: set another special feature in the header area The hyperlink link has a special style. How should you deal with it? The high weight of ids means that abusing ids is definitely a bad idea!

So how do we solve this problem? Use class instead of id.

02. A large list of css selectors (multi-level)

#header #title .left-side img.logo { opacity: 0.5 }

Copy after login

The example above is not only a mess of IDs, it is also very long. Just like the high weight trouble caused by messing with IDs, if you use a large list of selectors (More than three levels) You will also create too much weight, causing you to fall into a sea of high weights and higher weights.

So what’s the solution to this problem? Simplify! Just like our current chestnut, if we can solve our needs with a .logo class, then we don't need to write such a long string. Generally speaking, we should control the number of selectors to be 2 or 3 at most.

03.Inline styles

Inline styles are the source of the evil of CSS weight, and they also fundamentally destroy the original intention of using CSS (separation of structural styles). When our engineers finally got out of the magic cave of tables and embraced external style sheets, we should have known not to mix style with structure.

根据 css 权重级的特性，内联样式只能被!important 所覆盖。一般来说，这就意味着，如果某猿使用了!important，他们更多是被逼的没办法才这么用(对应英文 reactive)，而不是想这么用(preoactive)。的确!important在 css 样式表中用起来十分方便，但我们最好是聪明地、小心翼翼地碰她、用他，而不是把他当做救命稻草(救命稻草用多了，迟早也会从救命稻草变成压死骆驼的稻草)。

下面举例怎么解决内联样式的问题，就两步 1.复制删除 2.粘贴。剔除内联样式，转移到样式表之中吧。

04.从上至下式的粗放命名

说完 css 权重，接下来我们来谈谈其他 CSS 的糟糕用法。假设我们开始了一个新项目，设计师丢给我们一份 psd，我们开始在 html 中写基本的框架。

根据结构从下至上式的命名方式模糊化了 html 结构，工程师常常根据上下结构来命名id 和 class，而不是具体的设计元素，例如#header,content，这常常会导致长选择器(举个例子如. menu ul li a｛　｝)，这样的后果是我们的代码变得难以调试和维护。怎么解决这个问题呢？我们应该尝试从网页中分离出设计元素，这同样可以减少我们代码中的冗余。

05.冗余/重复

冗余意味着你写 css 的过程中不断重复某些代码。在使用编程语言的时候，我们很好理解重复(造轮子)意味着浪费时间，我们在 code 中应该遵循 DRY 原则(Don’t repeat yourself)。什么情况下我们会重复造轮子呢？举个栗子：

.some-title { font-weight: bold; }.some-other-title { font-weight: bold; color: red }

Copy after login

实际上，我们可以有个更好的解决办法

.some-title, .some-other-title { font-weight: bold; }.some-other-title { color: red; }

Copy after login

比如说我们要添加一个不同颜色的标题，我们可以使用一个常用的命名，或者添加一个具体的 class 类。

<h3 class="some-title pop">我的标题/h3>

Copy after login

这个有点面向对象的CSS的思想在里面，使用 Sass 中的 @extend 特性可以很好地解决我们这个问题。

在 Sass 之中，你可以使用@extend 继承选择器，被继承的选择器的样式也被继承。这个特性使得我们可以很方便管理不同的样式，举个栗子：

.some-title { font-weight: bold; }.some-other-title { @extend .some-title; color: red; }

Copy after login

当CSS预处理编译器将.scss转换成.css文件时，我们最终输出的样式是：

.some-title, .some-other-title { font-weight: bold; }.some-other-title { color: red; }

Copy after login

最终输出的是一模一样的效果，解决重复和冗余的问题，要求我们在写 css 的时候心中对 html 层级结构要有个大致的规划，思考不同的设计元素之间的层级和关系，我们规划得越清晰，最终输出的 css 也越精简。

06.精简你的单位

如果你的样式表中混杂着 px,em,rem等等单位，是时候改变了，业内著名的web开发者Rachel Nabors 呼吁大家统一使用em为字体大小单位，他曾说「我看其他人的样式表第一件事就是看字体样式，然后把所有的font-size的单位换成em」，这几年用户使用的终端越来越多样(不同的终端、不同的浏览器使用的默认字体大小存在差异)，使用绝对字体大小px变得越来越不可控，使用em等相对大小的字体则避免了这个问题。

如果你想在转成em对这些单位有个深入点的了解，推荐你阅读《CSS文字大小单位PX、EM、PT》。

当然，如果你就是不喜欢em和他们嵌套特性，那么你可以更进一步了解 CSS3 中推出的新单位rem。

不同单位在 web 设计之中的战争还在继续(可参考文章CSS Font-Size: em vs. px vs. pt vs. percent

)，学习一点相关知识对我们提高代码可维护性至关重要。

下面我们进入到这篇博文的第三也是最后一个部分「自以为是」，这些坏习惯包括：增加不必要的东西，错误，无意义的 css。

07.向下兼容和无效的规则

在开发的过程中，如果你不需要使用 css3 之类的高大上代码就能实现效果，那再好不过了。可是，作为工程师的你在 Chrome 最新版本上面看到的效果，并不意味着你的用户能在他们的浏览器上看到同样的效果(考虑过 IE 的感受没有)，一个十分糟糕的坏习惯就是完全忽略向下兼容性。

如果你在项目中使用rgba()，你是否测试过这个属性的兼容性？如果没有，那你最好祈祷没有 IE8的用户会访问你的网站。你是否写全了针对不同浏览器的不同的规则(-webkit,-ms -moz 等等)？解决这个问题，可以使用 CSS LInt检测下你的 css 代码，CSS Lint的检测规则包括错误的和不合理的地方。

08.(没有意义)不起作用的样式

Harry Roberts的Code smells in CSS是关于 css 糟糕用法的经典文章。他举了几个可有可无的不起作用样式的栗子：

h2{font-size:2em;margin-bottom:0.5em;padding-bottom:0.5em;border-bottom:1px solid #ccc;}.no-border{padding-bottom:0;border-bottom:none;}

Copy after login

Roberts 推荐的重构精简方法是删掉属性为0和none的属性值。

h2{font-size:2em;margin-bottom:0.5em;}.headline{padding-bottom:0.5em;border-bottom:1px solid #ccc;}

Copy after login

如果你像重构之前的那样写法，h2是一个我们在web 设计中会不断重复用到的元素，这个本质上「你写了更多的代码却没有实现了更少的样式效果」，如果我们接下来又要设置一个h2的属性为其他样式，那代码会得很乱。

Harry Roberts是 inuit.css 框架的作者。

09.巧而不巧:用 Hack 不意味着你是个好 Hacker

负的 margin 边距，!important等等，上面的这些就是我们所说的 hack 用法(此 hack 非针对IE 兼容的 hack，也可以理解成 cheater 作*弊*用法)，如果其他人问我们为什么要这么写？我们可能只需要回答「管他呢，反正能实现效果」。

当我们为自己使用这些充满「弊」端的方法而略不放心的时候，一个解决办法就是把我们的这些 hack 放到一个特定的样式表文件hack.css之中。

任何时候你意识到你写了一个 css 的 hack 用法的时候，你直接把这些代码放到这个hack.css 之中(或者样式表的特定区域：通过注释跟其他样式区分开)，这个专属区域是个好解决方案因为他最终会在用户端隐藏。

当我们养成了这个习惯，我们可以十分清晰地知道我们写了哪些 hack ，同样可以方便我们了解我们使用这些 hack 的情景，让我们可以知道如何避免这些 hack 。我们有许多写 hack 用法的理由，但是如果我们不记录我们为什么 hack，我们将不会从我们这些 hack 中学到我们为什么要错误地这么用。

10.糟糕的文档和注释

昨天在微博上看到一个段子「程序员最讨厌的四件事：写注释、写文档、别人不写注释、别人不写文档 …」。

写文档和注释绝对不是一个有意思的事情，但却是一个最重要的事情(尤其是涉及到项目后续可维护性时)，文档可以有效地让其他人知道你的代码是干什么的，同时其他人理解你的 css。对于大部分语言(html,css,php,JavaScript) ，开发者可以直接在代码文件中写上注释(文档)。

Nabors 曾说「我曾YY：如果我今天写完一个项目的 css 但是明儿我却挂掉了，有一个人幸运地接手我这个项目，那他看得懂我的这些代码是什么意思吗？」。尽量地让我们的样式表中的结构清晰，如果不能让人立马知道你的选择器指的是哪里的样式，可以尝试添加注释(什么！你还说注释增加css 文件大小！难道你不知道压缩工具么！)。

第一步是在必须的地方做好注释，第二步是使用工具把css文件中的这些注释转换成一个合适的文档。推荐可以使用css_doc和KSS。

css_doc 跟 JavaDoc类似，他的转换原理基于 CSSDOC. KSS(Knyle Style Sheets)，对于前端和设计师来说都十分有益。