ホームページ > 記事 > ウェブフロントエンド > CSSの命名規則
HTML構造を書くときにCSSの名前付けが関係するときは、毎回苦労することになります。市場には、OOCSS、SMACSS、BEM、MVCSS など、多くの CSS 命名仕様が存在します。その中で最も人気があるのはおそらく BEM です。この記事ではCSSのネーミングを詳しく紹介します
【BEM】
CSSのネーミングといえば、もちろんBEMのことは外せません。 BEMとは、Bモジュール(ブロック)、Eエレメント(要素)、Mモディファイア(修飾子)を意味します。モジュールとサブ要素はアンダースコア2つで区切られ、サブ要素と修飾子はアンダースコア2つで区切られます
サブ要素Eについては、2つの書き方があります。一つは、block-ele1-son-inner
,但是这样写会导致命名过长;另一种是扁平化,一个模块B下的所有子元素,无论相互层级如何,都直接连接B,如block-inner
のように階層的な入れ子に従って書く方法ですが、これでは階層関係を表現できず、命名時に衝突が発生する可能性もあります
BEMの命名は非常に優れており、そうでないと最も普及した命名方法にはなりません。しかし、BEM のサブ要素の名前付けには、階層的なロングネーミングであろうと、フラットなショートネーミングであろうと、欠陥があります
[NEC]
モジュールBをトップレベルの要素として使用するBEMと比較して、サブ要素のクラス名は、要素には継承関係が含まれます。NetEase の NEC 仕様では、子孫セレクター メソッドが使用されます。NEC では、要素を次の 5 つのカテゴリに分類します。 u-) ; 関数 (.f-); ステータス (.z-)。子孫セレクターは構造ツリー レベルを完全に表す必要はなく、できるだけ短くする必要があります
.m-list{margin:0;padding:0;}.m-list .itm{margin:1px;padding:1px;}.m-list .cnt{margin-left:100px;}
[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>
命名方法
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{}
りー
但是,它有一个很严重的问题,就是如果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 中国語 Web サイトの他の関連記事を参照してください。