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

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

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

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

  • 命名规范 :采用统一的命名规则(如 BEM、SMACSS)以增强可读性。

    css 复制代码
    /* BEM 命名示例 */
    .block {}         /* 块 */
    .block__element {} /* 块的元素 */
    .block--modifier {} /* 块的修饰符 */
  • 注释清晰 :对复杂的样式块添加注释,方便团队协作。

    css 复制代码
    /* Header 样式 */
    .header {
        background-color: #f8f9fa;
    }

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

  1. BEM 命名法(Block-Element-Modifier)

    • Block:表示组件的名称。

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

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

      css 复制代码
      .menu {}               /* Block */
      .menu__item {}         /* Element */
      .menu__item--active {} /* Modifier */
  2. SMACSS 命名法

    • Base :基础样式(HTML 元素的默认样式)

      css 复制代码
      h1, p {
          margin: 0;
          padding: 0;
      }
    • Layout:页面布局相关的样式

      css 复制代码
      .header {}
      .footer {}
    • Module:页面的功能模块

      css 复制代码
      .card {}
      .button {}
    • State:描述模块的状态

      css 复制代码
      .is-active {}
      .is-hidden {}
    • Theme:主题样式。

      css 复制代码
      .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 支持时的样式。
相关推荐
蔗理苦35 分钟前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro1 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹1 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱2 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript