CSS 编写原则

原文地址：https://geekplux.com/2014/02/20/css_written_principles

CSS 写的好可以让网页瞬间高大上，但是再高大上的网站如果效率很低也不行，尤其是在近几年「用户体验」这个词烂大街以后。前两天自己写了几个页面的 CSS，顺便拜读了很多关于 CSS 如何写的更好的文章，现在动手总结一下。

权重

CSS 中我个人觉得权重是个很需要掌握的概念。它决定哪一条样式将被应用在元素上，哪一条样式将被覆盖掉。众所周知，CSS 选择器，最基本的有三种：

• id 选择器
• class 选择器
• 标签选择器

还有一种内联样式( inline-style )，是指直接在 HTML 代码中添加 CSS 样式。以上四种的权重顺序是：内联样式（1000） > id 选择器（100） > class 选择器（10） > 标签选择器（1）。括号内分别是它们的权重值！。举个栗子：

<span style="color : #fff;" id="example" class="demo">栗子</span>

#example {color: #000;}

.dome {color: red;}

span {color: blue;}

如果只有第四句来定义样式，则这个<span>是蓝色的，如果加上第三条语句，则变成了红色，第四句被覆盖掉了。如果用第二句，则变为黑色，第三句即被覆盖，以此类推如果用内联样式则<span>变成白色了。

像我这样的菜鸟刚开始滥用各类选择器，往往会出现想覆盖父元素样式的时候覆盖不了的情况，熟不知要想覆盖，必须让这条语句的权重值大于父元素（具体可以参考这篇文章[你应该知道的一些事情——CSS 权重](...

Continue to read