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）。例如，我们将更改此块：

.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);
}

其中一个试验这种策略的开发人员将mixins从原始位置移动到声明的底部，以使代码“看起来正确”，因为mixins不符合普通的选择器：value; 常规CSS的格式。在这种情况下， .content-box mixin有一个 background-color 声明，该声明被其下面的 backgroud-color 行覆盖。将mixin移动到底部会破坏覆盖并使元素背景颜色错误。

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

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

通过这种方式，首先应用更一般的mixin样式，之后可以通过选择特定的调整而不是相反的方式来覆盖它们。

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

CSS源代码

1 个答案: