言

在當(dāng)今快速迭代的Web開發(fā)領(lǐng)域，構(gòu)建可維護(hù)、可擴(kuò)展且適應(yīng)性強(qiáng)的用戶界面成為了每個(gè)前端工程師面臨的挑戰(zhàn)。隨著項(xiàng)目規(guī)模的擴(kuò)大和團(tuán)隊(duì)成員的增加，如何確保代碼的一致性、提升組件的重用率，以及加快新成員的融入速度，成為提升開發(fā)效率的關(guān)鍵因素。正是在這樣的背景下，BEM（Block Element Modifier）這一革命性的前端開發(fā)方法論應(yīng)運(yùn)而生。

正文

什么是BEM

BEM（Block Element Modifier）是一種前端開發(fā)中用于組織CSS類名的命名約定，由Yandex公司提出。該方法論旨在提高代碼的可維護(hù)性、可擴(kuò)展性和團(tuán)隊(duì)協(xié)作效率，尤其適用于大型項(xiàng)目和組件化開發(fā)。BEM的核心理念圍繞著三個(gè)基本概念展開：

1. Block（區(qū)塊）

• 定義：一個(gè)Block是頁(yè)面上的一個(gè)獨(dú)立功能單元或者一個(gè)可復(fù)用的組件。它能夠獨(dú)立存在并完成一定的功能，比如導(dǎo)航欄、卡片、按鈕等。
• 命名示例：.header、.form、.product-grid

2. Element（元素）

• 定義：Block內(nèi)的組成部分，沒有獨(dú)立的意義，依賴于其所屬的Block。Elements不能脫離Block單獨(dú)使用。
• 命名示例：.header__logo、.form__input、.product-grid__item
• 規(guī)則：Element名稱通過雙下劃線__連接到其所屬的Block名稱，表明了Element與Block之間的歸屬關(guān)系。

3. Modifier（修飾符）

• 定義：用于描述Block或Element的不同狀態(tài)或變體，比如顏色變化、大小變化、激活狀態(tài)等。
• 命名示例：.button--primary、.list-item--selected、.modal--open
• 規(guī)則：Modifier名稱通過兩個(gè)連字符--附加到Block或Element名稱之后，用來(lái)表示狀態(tài)或樣式的變化。

BEM的優(yōu)勢(shì)

• 提高可維護(hù)性：清晰的命名規(guī)則使得代碼易于理解和維護(hù)，即使是新加入項(xiàng)目的開發(fā)者也能快速定位和修改樣式。
• 便于復(fù)用：Block的高內(nèi)聚低耦合特性支持跨項(xiàng)目復(fù)用，Element和Modifier的靈活性允許在不同上下文中調(diào)整樣式。
• 減少選擇器的嵌套：鼓勵(lì)扁平化的CSS結(jié)構(gòu)，減少因過度嵌套而導(dǎo)致的性能問題和選擇器的復(fù)雜度。
• 促進(jìn)團(tuán)隊(duì)協(xié)作：統(tǒng)一的命名規(guī)則減少了溝通成本，團(tuán)隊(duì)成員可以遵循相同的編碼規(guī)范，協(xié)同工作更加高效。

了解了BEM的命名規(guī)范，我們來(lái)實(shí)戰(zhàn)一下！

我們來(lái)試著寫一寫這個(gè)抖音的界面

我們先來(lái)分析一下這個(gè)界面：

這一模塊是抖音應(yīng)用中的常用功能（function），所以我們可以命名為dy-fc

總體布局可以分為上下兩部分，我們可以將頂部模塊當(dāng)成頭部命名為dy-fc__hd

而下面的各個(gè)功能的模塊我們當(dāng)作身體命名為dy-fc__bd

將頂部模塊中的標(biāo)題模塊命名為dy-fc__title

將下面每個(gè)功能模塊命名為dy-fc__item

這樣我們就該界面分析完了，并以BEM的命名規(guī)范進(jìn)行命名

開始寫代碼！

<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">內(nèi)容偏好</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">設(shè)置</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">稍后再看</p>
            </a>
        </div>
    </div>

這個(gè)界面基本的結(jié)構(gòu)就是這樣的，然后我們來(lái)寫一下它的樣式

首先重置默認(rèn)樣式

* {
    margin: 0;
    padding: 0;
}

接著我們給整個(gè)界面設(shè)為暗白色，初始化<a>標(biāo)簽

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

然后我們?cè)O(shè)置一下整個(gè)模塊的樣式:
設(shè)置寬占比為94%，
設(shè)置外邊距為10px并居中
將背景顏色設(shè)為白色
調(diào)整邊角弧度

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

再然后是設(shè)置頭部模塊和標(biāo)題

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

繼續(xù)是身體模塊
我們將其設(shè)置為彈性容器并定義換行屬性，使容器內(nèi)的元素能夠按行或列排列，并且可以自動(dòng)換行、自動(dòng)調(diào)整元素的位置和大小。它使得布局更加靈活和方便。

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

隨后是各個(gè)功能模塊，我們將寬度設(shè)置為33%，使得三個(gè)為一行

.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;
}

這樣我們就完成了抖音常用功能的實(shí)戰(zhàn)頁(yè)面

上圖片！

總結(jié)

在實(shí)際應(yīng)用中，可以根據(jù)項(xiàng)目規(guī)模和需求靈活調(diào)整BEM的嚴(yán)格程度，例如引入簡(jiǎn)寫規(guī)則或使用工具自動(dòng)處理類名生成。 結(jié)合現(xiàn)代前端框架和工具（如Vue、React的CSS Modules或SASS的嵌套規(guī)則）可以進(jìn)一步簡(jiǎn)化BEM的編寫過程，同時(shí)保持其核心優(yōu)點(diǎn)。

BEM不僅僅是一種命名方式，更是一種思維方式，它幫助開發(fā)者從模塊化和可維護(hù)性的角度去設(shè)計(jì)和構(gòu)建界面，是現(xiàn)代前端開發(fā)不可或缺的一部分。

附源代碼：

文講述了 9 條非常強(qiáng)大的 JavaScript 技巧。

作者 | Klaus

譯者 | 彎月，責(zé)編 | 屠敏

以下為譯文：

全部替換

我們知道string.replace函數(shù)只會(huì)替換第一次出現(xiàn)的位置。在正則表達(dá)式末尾添加 /g 即可替換所有出現(xiàn)。

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

提取唯一值

使用Set對(duì)象和spread操作符可以創(chuàng)建一個(gè)新的數(shù)組，僅包含唯一的值。

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]

數(shù)字轉(zhuǎn)為字符串

只需要將其與空字符串連接。

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

字符串轉(zhuǎn)為數(shù)字

只需要使用 + 運(yùn)算符。

注意這個(gè)技巧只能在“字符串形式的數(shù)字”上使用。

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

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

打亂數(shù)組的元素順序

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]

多維數(shù)組扁平化

只需使用spread運(yùn)算符。

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

短路條件

比如下面的例子：

if (available) {
addToCart;
}

只需將變量和函數(shù)寫到一起即可：

available && addToCart

動(dòng)態(tài)屬性名

原來(lái)我以為必須先定義一個(gè)對(duì)象才能指定動(dòng)態(tài)屬性名，其實(shí)不需要：

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

使用length屬性來(lái)改變數(shù)組大小或清空數(shù)組

只需要重寫數(shù)組的length即可。

要想改變數(shù)組大小：

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]

要想清空數(shù)組：

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 翻譯，轉(zhuǎn)載請(qǐng)注明來(lái)源出處。

【End】