CSS 类名的命名方法

CSS 类名该如何命名

我列了一个列表，用于决定 CSS 类名

---

设计方法对于 CSS 很重要，但我认为用什么词来命名也很重要。 也存在个体差异，即使使用通过搜索“单词名称英语”找到的单词，我也认为有时含义会略有不同。 有时会看到决定班级名称的列表，但我认为即使写了英文单词的读法，也很少有写出意思的。

一、形容词

修饰名词的性质或状态的词性。“的”和“那”

main- 主要的。
primary- 主要的。
secondary- 辅助/辅助。
tertiary- 第三。
quaternary- 第四个。
common- 常见的。
global- 全面的。
local- 当地的。
general- 一般的。
brand- 品牌。
site- 在网站上。

二、分类

可用作您网站上的页面或类别的名词

about- ~关于。
work- 工作/任务。
product- 产品。
service- 服务。
news- 新闻和状态。
event- 事件。
history- 历史。
archive- 保存、存储、记录。
concept- 一个想法，一个概念，一个想法。
recommend- 推荐/推荐。
table of contents- 目录。搜索
toc-Table of contents的缩写。
index- 索引/索引。
contact- 查询/通讯。
inquiry- 查询、问题、调查。
access- 运输。
shop- 店铺。
related- 相关的。
privacy- 个人信息的使用和保护政策。
faq-的同义词qanda，常见问题的缩写。
qanda- 问答的缩写。
input- 表单输入屏幕。
confirm- 表格确认屏幕。
finish- 表单完成屏幕。
search-result- 搜索结果屏幕。
cart- 临时保存要购买的物品的屏幕。
checkout- 购买已保存物品的屏幕。

三、元素

BEM 元素中使用的名词、形容词等

inner- 里面。
outer- 外部。
body- 主要部分。
head- 顶部。
foot- 下面。
heading- 标题/标题。
title- 标题/标题。
lead- 标题补充/文章摘要。
list- 列表/表格。
menu- 列表/表格。
item- 一个项目（例如表格或数据）。
unit- 1 台/1 套。
column- 列。
col-column的缩写。
text- 文本。
caption- 图像/图表的补充文本。
thumbnail- 缩小图像。
thumb-thumbnail的缩写。
avatar- 显示人脸的图像。
feature- 补充功能的图像。
tel- 电话号码。
address- 地址。
date- 日期。
time- 日期和时间。
category- 分类/类别。
cat-category的缩写。
tag- 标识符。
next- 下一个。
previous- 以前的。
prev-previous的缩写。
mask- 覆盖。
overlay- 覆盖/覆盖。
delimiter- 显示项目范围和边界的界面。
separator它是-的同义词delimiter，用于分离以免混合的目的。
dividerdelimiter用于按-的同义词进行分组的目的。

四、修饰符

BEM 修饰符中使用的名词、形容词等

success- 成功。
alert- 注意/警告。
attention- 考虑和考虑。
error- 错误/失败。
caution- 注意/警告。
warning- 警告/通知。
danger- 危险而惊人。
tiny- 很少。
xs同义词-tiny超小（小于小）。
small- 小的。
medium- 中间的。
large- 大的。
huge- 很大。
xl-Extra hugelarge 的同义词。
reverse- 翻动。
push- 向前推进;
pull- 拉向自己。
offset- 抵消/补偿；
left- 左边。
center - 中间。
right- 正确的。
top- 顶部。
middle- 中间。
bottom- 下面。
round- 圆角。
circle- 圆形的。

五、状态

表示状态的动词、形容词等

show- 展示。
hide- 隐藏。
open- 打开。
close- 关闭。
current- 当前的。
active- 积极主动；
disabled- 禁用。

六、文本

link- 锚文本。
label- 分类/项目名称。
tag- 标志/标识符。
badge- 表示余额的数字。
copyright- 版权声明。
tooltip- 在鼠标悬停时显示补充信息的界面。
button- 用于选择开/关的界面。
btn-button的缩写。