CSS-BEM

CSS中的BEM思想

BEM是block element modifer的简写，是一种CSS命名的方法论

给CSS样式起名的方法中:

- 中划线 ：名称连字符

–双中划线：表示元素的一种状态

__双下划线：连接父子元素名字

sass代码示例

// _component.scss
// 首先是最高级组件 组件的css 如果是多单词的组件可以用-来分隔
.component {
    // block styles
    position: relative;

   // 组件子级元素 使用__来分隔
    // element styles
    &__child {
        font-size: 1.5rem;
    }
  
   // 组件的各种状态 使用--来分隔 比如 component--primary
    // modifier styles
    &--primary {
        color: hotpink;
    }

    // media queries
    @include mq(large) {
        width: 50%;
    }
}

上面示例中 对于容器查询（media queries）也可以使用类似的思想

BEM 方法论的诞生是为了避免级联。虽然我们现在有了更好的作用域和样式封装方法，但其基本思想仍然非常有用 - 哪怕只是作为一种在我们脑海中构建 CSS 的方法。

– https://mxb.dev/blog/old-dogs-new-css-tricks/

另一个例子

/* component.css */

/* Layer Scope */
@layer components.ui {
    /* Base Class */
    .component {
        /* Internal Properties */
        --component-min-height: 100lvh;
        --component-bg-color: #fff;

        /* Block Styles */
        display: grid;
        padding-block: 1rem;
        min-block-size: var(--component-min-height);
        background-color: var(--component-bg-color);

        /* Child Elements, Native CSS Nesting */
        & :is(h2, h3, h4) {
            margin-block-end: 1em;
        }

        /* States */
        &:focus-visible {
            scroll-snap-align: start;
        }

        &:has(figure) {
            gap: 1rem;
        }

        /* Style Queries as Modifiers */
        @container style(--type: primary) {
            font-size: 1.5rem;
        }

        /* Container Queries for component layout */
        @container (min-inline-size: 1000px) {
            --component-min-height: 50vh;
            grid-template-columns: 1fr 1fr;
        }

        /* Media Queries for user preferences */
        @media (prefers-color-scheme: dark) {
            --component-bg-color: var(--color-darkblue);
        }

        @media (prefers-reduced-motion: no-preference) {
            ::view-transition-old(component) {
                animation: fade-out 0.25s linear;
            }
            ::view-transition-new(component) {
                animation: fade-in 0.25s linear;
            }
        }
    }
}