首页 > 代码库 > CSS命名实践

CSS命名实践

2024-10-26 10:12:39   213人阅读

前面的话

　　每次写HTML结构涉及到CSS命名时，都要挣扎一番。关于CSS命名的规范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在这里面最火的应该算BEM了。本文将详细介绍CSS命名

 

主流命名

【BEM】

　　说起CSS命名，当然要提到BEM。BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)。模块和子元素之间用两个下划线分隔，子元素和修饰符之间用两个中划线分隔

  关于子元素E，有两种写法。一种是按照层级嵌套来写，如block-ele1-son-inner，但是这样写会导致命名过长；另一种是扁平化，一个模块B下的所有子元素，无论相互层级如何，都直接连接B，如block-inner，但是这样就无法表示层级关系，命名时也可能会出现冲突

  BEM的命名是很好的，不然也不能成为最流行的命名方法。但是，BEM对子元素的命名，无论是层级长命名还是扁平化短命名，都有缺陷

【NEC】

　　相较于BEM以模块B为顶级元素，子元素类名中包含继承关系的命名，网易的NEC规范使用后代选择器方式

  NEC将元素分为了5类：布局(grid)(.g-)；模块(module)(.m-)；元件(unit)(.u-)；功能(function)(.f-)；皮肤(skin)(.s-)；状态(.z-)。而后代选择器不需要完整表现结构树层级，尽量能短则短

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

　　个人认为，网易对于元素分类的做法很好。关于一些全局可复用的功能性的模块进行区分，结构更为清晰。但是，对于使用后代选择器的方式，个人不太认同。当嵌套层级较深时，命名冲突依旧是一个问题

【JD】

　　京东的命名规则采用表示层级嵌套关系的长命名。当子孙模块超过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>

　　京东这种因子元素名字过长而采用首字母缩写的做法非常赞，至今市面上没有其他更好的解决长命名的方案

 

命名方式

【后代选择器还是类名】

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

　　如果采用第一种长类名的方式，为<li>元素设置样式，只需如下设置即可

.list-item{}

　　如果采用第二种短类名的方式，则为<li>元素设置样式，需如下设置

.list .item{}

　　如果采用第三种后代选择器的方式，则为<li>元素设置样式，需如下设置

.list li{}

　　如果从简易角度来看，第三种后代选择器的方式最简单，无需花时间去给子元素起名，且在sass中书写很容易

.list{    li{}}

　　但是，它有一个很严重的问题，就是如果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>

 

命名推荐

　　有了合适的命名方式，还需要语义化命名，且有不影响语义的情况下，可以简写

【布局】

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

【通用部件】

列表    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命名，并没有最佳实践之说，根据项目的复杂程序进行合适的命名才是可取的　　

　　欢迎交流　　

<script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/catalog.js"></script>

CSS命名实践


联系
我们