Kyl*_*yle 193 html css css-specificity
我已经在一个网站上工作了几个月,很多时候我一直在尝试编辑某些东西,我必须使用!important,例如:
div.myDiv {
width: 400px !important;
}
为了使其按预期显示.这是不好的做法吗？或者!important命令可以使用吗？这会导致任何不希望的事情进一步下线吗？
Ste*_*ler 254
是的,我会说你使用的例子!important是不好的做法,而且它很可能会导致不受欢迎的影响.这并不意味着它永远不会使用.
!important:当浏览器决定CSS如何影响页面时,特异性是工作中的主要力量之一.选择器越具体,就越重要.这通常与所选元素出现的频率一致.例如:
button {
color: black;
}
button.highlight {
color: blue;
font-size: 1.5em;
}
button#buyNow {
color: green;
font-size: 2em;
}
在此页面上,所有按钮均为黑色.除了"高亮"类的按钮,它们是蓝色的.除了一个ID为"buyNow"的唯一按钮,它是绿色的.整个规则的重要性(在这种情况下,颜色和字体大小)由选择器的特异性管理.
!important但是,在属性级别而不是选择器级别添加.例如,如果我们使用此规则:
button.highlight {
color: blue !important;
font-size: 1.5em;
}
那么color属性比font-size更重要.事实上,颜色比button#buyNow选择器中的颜色更重要,而不是font-size(仍然由常规ID与类特异性控制).
元素<button class="highlight" id="buyNow">的字体大小为2em一种颜色blue.
这意味着两件事:
!important声明,例如在button#buyNow选择器中.这不仅使您的样式表难以维护和调试,而且还会启动滚雪球效果.一个!important导致另一个覆盖它,另一个导致覆盖它,等等.它几乎从不与一个人呆在一起.即使一个人!important可以成为一个有用的短期解决方案,但从长远来看,它会让你陷入困境.
这是!important首先发明的:为用户提供覆盖网站样式的方法.屏幕阅读器,广告拦截器等辅助功能工具大量使用它.
一般来说,我会说这是一个代码味道的情况,但有时候你别无选择.作为一名开发人员,你应该尽可能多地控制你的代码,但是有些情况下,你的双手被束缚,你只需要处理任何存在的东西.使用!important谨慎.
许多库和框架来与公用事业类,如.hidden,.error或.clearfix.它们服务于单一目的,并且通常只应用很少但非常重要的规则.(例如,display: none对于一个.hidden类).这些应该覆盖当前元素上的其他任何样式,!important如果你问我,肯定会保证.
使用!important声明通常被认为是不好的做法,因为它的副作用与CSS的核心机制之一相混淆:特异性.在许多情况下,使用它可能表明不良的CSS架构.
在某些情况下,它是可以容忍的,甚至是首选的,但请确保在使用之前仔细检查其中一个案例是否真的适用于您的情况.
Del*_*ani 16
!important 迫使声明始终适用,做这些事情:
大多数时候,!important可以避免,因为选择器的特性处理哪一个生效,这是级联样式的想法.但是,有些情况(不能完全记住确切的情况),特殊性不合逻辑,我必须强制!important声明.
不使用/避免的原因!important？
!important使得阅读更难我认为重要的是我们再次触及这一点,在2014年底,当更多规则被添加到工作草案中时,不要对用户施加限制是非常重要的.我已经用这个小例子来解释这种事情发生的可能情况.这是从我在网上访问过的真实网站中获取的,我很遗憾地看到它.
您有一个网站,您的网站依赖于填写表单和编辑文本.为了尽量减少眼睛疲劳你试着采用你认为每个人都可以使用的风格,并且因为你的用户主要在晚上访问,你决定让你的背景颜色为白色,然后使文字颜色为黑色.默认情况下,表单为空,因此您键入文本(此时)以确保其有效:
...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...
几个月后,用户抱怨说白衣黑眼圈太紧张但另一半喜欢它,你做什么？你添加了一个自定义主题,使用!important来覆盖内部样式,以便两方都很高兴,这是支持使用的:
...
background-color: white !important;
color: black !important;
...
现在,这里发生了什么？你是怎么想到.如果你正确记住第一组中的!important标签,你会发现它不起作用,可能还记得你需要删除!important标签.但是你忘了一个......
对了,你在白色背景上得到白色文字,如果他们试图使用这种新风格(假设你保留它),用户就再也看不到你的网页了.
当然,你没有意识到这一点,因为文本框是空的.并且你认为它会起作用!(假设是一个开发者最大的敌人,它在那里充满骄傲和傲慢).
因此,在将OVERRIDES设计为原始的完整 css规则集时,基本规则应该只使用!important .请记住,它首先用于异常并扰乱css的自然顺序和含义.在大多数情况下,您根本不需要使用它.
随着扩展程序和"userstyles.org"等网站的存在以及它的时尚对手的存在,你冒着使用!important标签疏远用户的风险!请记住,时尚不会覆盖它们.
如果你在一个风格上使用!important,请确保你能让用户关闭那个风格(我不是说通过网络浏览器的内部'开/关'开关).为了天堂,不要让它失败.
人们越来越少使用时尚的广告删除,所以我不认为保护广告!重要确实是一个问题在这里.它只是会惹恼有人试图自定义您的网站.
对我来说，使用!important是一种糟糕的 CSS 实践。它破坏了应用 css 规则的自然流程，其中 in 属性从上到下应用。使用!important，该属性现在将优先考虑最新的重要值。
这就像goto在脚本中使用关键字一样。虽然它是完全合法的，但仍然最好避免。
这个问题有点晚了,但是它说" 无论应用什么样的其他风格,都要忽略它们并使用它 ".您可能会发现它与!infront(of the !important)有点混淆,因为这是javascript中的not运算符,但在css中它被称为分隔符令牌,只是说优先级.这是一个例子.
没有!important:
.set-color{
color: blue;
}
.set-color{
color: red;
}
输出RED
!important在底部属性(相同)
.set-color{
color: blue;
}
.set-color{
color: red !important;
}
输出RED(反正会是红色的)
!important在顶部属性(相同)
.set-color{
color: blue !important;
}
.set-color{
color: red;
}
输出蓝色(表示忽略红色,使用蓝色)
我不建议您使用它，除非有必要，有时您可能会遇到这种情况，因为您正在处理现有项目。但请尽量远离它并尽可能少地使用 !important。
问题是，如果您使用太多它们，那么其中一个可能会无意中覆盖另一个。你的代码也不太清晰，任何追随你维护代码的人都会抓狂，因为每次你在 CSS 中做某事时试图找到 !important 都是一种巨大的痛苦。
检查这个： http: //webdesign.about.com/od/css/f/blcssfaqimportn.htm