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 支持时的样式。
相关推荐
艾恩小灰灰20 分钟前
深入理解CSS中的`transform-origin`属性
前端·javascript·css·html·web开发·origin·transform
ohMyGod_12342 分钟前
Vue如何获取Dom
前端·javascript·vue.js
蓉妹妹1 小时前
React项目添加react-quill富文本编辑器,遇到的问题,比如hr标签丢失
前端·react.js·前端框架
码客前端1 小时前
css图片设为灰色
前端·javascript·css
艾恩小灰灰1 小时前
CSS中的`transform-style`属性:3D变换的秘密武器
前端·css·3d·css3·html5·web开发·transform-style
Captaincc1 小时前
AI coding的隐藏王者,悄悄融了2亿美金
前端·后端·ai编程
天天扭码1 小时前
一分钟解决一道算法题——矩阵置零
前端·算法·面试
抹茶san1 小时前
el-tabs频繁切换tab引发的数据渲染混淆
前端·vue.js·element
Captaincc2 小时前
关于MCP最值得看的一篇:MCP创造者聊MCP的起源、架构优势和未来
前端·mcp
小小小小宇2 小时前
记录老项目Vue 2使用VueUse
前端