css - CSS 源代码中的选择器对齐

Question

我想看看是否有人对我们团队目前正在进行的 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)。例如，我们将更改此 block :

.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 从它们原来的位置移到了声明的底部，以使代码“看起来正确”，因为 mixins 不符合正常的选择器:值； 常规 css 格式。在这种情况下，.content-box mixin 有一个 background-color 声明，该声明被其下方的 backgroud-color 行覆盖。将 mixin 移动到底部会破坏覆盖并为元素提供错误的背景颜色。

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

Answer 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;
}

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

通过这样做，您可以消除意外地用继承的样式覆盖特定样式的风险，并且仍然保持一切整洁且易于阅读。