css 编写注意-1-命名约定

编写按照可维护性、性能和可读性规则：

1.代码组织与结构​​​​​​​

• 层次清晰：使用模块化的结构，将样式分块组织。

• 命名规范 ：采用统一的命名规则（如 BEM、SMACSS）以增强可读性。

  /* BEM 命名示例 */
  .block {}         /* 块 */
  .block__element {} /* 块的元素 */
  .block--modifier {} /* 块的修饰符 */

• 注释清晰 ：对复杂的样式块添加注释，方便团队协作。

  /* Header 样式 */
  .header {
      background-color: #f8f9fa;
  }

​​​​​​​​​​​​​​2.命名约定

1. BEM 命名法（Block-Element-Modifier）

   • Block：表示组件的名称。

   • Element：表示组件内部的子部分。

   • Modifier ：表示组件或子部分的不同状态或变体。

     .menu {}               /* Block */
     .menu__item {}         /* Element */
     .menu__item--active {} /* Modifier */

2. SMACSS 命名法

   • Base ：基础样式（HTML 元素的默认样式）

     h1, p {
         margin: 0;
         padding: 0;
     }

   • Layout：页面布局相关的样式

     .header {}
     .footer {}

   • Module：页面的功能模块

     .card {}
     .button {}

   • State：描述模块的状态

     .is-active {}
     .is-hidden {}

   • Theme：主题样式。

     .theme-dark {}
     .theme-light {}

3. 常见组件命名

   • ​​​​​​​布局相关

     • .container：容器。
     • .row：行。
     • .col：列。
     • .grid：网格布局。
     • .header：头部。
     • .footer：底部。
     • .sidebar：侧边栏。
     • .main：主要内容区域。

   • 导航相关

     • .nav：导航栏。
     • .nav__item：导航项。
     • .nav__link：导航链接。
     • .breadcrumb：面包屑导航。

   按钮相关

   • .btn：按钮。
   • .btn-primary：主要按钮。
   • .btn-secondary：次要按钮。
   • .btn--disabled：禁用状态按钮。

   表单相关

   • .form：表单。
   • .form__group：表单组。
   • .form__label：表单标签。
   • .form__input：表单输入框。
   • .form__error：表单错误提示。

   通用状态

   • .is-active：活动状态。
   • .is-disabled：禁用状态。
   • .is-hidden：隐藏状态。
   • .has-error：错误状态。
   • .no-js：无 JavaScript 支持时的样式。