CSS 源代码中的选择器对齐方式答案

【问题标题】：Selector alignment in CSS source codeCSS 源代码中的选择器对齐方式
【发布时间】：2017-10-18 22:50:37
【问题描述】：

我正在寻找是否有人对我们团队目前正在进行的 CSS 语法辩论有任何经验。我们的开发团队一直在使用 vim 插件 Tabular 来对齐代码中的文本。例如在 PHP 或 Javascript 中，我们将使用插件对齐变量声明，如下所示：

$count           = 0;
$var_1           = array();
$var_2_long_name = array();
$stdout          = fopen( 'php://stdout', 'w' );
$some_data       = json_decode( $some_json_data, true );

帮助代码看起来干净且易于阅读。

我们已经考虑在我们的 CSS 中使用对齐（我们使用的是 LESS，但这个问题可以应用于 SASS 或直接应用于 CSS）。例如我们会改变这个块：

.btn-section {
    position: relative;
    top: -65px;
    display: block;
    z-index: 100;
    .content-box;
    background-color: @grayButton;
    color: @gray;
    padding: 10px 0;  
    .border-radius(5px);
}

到这里：

.btn-section {
    position         : relative;
    top              : -65px;
    display          : block;
    z-index          : 100;
    background-color : @grayButton;
    color            : @gray;
    padding          : 10px 0;  
    .content-box;
    .border-radius(5px);
}

其中一位尝试使用此策略的开发人员将 mixin 从其原始位置移至声明的底部，以使代码“看起来正确”，因为 mixin 不符合正常的 selector: value; 常规 css 格式。在这种情况下，.content-box mixin 有一个 background-color 声明，它被它下面的 backgroud-color 行覆盖。将 mixin 移到底部会破坏覆盖并为元素提供错误的背景颜色。

像这样的错误加上格式化每个 CSS 块所需的额外步骤让我觉得这可能不是一个好主意。有没有人尝试过这种对齐方式？关于这是一个好主意还是坏主意的任何意见？谢谢。

【问题讨论】：

既然已经有了用于演示的 css，为什么还要重新发明轮子？

标签： css syntax sass less

【解决方案1】：

我认为你的对齐策略是个好主意，我只是建议把它颠倒过来：

.btn-section {
    .content-box;
    .border-radius(5px);
    position         : relative;
    top              : -65px;
    display          : block;
    z-index          : 100;
    background-color : @grayButton;
    color            : @gray;
    padding          : 10px 0;
}

这样会首先应用更通用的 mixin 样式，之后它们可能会被选择特定的调整覆盖，而不是相反。

通过这样做，您消除了意外用继承的样式覆盖特定样式的风险，并且仍然保持所有内容整洁且易于阅读。

【讨论】：