CSS 명명 규칙

이전 단어

　HTML 구조를 작성할 때 CSS 이름 지정이 포함될 때마다 어려움을 겪어야 합니다. OOCSS, SMACSS, BEM 및 MVCSS 등과 같은 많은 CSS 명명 사양이 시장에 나와 있습니다. 그 중 가장 인기 있는 것은 아마도 BEM일 것이다. 이번 글에서는 CSS 네이밍에 대해 자세히 소개하겠습니다

메인스트림 네이밍

【BEM】

CSS 네이밍을 이야기할 때 당연히 BEM을 언급해야 합니다. BEM은 B 모듈(블록), E 요소(요소), M 수정자(modifier)를 의미합니다. 모듈과 하위 요소는 밑줄 2개로 구분되며, 하위 요소와 수식어는 대시 2개로 구분됩니다.

  하위 요소 E에 대해서는 두 가지 작성 방법이 있습니다. 하나는 block-ele1-son-inner，但是这样写会导致命名过长；另一种是扁平化，一个模块B下的所有子元素，无论相互层级如何，都直接连接B，如block-inner와 같이 계층적 중첩에 따라 작성하는 것이지만, 이는 계층적 관계를 표현할 수 없으며, 명명 시 충돌도 발생할 수 있습니다.

  BEM 명명은 매우 좋습니다. 그렇지 않으면 가장 널리 사용되는 명명 방법이 되지 않습니다. 그러나 계층적 긴 이름 지정이든 단순 짧은 이름 지정이든 BEM의 하위 요소 이름 지정에는 결함이 있습니다

[NEC]

　모듈 B를 최상위 요소로 사용하는 BEM에 비해 하위 요소의 클래스 이름은 요소에는 상속 관계가 포함됩니다. NetEase의 NEC 사양은 하위 선택기 방법을 사용합니다.

NEC는 요소를 5가지 범주로 나눕니다: 레이아웃(그리드)(.g-); 모듈(모듈)(.m-); u-) ; 기능(.f-); 스킨(.s-); 하위 항목 선택기는 구조 트리 수준을 완전히 나타낼 필요는 없으며 가능한 한 짧아야 합니다.

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

개인적으로 NetEase의 요소 분류 접근 방식은 매우 좋다고 생각합니다. 전역적으로 재사용 가능한 일부 기능 모듈은 구조를 더 명확하게 하기 위해 구별됩니다. 그러나 나는 개인적으로 자손 선택자가 사용되는 방식에 동의하지 않습니다. 중첩 수준이 깊으면 명명 충돌은 여전히 ​​문제입니다

[JD]

　 JD.com의 명명 규칙은 계층적 중첩 관계를 나타내는 긴 이름을 사용합니다. 자손 모듈이 레벨 4 이상을 초과하는 경우 조상 모듈에서 식별 가능한 독립 약어를 새로운 자손 모듈로 고려하십시오.

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

　 이름이 너무 긴 요소 요소에 대해 약어를 사용하는 JD.com의 접근 방식은 매우 좋습니다. 긴 이름 지정에 대한 더 나은 솔루션은 시장에 없습니다

이름 지정 방법

[하위 선택자 또는 클래스 이름]

CSS 이름 지정과 관련하여 가장 큰 논쟁은 하위 선택자를 사용할지 아니면 클래스 이름을 사용할지 여부입니다. 다음 예와 같이

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

첫 번째 긴 클래스 이름 방법을 사용하여

요소의 스타일을 설정하는 경우 다음 설정만 지정하면 됩니다.

.list-item{}

두 번째를 사용하는 경우 짧은 클래스 이름 메서드를 사용하는 경우

요소의 스타일을 다음과 같이 설정해야 합니다.

.list .item{}

세 번째 하위 선택기 메서드를 사용하는 경우

요소의 스타일을 설정합니다. 다음과 같이 설정해야 합니다

.list li{}

간단한 관점에서 보면 하위 항목 선택기의 세 번째 방법이 가장 간단합니다. 하위 요소의 이름을 지정하는 데 시간을 소비할 필요가 없으며 sass로 작성하기 쉽습니다

rreee

　　但是，它有一个很严重的问题，就是如果HTML结构层级较深，往往出现选择器层级过长，如.list li span a{}

　　而且，因为后代选择器强烈地依赖HTML结构，为了避免因为少写一层结构，导致选择器特殊性降低，样式无法生效的情况，也不得不这样写

　　一个不得不提的问题是，CSS选择器的解析顺序是从右到左。而使用后代选择器.list li{}，浏览器需要遍历出所有的li，再找出.list下的li，效率是最低的

　　因此，个人认为第三种后代选择器的方式并不是好选择

　　下面介绍第二种短类名的方式

　　1、选择器解析效率比第三种方式好，毕竟.item比li的范围小很多

　　2、短类名.list .item同样存在依赖HTML结构的情况，很可能出现选择器层级过长

　　3、使用较简易，在sass中书写容易，且起名也较简单

　　4、由于给li增加了类名，于是增加了HTML文件大小

　　最后介绍第三种长类名的方式

　　这种方式的选择器效率最高，因为.list-item这个类型页面中只出现一次，可类比于id选择器的解析速度

　　由于使用长类名的方式，可以完全不使用后代选择器，则无需考虑选择器特殊性较低，样式无法生效的情况，也不会出现选择器层级过长，因为它仅有一级

　　但是，相应地，它最大的缺点是类名较长，大大地增加了HTML文件大小。于是，可借鉴京东，当子孙模块超过3级时，采用首字母缩写，并将缩写后首字母大写的做法，在如将.list-item-link-title缩写为.Lil-title

　　最终，选择可缩写的长类名作为CSS命名的主要方式

【分隔符】

　　一般地，classname分隔符有3种，中划线-，下划线_，以及首字母大写，以分隔list和item为例

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

　　1、中划线

　　中划线可以用来表示层级关系

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

　　2、下划线

　　下划线可以用来表示不同的状态

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

　　3、首字母大写

　　首字母大写可以用来表示因为样式的需要，而不得不增加的HTML结构。一般地，如果在外层增加结构，可以增加Wrap，在内层增加结构，可以增加Inner，且不影响原先的classname的命名

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

【组件】

　　通过上面的长命名方式和分隔符的使用，解决了基础结构的命名。但是，在页面中，很可能出现一些组件的应用，这些组件可以复用到页面的多个位置。这时，再使用上面的方式就不太合适

　　于是，可以以m-为前缀，来表示这是一个组件

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

　　关于CSS命名，并没有最佳实践之说，根据项目的复杂程序进行合适的命名才是可取的　　

　　欢迎交流　　

위 내용은 CSS 명명 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!