初級的前端工作人員， 剛?cè)肼毜臅r(shí)候，可能在學(xué)習(xí)前端技術(shù)，寫代碼不是否那么的規(guī)范，而在工作中，命名的規(guī)范的尤為重要，它直接與你的代碼質(zhì)量掛鉤。網(wǎng)上也受很多，但比較雜亂，在加上每年的命名都會(huì)發(fā)生一變化。

另外，本文也對設(shè)計(jì)來說也很重要。

頁頭：header 如：#header{屬性:屬性值;}或.header{屬性:屬性值;},也許你需要了解class與id區(qū)別及用法

登錄條：loginBar 標(biāo)志：logo 側(cè)欄：sideBar

廣告：banner 導(dǎo)航：nav 子導(dǎo)航：subNav

菜單：menu 子菜單：subMenu 搜索：search

滾動(dòng)：scroll 頁面主體：main 內(nèi)容：content

標(biāo)簽頁：tab 文章列表：list 提示信息：msg

小技巧：tips 欄目標(biāo)題：title 加入：joinus

指南：guild 服務(wù)：service 熱點(diǎn)：hot

新聞：news 下載：download 注冊：regsiter

狀態(tài)：status 按鈕：btn 投票：vote

合作伙伴：partner 友情鏈接：friendLink 頁腳：footer

版權(quán)：copyRight

常用配合標(biāo)簽div、h1、h2、h3、h4、span、em、b、strong、font、u

1.CSS的 ID 的命名 也許你需要了解class與Id區(qū)別

外　套：wrap 主導(dǎo)航：mainNav 子導(dǎo)航：subnav

頁　腳：footer 整個(gè)頁面：content 頁　眉：header

版 權(quán)：copyRight 商　標(biāo)：label 標(biāo)　題：title

主導(dǎo)航：mainNav(globalNav) 頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar 左導(dǎo)航：leftsideBar 右導(dǎo)航：rightsideBar

旗　志：logo 標(biāo)　語：banner 菜單內(nèi)容1： menu1Content

菜單容量：menuContainer 子菜單：submenu

邊導(dǎo)航圖標(biāo)：sidebarIcon 注釋：note

面包屑：breadCrumb(即頁面所處位置導(dǎo)航提示)

容器：container 內(nèi)容：content 搜索：search

登陸：login 功能區(qū)：shop(如購物車，收銀臺(tái))

當(dāng)前：current

DIV+CSS命名小結(jié)：無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名，同時(shí)考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。

通常我們最常用主要命名有：

wrap（外套、最外層）、header（頁眉、頭部）、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1h2h3h4標(biāo)簽使用)

、content (內(nèi)容區(qū))、footer(頁腳、底部)、logo（標(biāo)志、可以配合h1標(biāo)簽使用）、banner（廣告條，一般在頂部）、copyRight（版權(quán)）。其它可根據(jù)自己需要選擇性使用。

DIVCSS5建議：主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名。

2.CSS樣式文件命名如下

主要的 master.css

布局，版面 layout.css

專欄 columns.css

文字 font.css

打印樣式 print.css

主題 themes.css

也許你需要了解一下css引用到html方法

你熟練掌握命名的規(guī)范，這對你在網(wǎng)站開發(fā)中團(tuán)隊(duì)合作是相當(dāng)有益的，也會(huì)大大的提高你的書寫代碼速率。

切圖網(wǎng)（qietu.com）是一家專門從事web前端開發(fā)的公司，專注we前端開發(fā)，關(guān)注用戶體驗(yàn)，歡迎訂閱微信公眾號：qietuwang

面是小編自己碼的代碼，如有錯(cuò)誤的地方敬請指出。剩余代碼在下面鏈接。

//登入窗口顯示位置

function openCart() {

var t=$(window).width();

0==$(".shopping_all").length ? t > 768 ? $("#shop_cart").animate({

right: 35

}, 300) : $("#shop_cart").animate({

right: 0

}, 300) : t > 980 ? $("#shop_cart").animate({

right: 35

}, 300) : $("#shop_cart").animate({

right: 0

}, 300),

$(".compare_btn").hasClass("open") && closeCompare(),

$(".shop_cart").addClass("bg")

}

//鼠標(biāo)移過展開側(cè)邊導(dǎo)航欄

function openBar() {

toolbar.hasClass("open") || (toolbar.addClass("open"),

$("#shop_cart .lazyload").removeClass("hidden").find("img").trigger("appear"),

$(".global_toolbar").removeClass("default"),

$(".toolbar_btn").css({

top: "50%",

marginTop: -$(".toolbar_btn").height() / 2

})),

$(".global_toolbar").removeClass("opacity"),

$(".toolbar_btn").removeClass("default")

}

//鼠標(biāo)移過關(guān)閉側(cè)邊導(dǎo)航欄

function closeBar() {

$(".toolbar_btn a").removeClass("current"),

toolbar.removeClass("open"),

$(".toolbar_btn").removeClass("default")

}

function openCartMeiu() {

var t=$(window).width();

$(".bar_cart").hasClass("current") || $(".bar_cart").addClass("current").siblings("a").removeClass("current"),

$(".global_toolbar").hasClass("open") ? closeBar() : openBar(),

t > 768 ? $(".bar_cart").hasClass("current") || $(".bar_cart").trigger("click") : openBar()

}

function isChecked() {

$("#shop_cart .go_btn").removeClass("disable"),

$("#shop_cart .go_btn").attr("href", $("#shop_cart .go_btn").attr("data-url"));

for(var t="", e=document.getElementsByName("checkbox_c_Name"), i=0; i < e.length; i++) {

var r=$(e[i]).attr("data-url");

if(1==e[i].checked) {

if("undefined" !=r) {

var n=r.split("|"),

o=$(e[i]).siblings(".amount_btn").find("input").val();

t +="" !=t ? "|" + n[1] + "," + o + "," + n[0] + ",1" : n[1] + "," + o + "," + n[0] + ",1"

}

} else if("undefined" !=r) {

var n=r.split("|"),

o=$(e[i]).siblings(".amount_btn").find("input").val();

t +="" !=t ? "|" + n[1] + "," + o + "," + n[0] + ",0" : n[1] + "," + o + "," + n[0] + ",0"

}

}

var s=$("#vHidelink").val() + encodeURIComponent($("#vHideToken").val());

s=(s=(s=s.replace("en-GB", "uk")).replace("ru-RU", "ru")).replace("test120.huawei.com/zh", "test120.huawei.com/zh/EBG/Home").replace("test120.huawei.com/cn", "test120.huawei.com/zh/EBG/Home");

var a={

type: 23,

vgUserId: $("#hidevUserName").val(),

UpdateString: t

};

$.ajax({

url: s,

type: "POST",

data: a,

success: function(t) {},

error: function(t) {}

}),

CheckedAll()

}

由于代碼量的問題，小編把完整Js代碼放在下面鏈接里了，撮一撮領(lǐng)取剩余代碼哦。