css 编写注意-1-命名约定
编写按照可维护性、性能和可读性规则:
1.代码组织与结构
- 层次清晰:使用模块化的结构,将样式分块组织。
- 命名规范:采用统一的命名规则(如 BEM、SMACSS)以增强可读性。
/* BEM 命名示例 */ .block {} /* 块 */ .block__element {} /* 块的元素 */ .block--modifier {} /* 块的修饰符 */
- 注释清晰:对复杂的样式块添加注释,方便团队协作。
/* Header 样式 */ .header { background-color: #f8f9fa; }
2.命名约定
- BEM 命名法(Block-Element-Modifier)
- Block:表示组件的名称。
- Element:表示组件内部的子部分。
- Modifier:表示组件或子部分的不同状态或变体。
.menu {} /* Block */ .menu__item {} /* Element */ .menu__item--active {} /* Modifier */
- SMACSS 命名法
- Base:基础样式(HTML 元素的默认样式)
h1, p { margin: 0; padding: 0; }
-
Layout:页面布局相关的样式
.header {} .footer {}
-
Module:页面的功能模块
.card {} .button {}
-
State:描述模块的状态
.is-active {} .is-hidden {}
-
Theme:主题样式。
.theme-dark {} .theme-light {}
- Base:基础样式(HTML 元素的默认样式)
-
常见组件命名
-
布局相关
.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 支持时的样式。
-