Comment écrire du code CSS élégant et durable ? Partager des conseils de dénomination CSS !

Si vous travaillez avec CSS depuis un certain temps, vous savez que l'héritage, la spécificité et la dénomination sont parmi les choses les plus difficiles à gérer. Étant donné que tous les CSS sont globaux, à mesure que votre base de code grandit, il devient de plus en plus difficile d'empêcher les styles d'entrer en conflit les uns avec les autres et de provoquer des effets secondaires involontaires ! L'article suivant partagera avec vous quelques astuces de nommage CSS pour rendre notre code élégant et attrayant. J'espère qu'il sera utile à tout le monde !

Nomage CSS - BEM

Qu'est-ce que BEM

BEM est une spécification de nommage CSS. [Apprentissage recommandé : Tutoriel vidéo CSS]

BEM signifie "bloc, élément, modificateur".

Dans le sélecteur, les trois symboles suivants représentent des relations étendues :

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

Utilisation d'un exemple de comparaison BEM

Block

Comme dans l'exemple ci-dessous, li.item est un élément enfant de la liste

/* 常规写法和BEM写法相同 */
.list

Element

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
   <ul class="list">
    <li class="list__item">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常规写法 */ 
.list{} 
.list .item{} 

/* BEM写法 */ 
.list{} 
.list__item{}

Modifier (modifier)

Un "modificateur" peut être compris comme un statut spécifique d'un bloc ! Les avantages de BEM meilleurs

Parce que les noms courts raccourcissent le temps d'écriture, cela réduit également la taille des fichiers CSS ! Par exemple, cet exemple :

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
  <ul class="list">
    <li class="list__item_active">
      Pricing
    </li>
    <li class="list__item">Contact</li>
  </ul>

La dénomination combinée est meilleure que la dénomination unique

• /* 常规写法 */ 
  .list{} 
  .list .item{} 
  .list .item.active{} 
  
  /* BEM写法 */ 
  .list{} 
  .list__item{}
  .list__item_active{}

• La dénomination orientée attribut et la dénomination orientée sémantique

La dénomination orientée attribut signifie que la dénomination du sélecteur est spécifique. Le style CSS n'a rien à voir avec le projet, la page ou le module. Par exemple, le nom de classe flottant clair plus classique .clearfix:

//  推荐
.some-intro{...}

// 不推荐
.some-introduction{...}

La dénomination sémantique est nommée en fonction du contexte dans lequel se trouve l'élément d'application. Par exemple :

// 不建议
.header{...}

//推荐
.cs-header{...}

Les deux méthodes de dénomination ci-dessus ont leurs propres avantages et inconvénients : 1 Orienté vers les attributs

Avantages : CSS a un taux de réutilisation élevé, de meilleures performances, plug-and-play, pratique et rapide. , et extrêmement facile à développer car il permet de gagner beaucoup de temps en passant d'un fichier HTML à un fichier CSS. Inconvénients

 : En raison de son attribut unique, ses scénarios applicables sont limités. De plus, parce qu'il est facile à utiliser, il est facile d'être surutilisé, ce qui entraîne des coûts de maintenance plus élevés.

2. Orienté sémantique

L'avantage

est qu'il offre un large éventail de scénarios d'application, peut obtenir des effets de mise en page très exquis et est facile à développer

Inconvénient

 : le code est long et ; l'efficacité du développement est moyenne, car tout HTML doit être nommé même avec un espacement de 10 pixels. Cela conduit de nombreux développeurs soit à choisir d'utiliser le sélecteur de balises directement, soit à choisir un simple nom de classe, puis à définir le style via la relation parent-enfant, ce qui entraîne des problèmes de maintenance plus graves.

• Recommandations récapitulatives nommées
• Statut

.clearfix:after { content : ''; display: table; clear: both; }

Mise en page

• .header { background-color: #333; color: #fff; }
  .logo {font-size: 0; color : transparent;}

• Pièces universelles

前一个    prev
后一个    next
当前的    current

显示的    show
隐藏的    hide
打开的    open
关闭的    close

选中的    selected
有效的    active
默认的    default
反转的    toggle

禁用的    disabled
危险的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出错的    error

大型的    lg
小型的    sm
超小的    xs

Composants

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

Widgets sémantiques

" css" Choisissez le monde》2, https://www.cnblogs.com/qianxiaox/p/13816077.html

(Partage de vidéos d'apprentissage :

front-end web)

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!