言

在当今快速迭代的Web开发领域，构建可维护、可扩展且适应性强的用户界面成为了每个前端工程师面临的挑战。随着项目规模的扩大和团队成员的增加，如何确保代码的一致性、提升组件的重用率，以及加快新成员的融入速度，成为提升开发效率的关键因素。正是在这样的背景下，BEM（Block Element Modifier）这一革命性的前端开发方法论应运而生。

正文

什么是BEM

BEM（Block Element Modifier）是一种前端开发中用于组织CSS类名的命名约定，由Yandex公司提出。该方法论旨在提高代码的可维护性、可扩展性和团队协作效率，尤其适用于大型项目和组件化开发。BEM的核心理念围绕着三个基本概念展开：

1. Block（区块）

• 定义：一个Block是页面上的一个独立功能单元或者一个可复用的组件。它能够独立存在并完成一定的功能，比如导航栏、卡片、按钮等。
• 命名示例：.header、.form、.product-grid

2. Element（元素）

• 定义：Block内的组成部分，没有独立的意义，依赖于其所属的Block。Elements不能脱离Block单独使用。
• 命名示例：.header__logo、.form__input、.product-grid__item
• 规则：Element名称通过双下划线__连接到其所属的Block名称，表明了Element与Block之间的归属关系。

3. Modifier（修饰符）

• 定义：用于描述Block或Element的不同状态或变体，比如颜色变化、大小变化、激活状态等。
• 命名示例：.button--primary、.list-item--selected、.modal--open
• 规则：Modifier名称通过两个连字符--附加到Block或Element名称之后，用来表示状态或样式的变化。

BEM的优势

• 提高可维护性：清晰的命名规则使得代码易于理解和维护，即使是新加入项目的开发者也能快速定位和修改样式。
• 便于复用：Block的高内聚低耦合特性支持跨项目复用，Element和Modifier的灵活性允许在不同上下文中调整样式。
• 减少选择器的嵌套：鼓励扁平化的CSS结构，减少因过度嵌套而导致的性能问题和选择器的复杂度。
• 促进团队协作：统一的命名规则减少了沟通成本，团队成员可以遵循相同的编码规范，协同工作更加高效。

了解了BEM的命名规范，我们来实战一下！

我们来试着写一写这个抖音的界面

我们先来分析一下这个界面：

这一模块是抖音应用中的常用功能（function），所以我们可以命名为dy-fc

总体布局可以分为上下两部分，我们可以将顶部模块当成头部命名为dy-fc__hd

而下面的各个功能的模块我们当作身体命名为dy-fc__bd

将顶部模块中的标题模块命名为dy-fc__title

将下面每个功能模块命名为dy-fc__item

这样我们就该界面分析完了，并以BEM的命名规范进行命名

开始写代码！

<div class="dy-fc">
        <div class="dy-fc__hd">
            <span class="dy-fc__title">常用功能</span>
        </div>
        <div class="dy-fc__bd">
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">我的钱包</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">券包</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">小程序</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">观看历史</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">内容偏好</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">离线模式</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">设置</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">稍后再看</p>
            </a>
        </div>
    </div>

这个界面基本的结构就是这样的，然后我们来写一下它的样式

首先重置默认样式

* {
    margin: 0;
    padding: 0;
}

接着我们给整个界面设为暗白色，初始化<a>标签

body {
    background-color: rgba(211, 209, 209, 0.25);
}
a{
    text-decoration: none;
}

然后我们设置一下整个模块的样式:
设置宽占比为94%，
设置外边距为10px并居中
将背景颜色设为白色
调整边角弧度

.dy-fc {
    width: 94%;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 10px;
}

再然后是设置头部模块和标题

.dy-fc__hd {
    padding: 10px;
}
.dy-fc__title {
    font-size: 18px;
    font-weight: bold;
}

继续是身体模块
我们将其设置为弹性容器并定义换行属性，使容器内的元素能够按行或列排列，并且可以自动换行、自动调整元素的位置和大小。它使得布局更加灵活和方便。

.dy-fc__bd {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

随后是各个功能模块，我们将宽度设置为33%，使得三个为一行

.dy-fc__item {
    width:33%;
    text-align: center;
    line-height: 2.1em;
    color: black;
    padding-bottom: 10px;
}

再然后就是图片和底部文字的样式啦

img {
    width: 30px;
    height: 30px;
}
.dy__desc {
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
}

这样我们就完成了抖音常用功能的实战页面

上图片！

总结

在实际应用中，可以根据项目规模和需求灵活调整BEM的严格程度，例如引入简写规则或使用工具自动处理类名生成。 结合现代前端框架和工具（如Vue、React的CSS Modules或SASS的嵌套规则）可以进一步简化BEM的编写过程，同时保持其核心优点。

BEM不仅仅是一种命名方式，更是一种思维方式，它帮助开发者从模块化和可维护性的角度去设计和构建界面，是现代前端开发不可或缺的一部分。

附源代码：

文讲述了 9 条非常强大的 JavaScript 技巧。

作者 | Klaus

译者 | 弯月，责编 | 屠敏

以下为译文：

全部替换

我们知道string.replace函数只会替换第一次出现的位置。在正则表达式末尾添加 /g 即可替换所有出现。

var example="potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"

提取唯一值

使用Set对象和spread操作符可以创建一个新的数组，仅包含唯一的值。

var entries=[1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries=[...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

数字转为字符串

只需要将其与空字符串连接。

var converted_number=5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string

字符串转为数字

只需要使用 + 运算符。

注意这个技巧只能在“字符串形式的数字”上使用。

the_string="123";
console.log(+the_string);
// 123

the_string="hello";
console.log(+the_string);
// NaN

打乱数组的元素顺序

var my_list=[1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function {
return Math.random - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

多维数组扁平化

只需使用spread运算符。

var entries=[1, [2, 5], [6, 7], 9];
var flat_entries=.concat(...entries);
// [1, 2, 5, 6, 7, 9]

短路条件

比如下面的例子：

if (available) {
addToCart;
}

只需将变量和函数写到一起即可：

available && addToCart

动态属性名

原来我以为必须先定义一个对象才能指定动态属性名，其实不需要：

const dynamic='flavour';
var item={
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }

使用length属性来改变数组大小或清空数组

只需要重写数组的length即可。

要想改变数组大小：

var entries=[1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length);
// 7
entries.length=4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]

要想清空数组：

var entries=[1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length);
// 7
entries.length=0;
console.log(entries.length);
// 0
console.log(entries);
// 

原文：https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p

本文为 CSDN 翻译，转载请注明来源出处。

【End】