前端命名規范是很重要的，在一個項目中代碼的組織結構要清晰易懂，同類型文件可以歸類到到相同的文件夾中，文件命名規則需要統一且命名要有意義，英文單詞可以寫縮寫。
掌握web前端開發，首先要了解什么是命名規范。命名規范在前端領域，涉及HTML，css，JavaScript，在HTML代碼所有的標簽名和屬性應該都為小寫，屬性值應該用引號括起來。元素的id和class都要按照規定命名，代碼縮進時要縮進，進行格式化，讓代碼美觀，有時可以給HTML代碼添加必要注解。
1 目錄規范
項目命名：projectname
全部采用小寫方式，以中劃線分割。
mall-managerment-system
目錄命名
全部采用小寫方式， 以中劃線分隔，有復數結構時，要采用復數命名法， 縮寫不用復數。
vue的項目中的component是中的組件目錄，使用kebab-case命名。
樣式文件夾：css
腳本文件夾：js
樣式類圖片文件夾：img
js、css、scss、html、png 文件命名
全部采用小寫方式，以中劃線分隔
2 圖片命名
1.命名順序
圖片命名建議以以下順序命名：
圖片業務（可選） +（mod-）圖片功能類別（必選）+ 圖片模塊名稱（可選） + 圖片精度（可選）
圖片業務：
pp-：拍拍
wx-：微信
sq-：手Q
jd-：京東商城
…
圖片功能類別：
mod-：是否公共，可選
icon：模塊類固化的圖標
logo：LOGO類
spr：單頁面各種元素合并集合
btn：按鈕
bg：可平鋪或者大背景
…
圖片模塊名稱：
goodslist：商品列表
goodsinfo：商品信息
userava tar：用戶頭像
…
圖片精度：
普清：@1x
Retina：@2x | @3x
…
3 HTML/CSS文件命名
確保文件命名總是以字母開頭而不是數字，且字母一律小寫，以下劃線連接且不帶其他標點符號，如：
<!-- HTML -->
jdc.html
jdc-list.html
jdc-detail.html
<!-- SASS -->
jdc.scss
jdc-list.scss
jdc-detail.scss
4 ClassName命名
ClassName的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用下劃線 “-” 連接
1.命名原則
基于姓氏命名法（繼承 + 外來），如下圖：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zMnskHSA-1651275618552)(http://labs.qiang.it/ppguide/img/standard-jiapu.png)]
2.模塊命名
全站公共模塊：以 mod- 開頭
<div class="mod-yours"></div>
業務公共模塊：以 業務名-mod- 開頭
<div class="paipai-mod-yours"></div>
3.常用命名推薦
注意：ad、banner、gg、guanggao 等有機會和廣告掛勾的字眠不建議直接用來做ClassName，因為有些瀏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名，因此
<div class="ad"></div>
這種廣告的英文或拼音類名不應該出現
另外，敏感不和諧字眼也不應該出現，如：
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
ClassName 含義
about 關于
account 賬戶
arrow 箭頭圖標
article 文章
aside 邊欄
audio 音頻
avatar 頭像
bg,background 背景
bar 欄（工具類）
branding 品牌化
crumb,breadcrumbs 面包屑
btn,button 按鈕
caption 標題，說明
category 分類
chart 圖表
clearfix 清除浮動
close 關閉
col,column 列
comment 評論
community 社區
container 容器
content 內容
copyright 版權
current 當前態，選中態
default 默認
description 描述
details 細節
disabled 不可用
entry 文章，博文
error 錯誤
even 偶數，常用于多行列表或表格中
fail 失?。ㄌ崾荆?/p>
feature 專題
fewer 收起
field 用于表單的輸入區域
figure 圖
filter 篩選
first 第一個，常用于列表中
footer 頁腳
forum 論壇
gallery 畫廊
group 模塊，清除浮動
header 頁頭
help 幫助
hide 隱藏
hightlight 高亮
home 主頁
icon 圖標
info,information 信息
last 最后一個，常用于列表中
links 鏈接
login 登錄
logout 退出
logo 標志
main 主體
menu 菜單
meta 作者、更新時間等信息欄，一般位于標題之下
module 模塊
more 更多（展開）
msg,message 消息
nav,navigation 導航
next 下一頁
nub 小塊
odd 奇數，常用于多行列表或表格中
off 鼠標離開
on 鼠標移過
output 輸出
pagination 分頁
pop,popup 彈窗
preview 預覽
previous 上一頁
primary 主要
progress 進度條
promotion 促銷
rcommd,recommendations 推薦
reg,register 注冊
save 保存
search 搜索
secondary 次要
section 區塊
selected 已選
share 分享
show 顯示
sidebar 邊欄，側欄
slide 幻燈片，圖片切換
sort 排序
sub 次級的，子級的
submit 提交
subscribe 訂閱
subtitle 副標題
success 成功（提示）
summary 摘要
tab 標簽頁
table 表格
txt,text 文本
thumbnail 縮略圖
time 時間
tips 提示
title 標題
video 視頻
wrap 容器，包，一般用于最外層
wrapper 容器，包，一般用于最外層