I\'m currently revisiting some code I wrote in sass when I was learning it and I

Question

I'm currently revisiting some code I wrote in sass when I was learning it and I came upon a particular issue. I was able to write the code in 2 ways, with the first being the more readable code and the second being the shortest code when compiled to css. I was wondering whether it's a good thing to sacrifice some readability for smaller compiled file sizes.

In the current example, option 1 takes up about 60% less characters compiled in css. At 12 colums, the first option uses ~750 less characters than the second option. This is actually pretty significant.

The example is pretty straightforward, but when extending the code readability of the sass file can become more complicated. Is it worth sacrificing this for the smaller compiled file?

Option 1

// Create all columns
@for $i from 1 through $column_amount {
.col-#{$i}-lg, .col-#{$i}-md, .col-#{$i}-sm {
    width: $i * $col-size;
}
}

// At medium screen and below set all large columns to 100%
@media all and (max-width: $screen-medium-max) {
@for $i from 1 through $column_amount {
    .col-#{$i}-lg {
      width: 100%;
    }
}
}

// At small screen and below set all medium columns to 100%
@media all and (max-width: $screen-small-max) {
@for $i from 1 through $column_amount {
    .col-#{$i}-md {
      width: 100%;
    }
}
}
Option 2

// Creating the columns
@for $i from 1 through $column_amount {
.col-#{$i}-lg, .col-#{$i}-md, .col-#{$i}-sm {
    width: $i * $col-size;
}

// At medium screen and below set all large columns to 100%
@media all and (max-width: $screen-medium-max) {
    .col-#{$i}-lg {
      width: 100%;
    }
}

// At small screen and below set all medium columns to 100%
@media all and (max-width: $screen-small-max) {
    .col-#{$i}-md {
      width: 100%;
    }
}
}
If any extension exists that does this for me, it'd be nice to know about it, but it won't answer the question

Explanation / Answer

The level of optimization that you describe can be a useful consideration in the final stages of the project: your project is finished, meets the requirements, everything is working well, and you would like to squeeze a few extra bits of performance out of it without changing any other aspect.

If you are at this stage, and the performance gain is believed to improve the success of the project, then by all means do it.

If you are not at this stage yet, then spend your time and effort on something else that's higher priority. Until your project is mostly done, it may still go through changes, sometimes even big changes. This piece of code that you would optimize might get refactored and possibly even eliminated from the final product.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.