Question

有时在CMS中，模块，插件，扩展或核心本身的代码将覆盖您的CSS规则。当然，您的客户不需要额外的时间费用来追逐问题的根源。

我了解有三种方法可以在子主题中强制使用覆盖：

1。在模板文件中添加内嵌样式

2。在CSS文件中添加important!

3. 将其他图层添加到模板文件中，以使您的选择器更加具体。

对于解决这种特殊情况的CSS最佳实践是否有公认的权限？

Answer 1

我不认为这里有一个最好的做法，但我试着避免在cms之外编辑内联。

如果我要编辑以下p标签......

<div id="outer">
    <div class="inner">
        <p>text</p>
    </div>
</div>

我会尝试使用像...这样的东西。

#outer .inner p{
    colour:red;
}

如果我真的很挣扎，那我就用......

#outer .inner p{
    colour:red !important;
}

另一个选择是使用样式表来覆盖当前的样式表，所以在你的html标题中的当前一个之后引用它...

<link rel="stylesheet" href="current-style.css" />
<link rel="stylesheet" href="new-style.css" />

This article解释得很清楚。

Answer 2

我无法给你一个确切的答案，因为这取决于具体情况，但我可以给你一个关于什么时候使用什么的一般研究。

CSS最佳实践意味着什么

最佳实践是设计和构建网页的方法，这些方法已被证明是最有效的，并且可以为所涉及的工作获得最大回报。

将内容与设计分开

CSS的主要目标之一是从中删除设计元素 HTML并将它们放在设计师的另一个位置保持。这意味着设计师也不必也是内容开发人员以维护网站的外观。
轻松维护

网页设计中最被遗忘的元素之一就是维护。与印刷材料不同，一旦你推出一个Web＆＃34;杂志＆＃34;它没有走开。事情发生了变化 - 从您的网站外观到内容和其中的链接。将CSS置于中心位置就可以了更容易维护。
让您的网站易于访问

使用CSS样式可以让您的网站更容易被禁用人和搜索引擎等机器人。
您的网站将保持更长时间

通过使用CSS的最佳做法，您可以使用标准已被证明可以工作并保持灵活的网页设计环境变化。

以下是任何给定的CSS样式文档将如何决定它遇到的不同样式的重量的基本概述。这是规范中讨论的级联的一般摘要：

查找适用于元素和属性的所有声明使用以下顺序将样式应用于基于重要性和原点的元素，列表中的第一项具有最小权重：

来自用户代理的声明
来自用户的声明
作者的声明
来自作者的声明！important added
来自添加了！important的用户的声明
根据特异性应用样式，更具体的选择器“赢得”而不是更常规的
根据样式表中出现的顺序应用样式（即，如果出现平局，最后一个“胜出”）

1-何时应该使用内联样式？

仅限html电子邮件，遗憾的是，各种电子邮件客户端都不支持许多规则。

在其他情况下使用它是一种不好的做法，因为添加内联样式会使修改网站变得更加困难，如果你在CSS文件中有所有内容，那么你可以改变你网站的整个设计而不用更改网站的HTML。使用样式表可以获得干净的源代码，并保持良好的布局。它们违背了上述所有好处：

内联样式不会将内容与设计分开
内联样式会导致更多维护问题
内联样式不易访问
内联样式可让您的网页更大

2-应该什么时候使用！重要吗？

与任何技术一样，根据具体情况有利有弊。那么什么时候应该使用，如果有的话？以下是我对潜在有效用途的主观概述。

<强> NEVER

！除非在所有其他途径都已用尽之后绝对必要，否则不应使用重要声明。如果你因懒惰而使用！important，避免正确的调试，或者急于完成项目，那么你就是在滥用它，而你（或那些继承你项目的人）将会受到影响。

如果您在样式表中尽量少量地包含它，您很快就会发现样式表的某些部分将难以维护。如上所述，CSS属性重要性通过级联和特异性自然发生。当你使用！important时，你就会破坏规则的自然流动，给予那些不值得这么重的规则更多的权重。

如果你从不使用！important，那么这就表明你理解CSS并在编写之前对你的代码给予适当的预见。

话虽如此，古老的格言“永不言败”肯定会适用于此。以下是！important的一些合法用途。

临时解决紧急问题

有时，在实时客户端网站上的CSS中会出现问题，您需要非常快速地应用修复程序。在大多数情况下，您应该能够使用Firebug或其他开发人员工具来跟踪需要修复的CSS代码。但是如果IE6或其他无法访问调试工具的浏览器出现问题，您可能需要使用！important进行快速修复。

将临时修订移动到生产后（从而使客户端满意），您可以使用更易于维护的方法在本地修复问题，而不会破坏级联。当你找到一个更好的解决方案时，你可以将它添加到项目中并删除！important - 并且客户端将不再是明智的。

在用户生成的内容中覆盖内联样式

CSS开发的一个令人沮丧的方面是用户生成的内容包括内联样式，就像CMS中的一些WYSIWYG编辑器一样。在CSS级联中，内联样式将覆盖常规样式，因此通过生成的内容发生的任何不需要的元素样式将很难（如果不是不可能）使用常规CSS规则进行更改。您可以使用！important声明来规避此问题，因为在作者样式表中使用！important的CSS规则将覆盖内联CSS。

说完这些之后，总是试着让你的代码结构合理并设计一个好的标记，通过这样做，你可能不必使用内联样式＆＃34;！important＆＃34;除非它是完全必要的。

查看此信息以获取完整信息：

http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email

http://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

https://css-tricks.com/when-using-important-is-the-right-choice/

http://webdesign.about.com/od/css/a/aa073106.htm

http://reinholdweber.com/?p=1

CSS最佳实践：使用内联样式还是重要的？

2 个答案: