欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css中BEM書寫規(guī)范的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)css中BEM書寫規(guī)范的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),甘南企業(yè)網(wǎng)站建設(shè),甘南品牌網(wǎng)站建設(shè),網(wǎng)站定制,甘南網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,甘南網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

BEM是基于組件的web開發(fā)方法。其思想是將用戶界面分隔為獨立的塊，從而使開發(fā)復(fù)雜的UI界面變得更簡單和快，且不需要粘貼復(fù)制便可復(fù)用現(xiàn)有代碼。BEM由Block、Element、Modifier組成。選擇器里用以下連接符擴(kuò)展他們的關(guān)系：

  • `__：雙下劃線用來連接塊和塊的子元素

  • ` ：僅作為連字符使用，連接塊或元素或修飾符的多個單詞（也可以直接寫成駝峰式）

  • --：雙中劃線用來連接塊或元素的狀態(tài)（也可使用‘_’單下劃線表示）

示例：

block-name_modifier-name
block-name__element-name--modifier-name
block-name_modifier-name--modifier-value
block-name__element-name--modifier-name--modifier-value

基本概念

Block(塊)

代碼片段可能被復(fù)用且這段代碼不依賴其他組件即可用Block。塊可以互相嵌套,可以嵌套任意多層。
特點：

  • 塊的名稱用于描述它的目的。如 menu、button

  • 塊不能影響所在環(huán)境。這意味著不能為塊設(shè)置margin或position

  • 只能使用class命名選擇器，而不能使用標(biāo)簽或id選擇器

  • 不依賴于頁面內(nèi)其他塊或元素

Element（元素）

Element是Block的一部分，沒有獨立存在的意義。任何一個Element語義上是和Block綁定的。

特點：

  • 與塊使用'__'連接。 如： block__item

  • 用于描述它的目的。如：item、text

  • 元素可以彼此嵌套,可以嵌套任意多層

  • 元素總是屬于塊的一部分。所以類似于block__item1__item2的命名是不合法的

Modifier（修飾符）


Modifier是Block或Element上的標(biāo)記。使用它們來改變樣式，行為或狀態(tài)。與塊或元素連接符為'--'。

應(yīng)用

相對另外的Blocks定位Block

好的方式是混合使用block和element。解決block上不能設(shè)置margin、position。

例：

<body class="page">
    <!-- header and navigation-->
    <header class="header page__header">...</header>

    <!-- footer -->
    <footer class="footer page__footer">...</footer>
</body>
.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}

Block內(nèi)定位Elements

通過額外創(chuàng)建Block的子Element來定位嵌套。

例：

<body class="page">
    <div class="page__inner">
      <!-- header and navigation-->
      <header class="header">...</header>

      <!-- footer -->
      <footer class="footer">...</footer>
    </div>
</body>
.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}

關(guān)于命名

選擇器的命名必須完整且精確地描述它代表的BEM實體。

例：

.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}

我們可直接指導(dǎo)我們在處理一個塊元素。在html使用如：

<button class="button button_theme_islands">
    <span class="button__icon"></span>

    <span class="button__text">...</span>
</button>

而下面的css就很難讓我們做出相同的判斷：

.button {}
.icon {}
.text {}
.theme_islands {}

在我的git項目miniui中采用了BEM規(guī)范，使用sass實現(xiàn)了BEM。

感謝各位的閱讀！關(guān)于“css中BEM書寫規(guī)范的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：css中BEM書寫規(guī)范的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://chinadenli.net/article44/cepcee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、Google、品牌網(wǎng)站制作、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司