當前位置：首頁 > 科技 > 軟件

CSS @scope 如何取代 BEM

來源：責編：時間：2023-11-13 17:18:33 310觀看

導讀前端工程師最常見且最具挑戰性的問題之一是 CSS 命名約定。隨著 Block Element Modifier（BEM）方法的流行，許多人習慣于按照一種可維護的模式組織他們的樣式。即將在 Chrome 瀏覽器中實施的 @scope 允許在樣式表中對樣式

前端工程師最常見且最具挑戰性的問題之一是 CSS 命名約定。隨著 Block Element Modifier（BEM）方法的流行，許多人習慣于按照一種可維護的模式組織他們的樣式。

即將在 Chrome 瀏覽器中實施的 @scope 允許在樣式表中對樣式進行塊級作用域劃分，從而進一步提高了 BEM 的性能。這將使樣式表更易于維護，同時對 CSS 級聯進行更嚴格的控制。

在這篇文章中，我們將展示如何在 Chrome 中使用 @scope 特性，以及如何使用它來替換前端項目中的 BEM。我們通過幾個例子進行講解，你可以在 GitHub 上的示例項目中查看并跟隨操作。

CSS @scope 是什么？

在即將發布的 Chrome 118 版本中，@scope 特性創建了 CSS 樣式的塊級作用域。這給了開發者對 CSS 樣式更多的控制權，因為我們現在可以在 CSS 文件中直接為視圖的不同部分明確定義作用域。

請看下面的 HTML 示例：

<main className="sample-page">    <h1>With Scope</h1>    <section className="first-section">        <p>some text</p>        <p>            some text and then a <a href="/">back link</a>        </p>    </section>    <section className="second-section">        <h2>Dog Picture</h2>        <div>            <p>second section paragraph text</p>        </div>        <img src={'./DOG_1.jpg'} alt="dog" />    </section></main>

在此 HTML 中，我們可以使用以下方法對 second-section 樣式區域內的元素進行樣式設置：

.second-section {    display: flex;    flex-direction: column;    border: solid;    padding: 40px;    margin: 20px;}@scope (.second-section) {    h2 {        text-align: center;    }    img {        max-width: 400px;        max-height: 100%;    }    div {        display: flex;        justify-content: center;        margin: 20px;    }    p {        max-width: 200px;        text-align: center;        background-color: pink;        color: forestgreen;        padding: 10px;        border-radius: 20px;        font-size: 24px;    }}

使用 @scope 時，還可以創建一個 "甜甜圈 "作用域，為一組樣式及其中的元素定義起始和結束部分。使用上述相同的 HTML，甜甜圈作用域可以定義從 sample-page 的起始區域到 second-section 樣式區域的樣式：

/* donut scope */@scope (.sample-page) to (.second-section) {    p {        font-size: 24px;        background-color: forestgreen;        color: pink;        text-align: center;        padding: 10px;    }    a {        color: red;        font-size: 28px;        text-transform: uppercase;    }}

最棒的是，它的功能與使用 BEM 造型非常相似，但代碼量更少。

瀏覽器支持 CSS @scope

截至2023年10月2日，CSS @scope 還未正式發布，因此需要開啟實驗性網絡功能標志來使用它。要做到這一點，首先在 Chrome 中打開一個標簽頁，前往 chrome://flags/，然后搜索并啟用“實驗性網絡平臺功能”標志：

什么是 BEM

BEM 是一種在HTML視圖中分組樣式的方式，可以輕松地進行導航。

考慮到一個大型 HTML 頁面有許多具有不同樣式的元素。在設置了幾個初始樣式名稱后，隨著頁面的擴展，要保持樣式就會變得很困難。BEM 試圖通過圍繞實際樣式來構建樣式名來緩解這一問題。

block 是一個包含 HTML 元素。考慮一下類似這樣的 HTML。

<main className="sample-page">    <h1 className="sample-page__title">With BEM</h1>    <section className="sample-page__first-section">        <p className="sample-page__first-section--first_line">            some text        </p>        <p className="sample-page__first-section--second-line">            some text and then a{' '}            <a                className="sample-page__first-section--second-line-link"                href="/"            >                back link            </a>        </p>    </section></main>

