开发页面时，老是遇到起名问题，越想越头疼，严重影响开发进度，都是在想名字，现在做一下梳理，统一一下思想，希望以后能减少这块的痛苦。

命名规则

[功能名称]__[组成部分名称]--[样式名称]

思路

1. 拆分模块，将一个大的模块拆分成小的模块，小模块命名以模块特性命名，小模块命名先不急，主要是确定主模块的框架；
2. 写布局，剔除掉小模块后剩下的部分，这部分是主体布局，以一下方向性、布局性的单词来命名，如
   main-info模块里面上中下，main-info-item__header 顶部、main-info-item__body 主体、 main-info-item__footer 底部、main-info-item 公共样式使用
   main-info-item__header 内部布局，header-item__left 左侧、header-item__right 右侧
3. 完善布局样式，填充拆分的小模块，小模块以模块特性命名，与其他部分无关
   总结：有些样式是用来布局的，有些样式是用来划分模块的，区分开这两块后，我在命名时阻碍小了很多，再有思路在完善。

相关代码

设计图展示

第一步：分模块

第二步：写布局

    <div class="main-info"><div class="main-info-item main-info-item__header"><div class="header-item__left"><!-- logo 项 --></div><div class="header-item__right"><div class="header-title"><!-- 标题项 --></div><div class="header-content"><!-- 标签组项 --></div></div></div><div class="main-info-item main-info-item__body"><div class="info-item"><!-- 展示信息项 --></div><div class="info-item"></div><div class="info-item"></div></div><div class="main-info-item main-info-item__footer"><div class="phone-section"><!-- 电话信息项 --></div><div class="concat-section"><!-- 联系信息项 --></div></div></div>

第三步：完善布局样式，填充拆分的小模块

    <div class="main-info"><div class="main-info-item main-info-item__header"><div class="header-item__left"><!-- logo 项 --><div class="header-logo"></div></div><div class="header-item__right"><!-- 标题项 --><div class="header-title">企业名称</div><!-- 标签组项 --><div class="header-content"><span class="header-tag">一级品质</span><span class="header-tag">二级品质</span><span class="header-tag">三级品质</span><span class="header-tag">四级品质</span><span class="header-tag">五级品质</span><span class="header-tag">六级品质</span><span class="header-tag">七级品质</span></div></div></div><div class="main-info-item main-info-item__body"><!-- 展示信息项 --><div class="info-item"><div class="info-item__label">总体收入</div><div class="info-item__content">123,123,234,123.00</div></div><div class="info-item"><div class="info-item__label">总体收入</div><div class="info-item__content">123,123,234,123.00</div></div><div class="info-item"><div class="info-item__label">总体收入</div><div class="info-item__content">123,123,234,123.00</div></div></div><div class="main-info-item main-info-item__footer"><div class="phone-section"><div class="phone-section-item phone-section-item__icon">～</div><div class="phone-section-item phone-section-item__number">010-123123</div><div class="phone-section-item phone-section-item__total">电话10</div></div><div class="concat-section"><div class="concat-section-item active"><div class="concat-section-item__icon">#</div><div class="concat-section-item__label">主页</div></div><div class="concat-section-item"><div class="concat-section-item__icon">@</div><div class="concat-section-item__label">邮箱</div></div><div class="concat-section-item"><div class="concat-section-item__icon">&</div><div class="concat-section-item__label">地址</div></div></div></div></div>

<style>/* 主模块 */.main-info {padding: 8px;width: 400px;height: 300px;border: 1px solid #333;background-color: lightblue;font-size: 12px;/* 子模块公共样式 */.main-info-item {padding: 8px;margin-bottom: 8px;border: 1px solid #aaa;background-color: antiquewhite;}/* 头部模块 */.main-info-item__header {display: flex;flex-direction: row;/* 头部 左侧 */.header-item__left {flex: 0 0 50px;border: 1px solid lightcoral;/* logo */.header-logo {width: 50px;height: 50px;background-color: rgb(183, 17, 17);}}/* 头部 右侧 */.header-item__right {padding-left: 8px;flex: 1;/* 独立模块 标题 */.header-title {font-size: 16px;font-weight: 500;margin-bottom: 8px;}/* 独立模块 内容 */.header-content {display: flex;flex-wrap: wrap;/* 独立模块 标签 */.header-tag {background-color: rgb(48, 158, 158);padding: 2px 4px;margin-right: 4px;margin-bottom: 4px;color: #fff;border-radius: 4px;}}}}/* 主体模块 */.main-info-item__body {display: flex;justify-content: space-between;align-items: center;/* 重复小模块 */.info-item {flex: 0 0 26%;text-align: center;/* 重复小模块 文案*/.info-item__lable {font-weight: 500;margin-bottom: 2px;}/* 重复小模块 内容 */.info-item__content {color: #9b9b9b;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}/* 底部模块 */.main-info-item__footer {display: flex;justify-content: space-between;align-items: center;/* 电话信息模块 */.phone-section {display: flex;/* 公共样式 */.phone-section-item {font-weight: 500;margin-right: 4px;}/* 独立模块 */.phone-section-item__icon {color: cornflowerblue;}/* 独立模块 */.phone-section-item__number {color: cornflowerblue;}/* 独立模块 */.phone-section-item__total {color: indianred;}}/* 联系信息模块 */.concat-section {display: flex;/* 公共样式 */.concat-section-item {display: flex;align-items: center;padding: 4px 8px;background: #eee;color: #888;border-radius: 4px;margin-left: 4px;/* 小模块选中状态 */&.active {color: blue;}/* 小模块的图标 */.concat-section-item__icon {margin-right: 4px;}/* 小模块的文案 */.concat-section-item__label {}}}}}
</style>