语义 !important 修饰符干扰样式

Question

有什么方法可以禁用 semantic-ui 中的所有这些 !important 选项吗？

我一直运行遇到以下问题：

.ui.right.sidebar {
    right: 0!important;                       /* why is this important */
    left: auto!important;                     /* why is this important */
    -webkit-transform: translate3d(100%,0,0); /* why is this NOT important */
    transform: translate3d(100%,0,0);         /* why is this NOT important */
}

为什么几乎每个定位属性都有!important？有没有办法编译语义省略 !important 修饰符？它干扰了我的自定义样式，我必须做一些额外的工作，感觉很麻烦（比如用 padding-top: NNpx 对抗 margin: 0!important;，只是希望至少有一个没有被标记为 !important它可能处于的任何状态）

Answer 1

在 semantic-ui 中禁用 !important 是个坏主意，因为它可能会导致不可预知的结果。为了进一步理解为什么框架中有 !important 个关键字，这里是 SUI 的作者 Jack Lukic 的一些陈述：

..CSS should have a specificity property for defining priority (it was part of the original discussion when creating css), however they left us with automatic weight calculations from an arbitrary point system.

This is pretty terrible when you run into something that happens to be classified less ".ui.button" lets say, having to override '.ui.menu .ui.button' , there are only two solutions, arbitrarily increasing weight by repeating class names in selectors, or using important...

Source 1

还有here（以及其他地方）：

...CSS specificity has always been a terrible sort spot of the standard, instead of giving developers a way to assign priority to rules we have to with two options, increase rule specificity or 'drop the hammer' with !important.

A lot of css rules in semantic aren't able to increase specificity beyond a certain point. The only assumption we can make about a red ui button is that it will have classes .ui.red.button, no greater specificity can be gained by altering the selector. If we then have a rule that appears later with the same or greater specificity we're stuck without important.

I'm positive that each decision to use important in semantic was after dealing with no other option. This happens a bit more than other libraries because the specificity is so granular in the library.

如果你想覆盖行为，你可以做两件事：

使用 SUI

3000 theming CSS variable

或

使用更具体的选择器覆盖行为参见

One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:

#bodyid .create-new-menu-btn {
     //Properties }

语义 !important 修饰符干扰样式

semantic !important modifier interfering with styling

css

semantic-ui