在此 HTML 中。

塊 = sample-page 樣式就是 block 樣式，因為它包裹了一組元素。
元素 = 在為 <h1> 元素設計樣式時，該元素被視為 element ，因此會在樣式名稱中添加額外的 __ ，從而創建 sample-page__title 。 sample-page__first-section 也是如此。

修改器 = 當在 <section> 元素中為 <p> 元素設計樣式時，樣式名稱會多出一個 --first-line ，從而創建 sample-page__first-section--first-line ，所以：

塊為 sample-page。
元素是 first-section。
修飾詞是 first-line。

BEM 的擴展性很好，尤其是在使用 SASS 將樣式分組并使用 & 操作符創建類似內容時：

.sample-page {    display: flex;    flex-direction: column;    margin-top: 10px;    &__title {        font-size: 48px;        color: forestgreen;    }    &__first-section {      font-size: 24px;      border: solid;      padding: 40px;      margin: 20px;      &--first-line{        font-size: 24px;        background-color: forestgreen;        color: pink;        text-align: center;        padding: 10px;      }    }}

難點在于，在一個大型項目中，這會產生非常大的 CSS 或 SASS 文件，而這些文件仍然很難進行大規模管理。可以使用 @scope 替換 BEM 樣式，使樣式定義更小、更易于管理。

使用@scope重構BEM

展示使用 @scope 的優勢的最佳方式是在使用 React 等主流框架或庫的應用程序中使用 @scope。在 GitHub 上的示例應用程序中， react-example 文件夾中有一個項目，其中的頁面首先使用 BEM 進行了樣式設計，然后使用 @scope 進行了重構。

可以運行應用程序并單擊 WithBEM 或 WithScope 按鈕來查看具體實現。組件和樣式表都有相應的名稱，前綴為 WithBEM 或 WithScope ，分別位于 pages 和 styles 文件夾中。

從 BEM 樣式組件 WithBEMPage.tsx 開始，我們首先看到了用 BEM 方法設計的 HTML 樣式：

<main className="sample-page">    <h1 className="sample-page__title">With BEM</h1>    <section className="sample-page__first-section">        <p className="sample-page__first-section--first_line">            some text        </p>        <p className="sample-page__first-section--second-line">            some text and then a{' '}            <a                className="sample-page__first-section--second-line-link"                href="/"            >                back link            </a>        </p>    </section>    <section className="sample-page__second-section">        <h2 className="sample-page__second-section--title">            Dog Picture        </h2>        <div className="sample-page__second-section--div">            <p className="sample-page__second-section--div-paragraph">                second section paragraph text            </p>        </div>        <img            className="sample-page__second-section--image"            src={'./DOG_1.jpg'}            alt="dog"        />    </section></main>

在組件 WithScopePage.tsx 中，我們可以通過以下內容看到重構是多么干凈利落：

<main className="sample-page">    <h1>With Scope</h1>    <section className="first-section">        <p>some text</p>        <p>            some text and then a <a href="/">back link</a>        </p>    </section>    <section className="second-section">        <h2>Dog Picture</h2>        <div>            <p>second section paragraph text</p>        </div>        <img src={'./DOG_1.jpg'} alt="dog" />    </section></main>

要將 BEM 重構為 @scope ，只需找到樣式組，然后適當添加您的作用域樣式。我們先來看看標題部分。在原始的 WithBEMPage.tsx 文件中，每個部分都定義了不同的樣式。而在 @scope 版本中，則為特定元素定義了更簡潔的樣式：

.sample-page {    display: flex;    flex-direction: column;    margin-top: 10px;}/* replaced *//* .sample-page__title {    font-size: 48px;    color: forestgreen;} *//* donut scope */@scope (.sample-page) to (.first-section) {    h1 {        font-size: 48px;        color: forestgreen;    }}

同樣，在第一部分內容中，原始 BEM 風格如下：

