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 支持时的样式。
相关推荐
程序员爱钓鱼13 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路34 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴42 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js