More unnecessary CSS output

Feature Requests / Improvements
1

In addition to this: [WIP] Remove Bricks selector from CSS output on custom classes so the class can be used on different elements

There are more to be improved here:

If you look at the code below, apart from adding multiple classes as explained in the topic above. It also does add a media query around each class rather than having all classes for a specific breakpoint in the same media query. And, it does not need the CSS comment in there for each class.

Potential bug: Its also inlining the code even when I select external css. Yes, I have regenerated css and cleared all caches, still doesn’t work.

/* BREAKPOINT: Desktop (BASE) */
.text-center.brxe-heading {text-align: center}

/* BREAKPOINT: Tablet portrait /
@media (max-width: 991px) {
.text-center.brxe-heading {text-align: justify}
}
/ BREAKPOINT: Mobile landscape /
@media (max-width: 767px) {
.text-center.brxe-heading {text-align: center}
}
/ BREAKPOINT: Mobile portrait */
@media (max-width: 478px) {
.text-center.brxe-heading {text-align: right}
}

/* BREAKPOINT: Desktop (BASE) */
.text-center.brxe-text-basic {text-align: center}

/* BREAKPOINT: Tablet portrait /
@media (max-width: 991px) {
.text-center.brxe-text-basic {text-align: justify}
}
/ BREAKPOINT: Mobile landscape /
@media (max-width: 767px) {
.text-center.brxe-text-basic {text-align: center}
}
/ BREAKPOINT: Mobile portrait */
@media (max-width: 478px) {
.text-center.brxe-text-basic {text-align: right}
}

/* BREAKPOINT: Desktop (BASE) */
.text-center.brxe-div {text-align: center}

/* BREAKPOINT: Tablet portrait /
@media (max-width: 991px) {
.text-center.brxe-div {text-align: justify}
}
/ BREAKPOINT: Mobile landscape /
@media (max-width: 767px) {
.text-center.brxe-div {text-align: center}
}
/ BREAKPOINT: Mobile portrait */
@media (max-width: 478px) {
.text-center.brxe-div {text-align: right}
}

/* BREAKPOINT: Desktop (BASE) */
.text-center.brxe-text {text-align: center}
.text-center.brxe-text a {text-align: center}

/* BREAKPOINT: Tablet portrait /
@media (max-width: 991px) {
.text-center.brxe-text {text-align: justify}
.text-center.brxe-text a {text-align: justify}
}
/ BREAKPOINT: Mobile landscape /
@media (max-width: 767px) {
.text-center.brxe-text {text-align: center}
.text-center.brxe-text a {text-align: center}
}
/ BREAKPOINT: Mobile portrait */
@media (max-width: 478px) {
.text-center.brxe-text {text-align: right}
.text-center.brxe-text a {text-align: right}
}

3 Likes
2

Is also noticed the frontend-light.min.css have media queries wrapped around each class for specific breakpoints too, when they can be organized under one media query for each breakpoint.

1 Like
3

This problem has been going on for more than a year, but it has still not been given important importance and has not considered the possibility of solving the problem, and it is a pity.
On my landing page, the mention of /* BREAKPOINT: *** */ occurs more than 1300 times, which is almost 40,000 extra characters. This means that we could save more than 40KB of traffic and increase the page loading speed by simply deleting unnecessary comments.

In addition, as jonte98 correctly noted, each property turns into a separate breakpoint, and the repetition of breakpoints occurs over and over again. Instead of ordering them and putting all the properties in the appropriate bracket. This would further halve the style code, reduce the weight of the page, and increase the loading speed.
It optimizes the pages very well. Please consider this feature, it really introduces a lot of unnecessary garbage and spoils the optimization of the created pages.

2 Likes