.sample-page__first-section {    font-size: 24px;    border: solid;    padding: 40px;    margin: 20px;}.sample-page__first-section--first_line {    font-size: 24px;    background-color: forestgreen;    color: pink;    text-align: center;    padding: 10px;}.sample-page__first-section--second-line {    font-size: 24px;    background-color: forestgreen;    color: pink;    text-align: center;    padding: 10px;}.sample-page__first-section--second-line-link {    color: red;    font-size: 28px;    text-transform: uppercase;}

用 @scope 重構第一部分，我們現在就有了一個更簡潔的樣式定義：

.first-section {    font-size: 24px;    border: solid;    padding: 40px;    margin: 20px;}/* donut scope */@scope (.sample-page) to (.second-section) {    p {        font-size: 24px;        background-color: forestgreen;        color: pink;        text-align: center;        padding: 10px;    }    a {        color: red;        font-size: 28px;        text-transform: uppercase;    }}

這樣做的另一個好處是，HTML 視圖更小，更容易閱讀。考慮到之前。

<section className="sample-page__first-section">    <p className="sample-page__first-section--first_line">        some text    </p>    <p className="sample-page__first-section--second-line">        some text and then a{' '}        <a            className="sample-page__first-section--second-line-link"            href="/"        >            back link        </a>    </p></section>

然后。

<section className="first-section">    <p>some text</p>    <p>        some text and then a <a href="/">back link</a>    </p></section>

通過這兩個示例組件，我們可以對每個部分進行重構。最終注意到它是如何使樣式更簡潔、更易讀的。

@scope 與 BEM 相比的其他優勢

除了將 BEM 重構為 @scope 的優勢外，使用 @scope 還可以更好地控制 CSS 級聯。CSS 級聯是一種算法，它定義了網絡瀏覽器如何處理組成 HTML 頁面上元素的樣式條件。

在處理任何前端項目時，開發者可能需要處理由于樣式層疊而產生的奇怪結果。通過使用@scope，可以通過緊密限定元素范圍來控制層疊的副作用。

文件 no_scope.html 的樣式和一些元素定義如下：

