3

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

  • 4
    Never sacrifice readability for smaller or shorter code. There are certain compiler optimizations that would do this for you behind the courtains, and even if there are not, the lower performance of a slightly larger code is barely noticeable compared to an unreadable code – Matias Cicero Dec 27 '14 at 15:49
  • 2
    @MatiCicero - compiling to css may be the one exception to your excellent comment. Sometimes shaving a couple of milliseconds off the download time can be significant. This particular situation probably isn't one of those times. – Dan Pichelman Dec 27 '14 at 15:56
  • Your CSS will most likely be served in compressed form (HTTP compression ). In compressed form, the savings will probably be much smaller, maybe even irrelevant. – sleske Dec 27 '14 at 22:28
  • Meh. 750 bytes for something that, served properly, will be downloaded once and cached for at least 24 hours, isn't worth the trouble. That's half an Ethernet frame. Chump change. Worry about your monstrously-large JavaScript frameworks instead. – Ross Patterson Dec 28 '14 at 15:48
5

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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