Maison > interface Web > tutoriel HTML > le corps du texte

Règles de dénomination CSS

巴扎黑
Libérer: 2017-07-18 17:49:25
original
2790 Les gens l'ont consulté

Les mots précédents

Chaque fois que l'écriture d'une structure HTML implique un nommage CSS, vous devez vous battre. Il existe de nombreuses spécifications de dénomination CSS sur le marché, telles que OOCSS, SMACSS, BEM et MVCSS. Le plus populaire d’entre eux est probablement BEM. Cet article présentera en détail le nommage CSS

Nom grand public

[BEM]

Lorsqu'on parle de nommage CSS, il faut bien sûr mentionner BEM. BEM signifie module B (bloc), élément E (élément) et modificateur M (modificateur). Le module et le sous-élément sont séparés par deux traits de soulignement, et le sous-élément et le modificateur sont séparés par deux traits de soulignement

Concernant le sous-élément E, il existe deux manières de l'écrire. L'une consiste à écrire dans une imbrication hiérarchique, comme block-ele1-son-inner, mais écrire de cette façon entraînera un nom trop long ; l'autre consiste à aplatir, dans lequel tous les sous-éléments d'un module B, quels que soient leurs niveaux mutuels, sont directement connectés à B. Comme block-inner, mais cela ne peut pas exprimer de relations hiérarchiques, et des conflits peuvent survenir lors de la dénomination de

  La dénomination de BEM est très bonne, sinon elle ne deviendrait pas la méthode de dénomination la plus populaire. Cependant, la dénomination des sous-éléments par BEM, qu'il s'agisse d'une dénomination hiérarchique longue ou d'une dénomination courte et plate, présente des défauts

[NEC]

Par rapport à BEM, qui utilise le module B comme niveau supérieur élément, les sous-éléments Le nom de la classe d'élément contient le nom de la relation d'héritage. La spécification NEC de NetEase utilise la méthode de sélection descendante

NEC divise les éléments en 5 catégories : disposition (grille) (.g-) ; (module) (.m -); unité (.u-); fonction (.f-); état (.z-); Le sélecteur descendant n'a pas besoin de représenter entièrement le niveau de l'arborescence de la structure et doit être aussi court que possible

.m-list{margin:0;padding:0;}.m-list .itm{margin:1px;padding:1px;}.m-list .cnt{margin-left:100px;}
Copier après la connexion

Personnellement, je pense que l'approche de NetEase en matière de classification des éléments est très bonne. Certains modules fonctionnels globalement réutilisables sont distingués pour rendre la structure plus claire. Cependant, personnellement, je ne suis pas d'accord avec la façon dont les sélecteurs descendants sont utilisés. Lorsque le niveau d'imbrication est profond, les conflits de noms restent un problème

[JD]

Les règles de dénomination de JD.com utilisent des noms longs qui représentent des relations d'imbrication hiérarchiques. Lorsque le module descendant dépasse le niveau 4 ou supérieur, considérez l'abréviation indépendante identifiable dans le module ancêtre comme le nouveau module descendant

<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>
Copier après la connexion

Le nom de l'élément facteur tel que JD La méthode. de long et l'utilisation d'acronymes est très bonne. Jusqu'à présent, il n'y a pas d'autre meilleure solution pour la dénomination longue sur le marché

Méthode de dénomination

[Sélecteur descendant ou nom de classe. 】

Concernant la dénomination CSS, le plus grand débat est de savoir s'il faut utiliser des sélecteurs descendants ou des noms de classe. Comme le montre l'exemple suivant

<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>
Copier après la connexion

Si vous utilisez la première méthode de nom de classe long pour définir le style de l'élément

  • .list-item{}
    Copier après la connexion

    À partir d'un simple perspective, la troisième sélection descendante La méthode conteneur est la plus simple, il n'y a pas besoin de passer du temps à nommer les éléments enfants, et il est facile d'écrire en sass
    .list .item{}
    Copier après la connexion

      但是,它有一个很严重的问题,就是如果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
    Copier après la connexion

      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>
    Copier après la connexion

      2、下划线

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

    <div class="box"><button class="box-btn box-btn_default" type="button"></button><button class="box-btn" type="button"></button></div>
    Copier après la connexion

      3、首字母大写

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

    <div class="boxWrap"><section class="box"><h2 class="box-title"></h2><p class="box-content"></p></section>    </div>
    Copier après la connexion

    【组件】

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

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

    <div class="box"><button class="m-btn m-btn_error" type="button"></button><button class="m-btn" type="button"></button></div>
    Copier après la connexion

     

    命名推荐

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

    【布局】

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

    【通用部件】

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

    【组件】

    按钮        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
    Copier après la connexion

    【语义化小部件】

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

    【功能部件】

    左浮动    fl
    右浮动    fr
    清浮动    clear
    Copier après la connexion

    【状态】

    前一个    previous
    后一个    next
    当前的    current
    
    显示的    show
    隐藏的    hide
    打开的    open
    关闭的    close
    
    选中的    selected
    有效的    active
    默认的    default
    反转的    toggle
    
    禁用的    disabled
    危险的    danger
    主要的    primary
    成功的    success
    提醒的    info
    警告的    warning
    出错的    error
    
    大型的    lg
    小型的    sm
    超小的    xs
    Copier après la connexion

     

    实践

    <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>
    Copier après la connexion

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

      欢迎交流  

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

  • Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal