CSS 最佳实践：使用内联样式还是!important？

Question

CSS 最佳实践：使用内联样式还是!important？

csscontent-management-system

4

有时在内容管理系统（CMS）中，模块、插件、扩展程序或核心本身的代码会覆盖您的CSS规则。当然，客户不希望为了查找问题的源头而支付额外的时间费用。

我知道有三种方法可以在子主题中强制覆盖您自己的样式：

1.将一个内联样式添加到您的模板文件中

2.在您的CSS文件中添加important！

3.在您的模板文件中添加另一层来使您的选择器更加具体。

有没有关于CSS最佳实践的认可机构涉及这种特定情况？

- Nora McDougall-Collins

2个回答

1

我不能给你一个确切的答案，因为这取决于情况，但我可以为你提供一般性的研究，告诉你何时使用什么。

CSS最佳实践是什么意思

最佳实践是指设计和构建网页的最有效方法，并获得最大的回报。

将内容与设计分离开来

CSS 的主要目标之一是将设计元素从 HTML 中移除，放置在另一个位置供设计师维护。这意味着设计师不必也成为内容开发者才能维护网站的外观。
使维护更容易

Web 设计中最容易被忽视的元素之一就是维护。与印刷品不同，一旦发布了 Web “杂志”，它就不会消失。事物会发生变化——从您站点的外观到其中的内容和链接。而使用集中式 CSS 使维护变得更加容易。
使您的站点更易访问

使用 CSS 样式可以使您的站点对残疾人以及搜索引擎等机器人更易访问。
使您的站点保持更新

通过使用 CSS 的最佳实践，您正在使用已被证明可行并在 Web 设计环境变化时仍具有灵活性的标准。

下面是任何给定的 CSS 样式文档如何决定赋予权重的基本概述。这是级联的一般摘要，如规范所述：

找到适用于元素和属性的所有声明，并根据以下顺序基于重要性和来源将样式应用于元素，列表中的第一项权重最小：

用户代理的声明
用户的声明
作者的声明
添加了!important的作者声明
添加了!important的用户声明
基于特殊性应用样式，更具体的选择器“胜出”于更通用的选择器
基于它们在样式表中出现的顺序应用样式（即，在平局的情况下，后一个“胜出”）

1- 什么时候应该使用内联样式？

只有在html电子邮件中使用，不幸的是，许多规则不受各种电子邮件客户端的支持。

在其他情况下，使用它是不好的实践，因为添加内联样式会使修改您的网站变得更加困难，如果您的所有内容都在CSS文件中，则可以更改整个网站的设计而无需更改网站的HTML。使用样式表允许保持源代码整洁，并保持其良好布局。它们违反了上述所有好处：

内联样式不分离内容和设计
内联样式会导致更多的维护问题
内联样式不够可访问
内联样式会使您的页面变得更大

2- 什么时候应该使用!important？

与任何技术一样，根据情况而异。那么，如果有必要的话，什么时候应该使用它呢？以下是我主观上潜在有效用途的概述。

永远不要使用

除非在尝试了所有其他途径后绝对必要，否则不应使用!important声明。如果您出于懒惰、避免正确调试或赶工程期而使用!important，则是在滥用它，而且您（或继承您项目的人）将承受后果。

如果您在样式表中即使节俭地包含它，很快就会发现样式表的某些部分将更难以维护。如上所述，CSS属性重要性通过级联和特殊性自然发生。当您使用!important时，您正在破坏规则的自然流程，给予不应该具有这种权重的规则更多的权重。

如果您从不使用!important，那么这表明您了解CSS，并在编写代码之前给予适当的思考。

说到这里，老话“永远不要说永远”肯定适用。因此，以下是一些使用! important的合法用途。

临时解决紧急问题

有时候，在客户现场的CSS中会出现一些错误，您需要非常快速地应用修复程序。在大多数情况下，您应该能够使用Firebug或其他开发工具来跟踪需要修复的CSS代码。但是，如果问题发生在IE6或另一个无法访问调试工具的浏览器上，则可能需要使用! important进行快速修复。

将临时修复移至生产环境后（从而使客户满意），您可以使用更可维护的方法在本地解决问题，而不会弄乱级联。当您找到更好的解决方案时，可以将其添加到项目中并删除! important - 客户将毫不知情。

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

CSS开发中令人沮丧的一点是用户生成的内容包含内联样式，这可能会在CMS中的某些所见即所得编辑器中出现。在CSS级联中，内联样式将覆盖常规样式，因此通过生成的内容发生的任何不良元素样式将难以甚至无法使用惯常的CSS规则进行更改。您可以使用! important声明来避免这个问题，因为带有! important的CSS规则在作者样式表中将覆盖内联CSS。

话虽如此，始终尝试使您的代码结构良好并设计良好的标记，通过这样做，您可能不必使用内联样式或“！important”，除非完全必要。

查看此处获取完整信息：

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

- Yandy_Viera

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tony Ray Tansley · Accepted Answer

我认为在这里没有真正的最佳实践，但我尽量避免在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" />

这篇文章讲解得很好。