css - CSS Target 通用通配符性能问题

Question

问题

有谁知道 CSS 通用选择器的任何性能问题。StackOverflow 上的大多数帖子都是 jquery 或 JS + CSS，我得到了，但我指的是 vanilla CSS。我创建了一个基本的自定义网格，它的大小只是大多数网格的一小部分，我想知道为什么网格不使用这种方法？即使是像 Sass 和 Tailwind 这样的框架也倾向于采用更冗长的方法。这种方法似乎非常适合预处理器开发，例如 Sass。

[class*="fgrid"] {
    margin-right: auto;
    margin-left: auto;
    padding: 0 2rem;
    width: 100%;
}

@media (min-width: 576px) {
    [class*="fgrid"] {
        padding: 0;
    }
}

// remove rest media breaks for brevity sake

@media (min-width: 1200px) {
    .fgrid__xl, .fgrid__lg, .fgrid__md, .fgrid__sm, .fgrid {
        --gutters-x: 2rem;
        max-width: 1140px;
        max-width: 1200px;
    }
}

/* basic Flexbox classes */
/* TODO: Sass abstracts */
[class*="fbox"] {display: flex; }
[class*="fbox-rel"] {position: relative;}
[class*="fbox-abs"] {position: absolute;}
[class*="fbox-"][class*="-row"]  {flex-direction: row; flex-wrap: wrap; box-sizing: border-box; flex: 0 1 auto;}
[class*="fbox-"][class*="-row-rev"]  {flex-direction: row-reverse;}
[class*="fbox-"][class*="-col"]  {flex-direction: column;}
[class*="fbox-"][class*="-col-rev"]  {flex-direction: column-reverse;}
[class*="fbox-"][class*="-nowrap"]  {flex-wrap: nowrap;}
/* x as main axis */
[class*="fbox-"][class*="-row"].bottom {align-items: flex-end;}
[class*="fbox-"][class*="-row"].top {align-items: flex-start;}
[class*="fbox-"][class*="-row"].right {justify-content: flex-end;}
[class*="fbox-"][class*="-row"].left {justify-content: flex-start;}
[class*="fbox-"][class*="-row"].center {justify-content: center;}
[class*="fbox-"][class*="-row"].middle {align-items: center;}
/* y as main axis */
[class*="fbox-"][class*="-col"].bottom {justify-content: flex-end;}
[class*="fbox-"][class*="-col"].top {justify-content: flex-start;}
[class*="fbox-"][class*="-col"].right {align-items: flex-end;}
[class*="fbox-"][class*="-col"].left {align-items: flex-start;}
[class*="fbox-"][class*="-col"].center {align-items: center;}
[class*="fbox-"][class*="-col"].center {justify-content: center;}

[class*="fbox-"][class*="-centered"].center {justify-content: center; align-items: flex-start;}
[class*="fbox-"][class*="-around"]  {justify-content: space-around;}
[class*="fbox-"][class*="-between"]  {justify-content: space-between;}

/* Set flex for all grid columns */
[class*=".col--"] {flex: 0 0 auto;}

/* Set flex for all grid columns */
/* TODO: Sass abstracts */
@media all and (min-width: 500px) {
    .col--1 {flex: 1;}
    .col--2 {flex: 2;}
    .col--3 {flex: 3;}
    .col--4 {flex: 4;}
    .col--5 {flex: 5;}
    .col--6 {flex: 6;}
    .col--7 {flex: 7;}
    .col--8 {flex: 8;}
    .col--9 {flex: 9;}
    .col--10 {flex: 10;}
    .col--11 {flex: 11;}
    .col--12 {flex: 12;}

    .col--content-max {flex-basis: max-content;}
    .col--content-min {flex-basis: min-content;}
    .col--content-fit {flex-basis: fit-content;}
    .col--content-auto {flex-basis: content;}

// remove rest for brevity sake

}

标签： cssflexbox