CSS naming rules

Previous words

Whenever writing HTML structure involves CSS naming, you have to struggle. There are many CSS naming specifications on the market, such as OOCSS, SMACSS, BEM and MVCSS. The most popular among them is probably BEM. This article will introduce CSS naming in detail

Mainstream naming

[BEM]

Speaking of CSS naming, of course BEM must be mentioned. BEM means B module (block), E element (element), and M modifier (modifier). The module and the sub-element are separated by two underscores, and the sub-element and the modifier are separated by two dashes

. Regarding the sub-element E, there are two ways to write it. One is to write according to hierarchical nesting, such as block-ele1-son-inner, but writing this way will cause the name to be too long; the other is to flatten, all sub-elements under a module B, Regardless of the mutual level, they are directly connected to B, such as block-inner, but this cannot express the hierarchical relationship, and conflicts may also occur when naming.

   BEM's naming is very good, Otherwise, it would not become the most popular naming method. However, BEM’s naming of sub-elements, whether it is hierarchical long naming or flat short naming, has flaws

[NEC]

Compared with BEM, which uses module B as the top-level element, the sub-elements The element class name contains the naming of the inheritance relationship. NetEase's NEC specification uses the descendant selector method

NEC divides elements into 5 categories: layout (grid) (.g-); module (module) (.m -); unit (.u-); function (.f-); skin (.s-); status (.z-). The descendant selector does not need to fully represent the structure tree level, and should be as short as possible

.m-list{margin:0;padding:0;}.m-list .itm{margin:1px;padding:1px;}.m-list .cnt{margin-left:100px;}

Personally, I think NetEase’s approach to element classification is very good. Some globally reusable functional modules are distinguished to make the structure clearer. However, I personally don't agree with the way descendant selectors are used. When the nesting level is deep, naming conflicts are still a problem

[JD]

JD.com’s naming rules use long names that represent hierarchical nesting relationships. When the descendant module exceeds level 4 or above, consider an identifiable independent abbreviation in the ancestor module as the new descendant module

<div class="modulename"><div class="modulename_cover"></div><div class="modulename_info"><div class="modulename_info_user"><div class="modulename_info_user_img"><img src="" alt=""><!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写--><div class="miui_tit"></div><div class="miui_txt"></div>...</div></div><div class="modulename_info_list"></div></div></div>

The name of the factor element like Jingdong is too long and The method of using acronyms is very good. So far, there is no other better solution to long naming on the market

Naming method

[Descendant selector or class name]

Regarding CSS naming, the biggest debate is whether to use descendant selectors or class names. As shown in the following example

<ul class="list"><li class="list-item"></li><li class="list-item"></li><li class="list-item"></li></ul><ul class="list"><li class="item"></li><li class="item"></li><li class="item"></li></ul><ul class="list"><li></li><li></li><li></li></ul>

If you use the first long class name method to set the style for the

.list-item{}

.list .item{}

.list li{}

.list{
    li{}
}

//中划线
list-item
//下划线
list_item
//首字母大写
listItem

<div class="box"><ul class="box-list"><li class="box-list-item"></li><li class="box-list-item"></li><li class="box-list-item"></li></ul></div>

<div class="box"><button class="box-btn box-btn_default" type="button"></button><button class="box-btn" type="button"></button></div>

<div class="boxWrap"><section class="box"><h2 class="box-title"></h2><p class="box-content"></p></section>    </div>

<div class="box"><button class="m-btn m-btn_error" type="button"></button><button class="m-btn" type="button"></button></div>

<span style="color: #000000;">文档    doc
头部    header(hd)
主体    body    
尾部    footer(ft)    
主栏    main
侧栏    side    
容器    box/container<br></span>

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

按钮        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

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

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

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

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

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

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

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

<header class="hd"><nav class="hd-navbar m-navbar m-varbar_primary"><div class="hd-navbar-tel">联系方式：400-888-8888</div><ul class="hd-navbar-nav"><li class="Hnn-itm m-btn m-btn_info"><a href="#">登录</a></li><li class="Hnn-itm m-btn"><a href="#">快速注册</a></li><li class="Hnn-itm m-btn"><a href="#">关于</a></li><li class="Hnn-itm m-btn"><a href="#">帮助</a></li></ul></nav>...</header>