Heim >Web-Frontend >HTML-Tutorial >CSS-Benennungsregeln
CSS-Benennungsregeln
- 巴扎黑Original
- 2017-07-18 17:49:252830Durchsuche
Die vorherigen Wörter
Jedes Mal, wenn das Schreiben einer HTML-Struktur CSS-Benennungen erfordert, müssen Sie sich abmühen. Es gibt viele CSS-Namensspezifikationen auf dem Markt, wie zum Beispiel OOCSS, SMACSS, BEM und MVCSS. Das beliebteste unter ihnen ist wahrscheinlich BEM. In diesem Artikel wird die CSS-Benennung im Detail vorgestellt
Mainstream-Benennung
[BEM]
Wenn es um CSS-Benennung geht, muss natürlich auch BEM erwähnt werden. BEM bedeutet B-Modul (Block), E-Element (Element) und M-Modifikator (Modifikator). Das Modul und das Unterelement werden durch zwei Unterstriche getrennt, und das Unterelement und der Modifikator werden durch zwei Unterstriche getrennt.
Für das Unterelement E gibt es zwei Möglichkeiten, es zu schreiben. Eine besteht darin, in hierarchischer Verschachtelung zu schreiben, z. B. block-ele1-son-inner, aber wenn Sie auf diese Weise schreiben, wird der Name zu lang. Die andere besteht darin, alle Unterelemente unter einem Modul B abzuflachen, unabhängig von ihren gegenseitigen Ebenen. sind direkt mit B verbunden. Wie block-inner, aber dies kann keine hierarchischen Beziehungen ausdrücken, und es kann zu Konflikten bei der Benennung von
kommen. Die Benennung von BEM ist sehr gut, sonst würde sie nicht die beliebteste Benennungsmethode werden. Allerdings weist die BEM-Benennung von Unterelementen, sei es eine hierarchische Langbenennung oder eine flache Kurzbenennung, Mängel auf
[NEC]
Im Vergleich zu BEM, das Modul B als oberste Ebene verwendet Element, die Unterelemente Der Name der Elementklasse enthält die Benennung der Vererbungsbeziehung. Die NEC-Spezifikation verwendet die Nachkommenauswahlmethode
NEC unterteilt Elemente in 5 Kategorien: Layout (Gitter) (.g-); (Modul) (.m-); Funktion (.f-); Status (.z-); Der Nachkommenselektor muss die Strukturbaumebene nicht vollständig darstellen und sollte so kurz wie möglich sein
.m-list{margin:0;padding:0;}.m-list .itm{margin:1px;padding:1px;}.m-list .cnt{margin-left:100px;}Ich persönlich finde den Ansatz von NetEase zur Elementklassifizierung sehr gut. Um die Struktur übersichtlicher zu machen, werden einige global wiederverwendbare Funktionsmodule unterschieden. Allerdings bin ich persönlich nicht mit der Art und Weise einverstanden, wie Nachkommenselektoren verwendet werden. Wenn die Verschachtelungsebene tief ist, stellen Namenskonflikte immer noch ein Problem dar
[JD]
Die Benennungsregeln von JD.com verwenden lange Namen, die hierarchische Verschachtelungsbeziehungen darstellen. Wenn das Nachkommenmodul Level 4 oder höher überschreitet, betrachten Sie die identifizierbare unabhängige Abkürzung im Vorfahrenmodul als neues Nachkommenmodul
<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>
Der Name des Faktorelements wie JD Die Methode Die Verwendung von Akronymen ist bisher sehr gut.
Benennungsmethode
[Nachkommenselektor oder Klassenname 】
In Bezug auf die CSS-Benennung besteht die größte Debatte darin, ob Nachkommenselektoren oder Klassennamen verwendet werden sollen. Wie im folgenden Beispiel gezeigt
<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>
Wenn Sie die erste Methode mit langen Klassennamen verwenden, um den Stil für das
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命名，并没有最佳实践之说，根据项目的复杂程序进行合适的命名才是可取的
欢迎交流
Das obige ist der detaillierte Inhalt vonCSS-Benennungsregeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!