6 ms·
I don't think this is quite what I want to say, what I meant to say was that using @extend will increase the number of CSS selectors by the number of selector i
by sirn 13y ago
I don't think this is quite what I want to say, what I meant to say was that using @extend will increase the number of CSS selectors by the number of selector it extends to when compiled (including nested selectors.)
For example, .form-control in Bootstrap total of 9 selectors, the login example from the article extends from it twice, now the compiled CSS ended up with at least 18 selectors. Another example would be .btn the author used in the login example, which has another 9 more selectors for .btn alone, then 16 more selectors in each .btn-variant. The example extend from both .btn and .btn-variant twice, this result in 50 more selectors that will be added. From my very quick counting, the login form example alone will create about 71 more selectors for a simple login form.
This might not be a problem for a small site, but the number could become unmanageable very quickly once the site grow.