CSS属性——先设置全局边框，再指定border-bottom？答案

【问题标题】：CSS property - set global border first, and then specify border-bottom?CSS属性——先设置全局边框，再指定border-bottom？
【发布时间】：2012-11-13 07:01:59
【问题描述】：

在容器的所有侧面（例如底部除外）实现border 的最佳 CSS 实践是什么？

border 属性不能为每一边指定不同的值。

选项 1：覆盖规则

border: 1px solid red;
border-bottom: none;

似乎需要额外的计算 - 与 CSS 重置类似的缺点（至少在哲学上）。

选项 2： 设置特定规则

border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;

可能更正确（就 CSS“语义”而言）
但如果您想更改边框细节，则需要多项更改（更难管理）。

【问题讨论】：

我总是使用选项一，但这只是我个人的经验，我不能 100% 确定哪种做法最好。
这里也一样，但我有时喜欢质疑简单的事情：P
找到正确/最好的方法总是最好的
记住：CSS 没有语义的概念。也就是说，我肯定会选择选项 1 - 使用级联和 border 属性的巨大灵活性对您有利！在诸如此类的微观问题中无需担心浏览器的性能。 CSS 重置提出了一个稍微重要的问题，因为它们将样式应用于尽可能多的元素，这是完全不同的。
这是我的方法：stackoverflow.com/a/22124065/478018

标签： css border semantics

【解决方案1】：

如果你只想指定一次值，你可以指定所有的颜色和宽度，然后专门为边指定样式：

border-color: red;
border-width: 1px;
border-style: solid solid none solid;

【讨论】：

有趣的解决方案，如果有人想知道：是的，border-style 确实允许这样的用法：w3.org/wiki/CSS/Properties/border-style — 但是，它仍然为不应设置的边框设置 red 和 1px有什么

【解决方案2】：

其实这完全取决于你，什么对你更方便，这也取决于一些状态，比如我是否希望所有边界的color 相同，我会选择第一个，但如果我认为我需要在不久的将来更改边框每一侧的颜色我将使用第二个 1，但现在，我将坚持第一个选项

原因：

要声明的 CSS 更少
特别是它表明我想要border-bottom 为none
正如你所说，如果我需要任何更改，我不需要更改每个property: value

如果你说正确的语义，正确的语义定义非常具体

border-color: /*Whatever*/;
border-width: /*Whatever*/;
border-style: /*Whatever*/;

现在确定你不想变得如此具体

【讨论】：