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 支持时的样式。

原文地址：https://blog.csdn.net/print_2022/article/details/144690772

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！