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 支持时的样式。
相关推荐
前端工作日常10 分钟前
前端基建的幸存者偏差
前端·vue.js·前端框架
Electrolux18 分钟前
你敢信,不会点算法没准你赛尔号都玩不明白
前端·后端·算法
a cool fish(无名)1 小时前
rust-参考与借用
java·前端·rust
只有干货2 小时前
前端传字符串 后端比较date类型字段
前端
波波鱼દ ᵕ̈ ૩2 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
climber11213 小时前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo6173 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦3 小时前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐3 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo6173 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6