Reduce build size by optimizing redundant css

[Raiondesu]

Description

This change removes unnecessary rules by encapsulating the functionality in a single selector, making sources easier to maintain while also reducing build size.

Check List

instruction : terminal command

• run the build script grunt
• open index.html in a browser & resize to test visual issues

[IvanKalinin]

That is not gonna work.
|= means class attribute starts with col.
What if a developer will add additional class in the beginning of the attribute value? Like <div class="something col-sm-..."?

I would use something like [class*="col-xs]..., [class*="col-sm]....
But again, even that approach restricted a developer on adding some utils classes like col-xs-whatever.

[Raiondesu]

About first one - good point. Didn't think about it for some reason. Gonna fix now.

But again, even that approach restricted a developer on adding some utils classes

Well, it doesn't, actually.
[class*="col-"] would clearly cut it for both usecases, since it would match both the usual col classes and custom utility ones too:

<element class="col-xs-6 col-xs-make-it-very-cool col-lg-make-it-very-cool">

In any case, current waterfall of classes every 100 or so lines does not cut it for the second use-case either, so the only drawback to defining common rules as [class*="col-"] would be that all similarly-looking classes would fit this selector (which I personally view more like a nice feature).

[IvanKalinin]

speaking of reducing bundle size, why you cannot to put styles in one place and separate attributes with ,?

[class*="col-xs"],
[class*="col-sm"],
[class*="col-md"],
[class*="col-lg"] {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width, 0.5rem);
    padding-left: var(--half-gutter-width, 0.5rem);
}

[Raiondesu]

This depends on expected behavior.
The way you mentioned, common styles would apply regardless of screen size, whereas in this PR styles still apply in regards to current screen size and xs/sm/md/lg modifiers as it originally was.

[Raiondesu]

I don't know which one is preferred though, so I view both versions as valid.