0

I'm looking to see if anyone has ever had any experience with this CSS syntax debate we are currently having on our team. Our dev team has been using the vim plugin Tabular to align text in our code. For example in PHP or Javascript we will align variable declarations using the plugin like this:

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

Helps the code look clean and easy to read.

We have considered using alignment in our CSS (we are using LESS but this question could be applied to SASS or just straight CSS). For example we would change this 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);
}

To this:

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

One of the devs experimenting with this tactic moved the mixins from their original spots to the bottom of the declaration in order to make the code "look right" since mixins don't conform the the normal selector: value; format of regular css. In this case, the .content-box mixin had a background-color declaration that was being overridden by the backgroud-color line beneath it. Moving the mixin to the bottom broke the override and gave the element the wrong background color.

Errors like this coupled with the extra steps it takes to format every single block of CSS make me think this might not be such a good idea. Has anyone ever tried this type of alignment before? Any opinions on whether this is a good or bad idea? Thanks.

1
  • Why reinvent the wheel when you already have css for presentation? Commented Oct 18, 2017 at 14:31

1 Answer 1

2

I think your alignment tactic is a good idea, I'd just recommend turning it upside down:

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

That way the more general mixin styles would be applied first, after which they may be overridden by selection specific adjustments instead of the other way around.

By doing it like this, you eliminate this risk of accidently overriding specific styles with inherited ones and still keep everything neat and easy to read.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.