如何为不同的元素组合相同的 CSS 属性？

Question

我有两个元素：tooltip 和 tooltip-line。每个元素都有共同的属性：

[tooltip]::after, [tooltip-line]::after  {
position: absolute;
opacity: 0;
visibility: hidden;
/* Other common properties */
}

接下来，我为每个元素设置了不同的属性。

[tooltip-line]::after  { /* One line tooltip */
    content: attr(tooltip-line);
    white-space: nowrap;
}
[tooltip]::after  { /* Multiline tooltip */
    content: attr(tooltip);
    width: 200px;
    white-space: normal;
}

这是正确的用法吗？包括类似类。还是应该将所有属性复制到每个声明块？

Answer 1

把css分成多块是绝对正确的

用任何语言编写代码时，首先要知道的一件事是不要重复自己。

Answer 2

这是一种不同的方法，它的可扩展性可能会稍好一些。使用 CSS 自定义变量，我们可以通过在 multiline class 中重置任何默认值 class 来覆盖它们。最后，如果可能的话，我会让包含工具提示内容的属性相同——并且是有效的 data 属性。

.tooltip::after {
  --tooltip-white-space: nowrap;
  
  content: attr(data-tooltip-content);
  white-space: var(--tooltip-white-space);
}

.tooltip.multiline::after {
  --tooltip-white-space: normal;
}

.container {
  width: 250px;
  border: 1px solid red;
}

<div class="container">
  <div class="tooltip" data-tooltip-content="my tooltip content should not wrap no matter what"></div>

  <div class="tooltip multiline" data-tooltip-content="my multliline tooltip content should wrap"></div>
</div>

jsFiddle

如何为不同的元素组合相同的 CSS 属性？

How can I combine the same CSS properties for different elements?

css

properties