首次使用BEM命名规范，请求代码正确性校验及优化建议

先梳理你代码里不符合BEM核心规则的几个问题：

• 块与元素混合命名：比如<div class="main__content content">，BEM里一个节点要么是独立块，要么是某块的元素，不能同时用元素语法（__）和独立块名。这里content应该作为独立块，或者main__content作为main块的元素，二选一更合理。
• 不必要的新块创建：你用content1、content2、content3作为独立块名，但这三个模块结构完全一致，只是内容不同，属于同一模块的不同实例，应该用**修饰符（--）**区分，而非新建块。
• 元素命名不规范：content1-info用了单连字符-，BEM里元素必须用双下划线__；另外content__text归属到content块，但它实际是每个item内的文本，归属逻辑不对。
• 嵌套元素命名错误：BEM不建议元素嵌套元素（比如content1__cirkel把content1当块，但它本质是item的变体），所有元素都应直接归属到顶级块。

修改后的代码示例： #

<body>
    <div class="wrapper">
        <main class="main">
            <!-- content作为独立块 -->
            <div class="content">
                <!-- 用修饰符区分不同item实例 -->
                <div class="content__item content__item--saigon">
                    <div class="content__cirkel">
                        <img class="content__image" src="bilder/1545876271475.jpg" alt="Saigon">
                    </div>

                    <div class="content__info">
                        <p class="content__description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>

                <div class="content__item content__item--halong-bay">
                    <div class="content__cirkel">
                        <img class="content__image" src="bilder/21336448-81d8-4643-a1b9-1545d08172de.jpg" alt="Ha Long Bay">
                    </div>

                    <div class="content__info">
                        <p class="content__description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>

                <div class="content__item content__item--hand-bridge">
                    <div class="content__cirkel">
                        <img class="content__image" src="bilder/big-hand-ang-golden-bridge.jpg" alt="Hand Bridge">
                    </div>

                    <div class="content__info">
                        <p class="content__description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>

关键修改说明： #

1. 明确块的边界：将main__content content改为独立块content，main作为父块包含content块，符合BEM“块可嵌套块”的规则。
2. 用修饰符替代新块：把content1这类名称改成content__item的修饰符（如content__item--saigon），既保留区分标识，又遵循“相同结构用修饰符”的原则。
3. 统一元素归属：所有元素都直接归属到content块，用content__cirkel、content__info命名，避免嵌套元素的错误写法，让元素归属逻辑更清晰。
4. 规范命名符号：全程用__表示元素、--表示修饰符，严格遵循BEM的符号规则。

内容的提问来源于stack exchange，提问作者Steven Tran