開發頁面時，老是遇到起名問題，越想越頭疼，嚴重影響開發進度，都是在想名字，現在做一下梳理，統一一下思想，希望以后能減少這塊的痛苦。

命名規則

[功能名稱]__[組成部分名稱]--[樣式名稱]

思路

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>