<!DOCTYPE html><html>    <head>        <title>Plain HTML</title>        <style>            .light {                background: #ccc;            }            .dark {                background: #333;            }            .light a {                color: red;            }            .dark a {                color: yellow;            }            div {                padding: 2rem;            }            div > div {                margin: 0 0 0 2rem;            }            p {                margin: 0 0 2rem 0;            }        </style>    </head>    <body>        <div class="light">            <p><a href="#">First Level</a></p>            <div class="dark">                <p><a href="#">Second Level</a></p>                <div class="light">                    <p><a href="#">Third Level</a></p>                </div>            </div>        </div>    </body></html>

結果如下:

這里的問題是，根據已定義的 CSS， Third Level 應為紅色文本，而不是黃色。這是 CSS 級聯的副作用，因為頁面樣式是根據外觀順序來解釋的，因此 Third Level 被認為是黃色而不是紅色。通過 Bram.us 原文中的圖表，我們可以看到 CSS 級聯評估選擇器和樣式的順序：

如果不使用 @scope ，CSS 級聯將直接從 "特定性 "轉為 "外觀順序"。使用 @scope 后，CSS 級聯將首先考慮 @scope 元素。您可以通過在示例中為 .light 和 .dark 樣式添加 @scope 來了解其效果。

首先，將原始 HTML 和 CSS 修改如下：

<!DOCTYPE html><html>    <head>        <title>Plain HTML</title>        <style>            .light {                background: #ccc;            }            .dark {                background: #333;            }            div {                padding: 2rem;            }            div > div {                margin: 0 0 0 2rem;            }            p {                margin: 0 0 2rem 0;            }            @scope (.light) {                :scope {                    background: white;                }                a {                    color: red;                }            }            @scope (.dark) {                :scope {                    background: black;                }                a {                    color: yellow;                }            }        </style>    </head>    <body>        <div class="light">            <p><a href="#">First Level</a></p>            <div class="dark">                <p><a href="#">Second Level</a></p>                <div class="light">                    <p><a href="#">Third Level</a></p>                </div>            </div>        </div>    </body></html>

輸出結果如下：

總結

在本文中，我們探討了將 BEM 風格應用程序重構為使用 Chrome 瀏覽器中新推出的 @scope 功能的方法。我們介紹了 @scope 的工作原理，然后將一個簡單的頁面從 BEM 重構為 @scope 。

新的 @scope 功能有可能成為前端開發人員的一大優勢。不過，其他瀏覽器也必須實現支持，這可能需要時間。在此之前，這絕對是一個有趣的功能，對前端項目的樣式設計可能會有很大幫助。

本文鏈接：http://www.www897cc.com/showinfo-26-23633-0.htmlCSS @scope 如何取代 BEM

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：八個 yyds 的開源前端實戰項目！

下一篇：原生“跨組件”通信方式

標簽：

熱門焦點

7月安卓手機性能榜：紅魔8S Pro再奪榜首

7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
2023年Q2用戶偏好榜：12+256G版本成新主流

3月份的性能榜、性價比榜和好評榜之后，就要輪到2023年的第二季度偏好榜了，上半年的新機潮已經過去，最明顯的肯定就是大內存和存儲的機型了，另外部分中端機也取消了屏幕塑料支架
Rust中的高吞吐量流處理

作者 | Noz編譯 | 王瑞平本篇文章主要介紹了Rust中流處理的概念、方法和優化。作者不僅介紹了流處理的基本概念以及Rust中常用的流處理庫，還使用這些庫實現了一個流處理程序
三萬字盤點 Spring 九大核心基礎功能

大家好，我是三友~~今天來跟大家聊一聊Spring的9大核心基礎功能。話不多說，先上目錄：圖片友情提示，本文過長，建議收藏，嘿嘿嘿！一、資源管理資源管理是Spring的一個核心的基礎功能，不
騰訊VS網易，最卷游戲暑期檔，誰能笑到最后？

作者：無銹缽來源：財經無忌7月16日晚，上海1862時尚藝術中心。伴隨著幻象的精準命中，碩大的熒幕之上，比分被定格在了14：12，被寄予厚望的EDG戰隊以絕對的優勢戰勝了BLG戰隊，拿下了總決
華為將推出盤古數字人大模型可幫助用戶12小時完成數字人生成

在今日舉行的2023年華為云數字文娛AI創新峰會上，華為云全球Marketing與銷售服務總裁石冀琳表示，華為云將在后續推出盤古數字人大模型，可幫助用戶12小
蘋果、三星、惠普等暫停向印度出口筆記本和平板電腦

集微網消息，據彭博社報道，在8月3日印度突然禁止在沒有許可證的情況下向印度進口電腦/平板及顯示器等產品后，蘋果、三星電子和惠普等大公司暫停向印度
華為舉行春季智慧辦公新品發布會首次推出電子墨水屏平板

北京時間2月27日晚，華為在巴塞羅那舉行春季智慧辦公新品發布會，在海外市場推出之前已經在中國市場上市的筆記本、平板、激光打印機等辦公產品，并首次推出搭載

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

CSS @scope 如何取代 BEM

CSS @scope 是什么？

瀏覽器支持 CSS @scope

什么是 BEM

使用@scope重構BEM

@scope 與 BEM 相比的其他優勢

總結

7月安卓手機性能榜：紅魔8S Pro再奪榜首

2023年Q2用戶偏好榜：12+256G版本成新主流

Rust中的高吞吐量流處理

三萬字盤點 Spring 九大核心基礎功能

重估百度丨“晚熟”的百度云，能等到春天嗎？

騰訊VS網易，最卷游戲暑期檔，誰能笑到最后？

華為將推出盤古數字人大模型可幫助用戶12小時完成數字人生成

蘋果、三星、惠普等暫停向印度出口筆記本和平板電腦

華為舉行春季智慧辦公新品發布會首次推出電子墨水屏平板

最新推薦

猜你喜歡

熱門推薦

相關資訊