Bagaimana untuk menulis kod css yang elegan dan tahan lama? Berkongsi petua penamaan css!

Jika anda telah lama bekerja dengan CSS, anda tahu bahawa warisan, kekhususan dan penamaan adalah antara perkara yang paling sukar untuk ditangani. Memandangkan semua CSS adalah global, apabila pangkalan kod anda berkembang, ia menjadi semakin sukar untuk menghalang gaya daripada bercanggah antara satu sama lain dan menyebabkan kesan sampingan yang tidak diingini! Artikel berikut akan berkongsi dengan anda beberapa petua penamaan CSS untuk menjadikan kod kami elegan dan menarik saya harap ia akan membantu semua orang.

penamaan CSS - BEM

Apa itu BEM

BEM ialah konvensyen penamaan CSS. [Pembelajaran yang disyorkan: tutorial video css]

BEM bermaksud "blok, elemen, pengubah suai".

Dalam pemilih, tiga simbol berikut mewakili perhubungan lanjutan:

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

Menggunakan perbandingan contoh BEM

Sekat

Seperti dalam contoh di bawah, li.item ialah sub-elemen senarai

/* 常规写法和BEM写法相同 */
.list

Elemen

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
   <ul class="list">
    <li class="list__item">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常规写法 */ 
.list{} 
.list .item{} 

/* BEM写法 */ 
.list{} 
.list__item{}

Pengubah suai (pengubah suai)

"pengubah suai" boleh difahami sebagai status tertentu bagi blok!

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
  <ul class="list">
    <li class="list__item_active">
      Pricing
    </li>
    <li class="list__item">Contact</li>
  </ul>

/* 常规写法 */ 
.list{} 
.list .item{} 
.list .item.active{} 

/* BEM写法 */ 
.list{} 
.list__item{}
.list__item_active{}

Faedah BEM

• Singkirkan masalah kekhususan
• Betulkan masalah warisan
• Berhenti bimbang tentang penamaan

Beberapa prinsip penamaan css

Nama pendek lebih baik daripada nama panjang

Oleh kerana nama pendek memendekkan masa penulisan, ia juga mengurangkan saiz fail css! Contohnya, contoh ini:

//  推荐
.some-intro{...}

// 不推荐
.some-introduction{...}

Penamaan gabungan lebih baik daripada penamaan tunggal

// 不建议
.header{...}

//推荐
.cs-header{...}

Atribut -penamaan berorientasikan dan penamaan berorientasikan semantik

Penamaan berorientasikan atribut bermaksud bahawa penamaan pemilih mengikut gaya CSS tertentu dan tiada kaitan dengan projek, halaman atau modul. Contohnya, nama kelas terapung jelas yang lebih klasik .clearfix:

.clearfix:after { content : ''; display: table; clear: both; }

penamaan berorientasikan semantik dinamakan mengikut konteks di mana elemen aplikasi terletak. Contohnya:

.header { background-color: #333; color: #fff; }
.logo {font-size: 0; color : transparent;}

Dua kaedah penamaan di atas mempunyai kelebihan dan kekurangannya sendiri:

1 Berorientasikan atribut

• Kelebihan: terletak pada CSS Ia mempunyai kadar penggunaan semula yang tinggi, prestasi terbaik, pasang dan main, mudah dan pantas, dan pembangunan juga sangat pantas, kerana ia menjimatkan banyak masa bertukar antara fail HTML dan CSS.
• Kelemahan: Disebabkan atribut tunggalnya, senario yang terpakai adalah terhad Selain itu, kerana ia mudah digunakan, ia mudah digunakan secara berlebihan, mengakibatkan kos penyelenggaraan yang lebih tinggi.

2. Berorientasikan semantik

• Kelebihan ialah ia mempunyai pelbagai senario aplikasi, boleh mencapai kesan susun atur yang sangat indah, dan mudah dikembangkan;
• Kelemahan: Kodnya panjang dan kecekapan pembangunan adalah sederhana, kerana semua HTML perlu dinamakan, walaupun jaraknya 10 piksel. Ini menyebabkan ramai pembangun sama ada memilih untuk menggunakan pemilih teg secara langsung atau memilih nama kelas yang ringkas dan kemudian menentukan gaya melalui perhubungan ibu bapa-anak, yang mengakibatkan masalah penyelenggaraan yang lebih teruk.

Syor ringkasan nama

Status

前一个    prev
后一个    next
当前的    current

显示的    show
隐藏的    hide
打开的    open
关闭的    close

选中的    selected
有效的    active
默认的    default
反转的    toggle

禁用的    disabled
危险的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出错的    error

大型的    lg
小型的    sm
超小的    xs

Susun atur

文档    doc
头部    header(hd)
主体    body    
尾部    footer(ft)    
主栏    main
侧栏    side    
容器    box/container

Bahagian Biasa

列表    list
列表项  item
表格    table    
表单    form
链接    link
标题    caption/heading/title
菜单    menu
集合    group
条      bar
内容    content    
结果    result

Komponen

按钮        button(btn)
字体        icon
下拉菜单    dropdown
工具栏      toolbar
分页        page
缩略图      thumbnail
警告框      alert
进度条      progress
导航条      navbar
导航        nav    
子导航      subnav
面包屑      breadcrumb(crumb)    
标签        label
徽章        badge
巨幕        jumbotron
面板        panel
洼地        well
标签页      tab
提示框      tooltip
弹出框      popover
轮播图      carousel
手风琴      collapse 
定位浮标    affix

Widget semantik

品牌        brand
标志        logo
额外部件    addon
版权        copyright
注册        regist(reg)
登录        login
搜索        search    
热点        hot
帮助        help
信息        info
提示        tips
开关        toggle
新闻        news
广告        advertise(ad)
排行        top    
下载        download

Widget berfungsi

左浮动    fl
右浮动    fr
清浮动    clear

Tapak web penamaan yang disyorkan

codelf: https://unbug.github.io/codelf

Dokumen rujukan:

1 "dunia pemilihan css" Zhang Xinxu

2. >

(Belajar perkongsian video:

bahagian hadapan web

)

Atas ialah kandungan terperinci Bagaimana untuk menulis kod css yang elegan dan tahan lama? Berkongsi petua penamaan css!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!