項目中文件名字
1：符合應用場景
2：一律使用小寫英文字母，統一要求；英文，禁止中文拼音。
3：命名原則：使團隊成員可以看懂自己代碼；自己也方便查找並修改
xxx.html文件的命名
1：主頁面 index.html
2: 子頁面：首頁：homme.html 我的 mine.html 關於我們:aboutus.html 信息反饋 feedback
產品 product 購物 shop 計數器 count
3: 一級頁面: 登錄：login.html login.css login.js
注冊： resign.html
用戶管理：userManage.html
圖片的命名規則
1：圖片文件的后綴 xxx.png xx.jpg xxxx.gif xxx.bmp
圖片的名稱分為頭尾兩例如：廣告、標志、菜單、按鈕部分，用下划線隔開，頭部分表示此圖片的大類
大類例如：廣告、標志、菜單、按鈕
放在頁面頂部的【廣告】 【banner】
企業商標 【標志】性的圖片 【logo】
在頁面上某一個位置連續出現，性質相同的鏈接欄目的圖片我們取名： 【menu】
裝飾用的照片我們取名： 【pic】
【不帶鏈接】表示【標題的圖片】我們取名： 【title】
范 例 ： banner_ sohu.gif
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_iphone.jpg
pic_TV.jpg
…
文件夾存放規范
- www 或者 web 存放前端代碼文件
- css 存放 xxx.css 文件
- src 存放 xxx。js文件
- views 或者 pages 存放 xxx.html 或者 xxx.vue 文件
- assetes 存放所有【資源文件】
- images 存放圖片文件
- library 存放【第三方庫】文件
- media 存放媒體文件
- build 存放經過【自動化構建工】或者【自動化打包工具】處理后的文件
- serve 存放服務端代碼文件
- api 存放【接口文件】
- modules 存放 【數據庫操作】文件
css 書寫規范 性能優化方案
1：禁止class 與id 重名
2：書寫順序：布局定位屬性–>自身屬性–>文本屬性–>其他屬性
.box{
/* 布局定位類 */
float:left;
/* 自身屬性 */
width:100px;
height:100px;
/* 文本類 */
text-align:left;
/* 其他屬性 */
background:red;
}
CSS優化
1: 全局考慮樣式；提你高代碼重復使用
2：多使用兼容性好的樣式 css2
3: 減少使用功能position absolute fixed 屬性;
4: 重要圖片 加【alt】 重要標簽加【title屬性】
5：合理使用選擇器；盡量少使用偽類選擇器 nth:type-of-child()
6: 不到萬不得已；不要用 !important 權重最高
8：盡量使用復合屬性 magin border
css 命名規范
頁面結構
1 容器: container/wrap 2 整體寬度：wrapper 3 頁頭：header 4 內容：content 5 側欄：sidebar 6 欄目：column 7 中間內容：center
導航
1 導航：nav 2 主導航：mainNav /gloabNav main_nav/gloab_nav main-nav/gloab-nav 3 子導航：subNav sub_nav sub-nav 4 頂部導航 topNav top_nav top-nav 5 邊部導航 sideBar side_nav side-nav 6 左邊導航：leftSideBar left_side_nav left-side-nav 7 右邊導航：rightSideBar 8 邊導航圖片 sideBarIcon 9 菜單 menu 10 子菜單 subMenu sub_menu sub-menu 11 12 標志：logo 13 登陸：login 14 登錄條：loginbar 15 注冊：regsiter 16 產品：products 17 產品價格：products_prices 18 產品評論：products_review 19 編輯評論：editor_review 20 最新產品：news_release 21 最新產品：news_release 22 廣告/標語：banner 23 摘要:summary 24 生產商：publisher 25 縮略圖：screenshot 26 常見問題：faqs 27 關鍵詞：keyword 28 博客：blog 29 論壇：forum 30 搜索：search 31 搜索輸入框：search_input 32 搜索輸出：search_output 33 搜索結果：search_results 34 加入我們：joinus 35 狀態：status 36 按鈕：btn 37 滾動：scroll 38 標簽頁：tab 39 文章列表：list 40 提示信息：msg/message 41 當前的: current 42 小技巧：tips 43 皮膚：skin 44 充值：pay 45 活動：activities 46 推廣：promotion 47 公告：announcement 48 排行：ranking 49 公司簡介：company_profile 50 公司設備：equipment 51 公司榮譽：glories 52 企業文化：culture 53 企業規模：scale 54 營銷網絡：sales_network 55 組織機構：organization 56 技術力量：technology 57 分支機構：branches 58 企業資質：enterprise_qualification 59 公司實力：strength_strength 60 經營理念：operation_principle 61 經理致辭：manager_oration 62 發展歷程：development_history 63 工程案例：engineering_projects 64 分類瀏覽：browse_by_category 65 應用領域：application_fields 66 人力資源：human_resource_hr 67 領導致辭： leader_oration 68 客戶留言：customer_message 69 客戶服務：customer_service 70 您的要求：your_requirements 71 銷售信息：sales_information 72 招商：enterprise_establishing 73 教育培訓：education_training 74 在線交流：online_communication 75 質量認證：quality_certification 76 合作加盟：joinIn_cooperation 77 產品描述：products_description 78 業務范圍：business_scope 79 產品銷售：sales_sales 80 聯系我們：contact_us 81 信息發布：information 82 83 返回首頁：homepage 84 產品定購：order 85 電子商務：e_business 86 版權所有：copy _right 87 友情連結：hot_link 88 行業新聞：trade_news 89 行業動態：trends 90 郵編：postal_code_zipcode 91 新聞動態：news_trends 92 公司名稱：company_name 93 銷售熱線：sales_hotline 94 聯系人：contact_person 95 建設中：in_construction 96 證書：certificate 97 地址：add 98 電話：tel 99 傳真：fax 100 產品名稱：product_name 101 產品說明：description 102 價格：price 103 品牌：brand 104 規格：specification 105 尺寸：size 106 生產廠家：manufacuturer 107 型號：model 108 產品標號：item_no 109 技術指標：technique_data 110 產品描述：description 111 產地：production_place 112 用途：application 113 論壇：forum 114 在線訂購：on_line_order 115 招標：bidInviting 116 綜述：general 117 業績：achievements 118 大事：great_event 119 動態：trends 120 服務：service 121 投資：investment 122 行業：industry 123 規划：programming 124 環境：environment 125 發送：delivery 126 提交：submit 127 重寫：reset 128 社區：community 129 業務：business 130 在線調查：online_inquiry 131 下載中心：download 132 意見反饋：feedback 133 常見問題：faq 134 中心概況：general_profile 135 游樂園：amusement_park 136 專題報道：special_report 137 圖標: icon 138 注釋：note 139 指南：guild 140 服務：service 141 熱點：hot 142 新聞：news 143 下載：download 144 投票：vote 145 商標：label/branding 146 當前位置：breadcrumb/loc 147 購物車：shop 148 標簽：tag 149 信譽：siteinfo_credits 150 網站信息：siteinfo 151 法律聲明：siteinfo_legal 152 合作伙伴：partner 153 友情鏈接：friendlink 154 版權：copyright
————————————————
版權聲明：本文為CSDN博主「wgaoxian」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/wgaoxian/article/details/102708937