web-toolkit icon indicating copy to clipboard operation
web-toolkit copied to clipboard

Avoid extending classes

Open manuszep opened this issue 8 years ago • 0 comments

Hi,

I noted that @extend .class-name is used quite a bit in the framework. From experience, this is something that can go wrong quite quickly and silently.

If anybody happen to use the extended class in any other selector further in the development, that selector will be parsed and repeated as many times as the original class is extended. Which increases file size and degrades performance.

As this is a bit hard to explain, I've made an example in SassMeister : http://www.sassmeister.com/gist/d81693efe6bf640af06d86e2af983305

It's best to use placeholders. The difference is shown in the example above.

Mixins are even better. There will be more repetition in the final code but Gzip performs very well on repetition. It's more efficient to repeat 1000 times exactly the same thing than sharing 1000 unique selectors.

Best regards

manuszep avatar Mar 30 '17 10:03 manuszep