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修饰符？它干扰了我的自定义样式，我不得不做额外的工作，感觉很讨厌（比如用margin: 0!important;来反击padding-top: NNpx并且只希望至少有一个没有被标记为!important可能存在的任何状态）

Answer 1

在语义ui中禁用!important是一个坏主意，因为它可能会导致不可预测的结果。为了更多地了解框架中有!important个关键字的原因，以下是SUI的作者Jack Lukic所做的一些陈述：

.. CSS应该具有用于定义优先级的特定属性（它是   创建css时原始讨论的一部分，但他们离开了   我们使用任意点系统进行自动重量计算。

当你遇到碰巧的事情时，这非常可怕   分类较少＆＃34; .ui.button＆＃34;比方说，我们必须覆盖＆＃39; .ui.menu   .ui.button＆＃39; ，只有两种解决方案，任意增加   通过在选择器中重复类名或使用重要的...来重量...

Source 1

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

... CSS特异性一直是一个可怕的排序点   标准，而不是给开发人员一种分配优先级的方法   规则我们必须有两个选项，增加规则的特异性或降低   锤子＆＃39;与！important。

语义上的许多css规则都不能提高特定点以外的特异性。我们可以做出关于红色ui的唯一假设   按钮是它将有类.ui.red.button，没有更大   通过改变选择器可以获得特异性。如果我们有一个   以后出现的规则具有相同或更高的特异性   坚持不重要。

我很肯定每个在语义中使用重要的决定都是在没有其他选择之后。这种情况比其他情况发生得多   因为库中的特异性是如此精细。

如果要覆盖行为，可以执行以下两项操作：

使用SUI中的3000 theming CSS variable之一

OR

使用更具体的选择器覆盖行为请参阅this

使自定义CSS更具体的一种方法是在中使用id 您网页的正文标记，并使用以下选择器：

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

语义！重要修饰语干扰样式

1 个答案: