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 支持时的样式。
相关推荐
LaoZhangAI2 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
晓风伴月12 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam13 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe14 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端
zhangxingchao14 分钟前
Andrdoid中常用的JVM知识整理
前端
海底火旺14 分钟前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
76756047914 分钟前
useMemoize 方法源码解读与实战应用
前端·源码
青青奇犽15 分钟前
跨域问题全解析:七种方法轻松拿捏跨域
前端·javascript·面试
loooseFish16 分钟前
使用canvas模拟 美图AI画质消除中 选中区域上传(第一次正式使用canvas小记)
前端
林十一npc30 分钟前
MySQL索引与视图综合应用示例解析
android·前端·mysql