整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本命名規(guī)范
index.css： 一般用于首頁建立樣式
head.css： 頭部樣式，當(dāng)多個(gè)頁面頭部設(shè)計(jì)風(fēng)格相同時(shí)使用。
base.css： 共用樣式。
style.css：獨(dú)立頁面所使用的樣式文件。
global.css：頁面樣式基礎(chǔ)，全局公用樣式，頁面中必須包含。
layout.css：布局、版面樣式，公用類型較多時(shí)使用，一般用在首頁級頁面和產(chǎn)品類頁面中
module.css：模塊，用于產(chǎn)品類頁，也可與其它樣式配合使用。
master.css：主要的樣式表
columns.css：專欄樣式
themes.css：主體樣式
forms.css：表單樣式
mend.css：補(bǔ)丁，基于以上樣式進(jìn)行的私有化修補(bǔ)。
頁面結(jié)構(gòu)命名：
page：代表整個(gè)頁面，用于最外層。
wrap：外套，將所有元素包在一起的一個(gè)外圍包，用于最外層
wrapper：頁面外圍控制整體布局寬度，用于最外層
container：一個(gè)整體容器，用于最外層
head，header：頁頭區(qū)域，用于頭部
nav: 導(dǎo)航條
content：內(nèi)容，網(wǎng)站中最重要的內(nèi)容區(qū)域，用于網(wǎng)頁中部主體
main：網(wǎng)站中的主要區(qū)域（表示最重要的一塊位置），用于中部主體內(nèi)容
column：欄目
sidebar：側(cè)欄
foot，footer：頁尾、頁腳。網(wǎng)站一些附加信息放置區(qū)域，（或命名為 copyright）用于底部
導(dǎo)航命名：
nav, navbar, navigation, nav-wrapper：導(dǎo)航條或?qū)Ш桨頇M向?qū)Ш?/p>
topnav：頂部導(dǎo)航
mainbav：主導(dǎo)航
subnav：子導(dǎo)航
sidebar：邊導(dǎo)航
leftsidebar 或 sidebar_a：左導(dǎo)航
rightsidebar 或 sidebar_b：右導(dǎo)航
title：標(biāo)題
summary：摘要
menu：菜單，區(qū)域包含一般的鏈接和菜單
submenu：子菜單
drop：下拉
dorpmenu：下拉菜單
links：鏈接菜單
功能命名：
logo：標(biāo)記網(wǎng)站logo標(biāo)志
banner：標(biāo)語、廣告條、頂部廣告條
login：登陸，（例如登錄表單：form-login）
loginbar：登錄條
register：注冊
tool, toolbar：工具條
search：搜索
searchbar：搜索條
searchlnput：搜索輸入框
shop：功能區(qū)，表示現(xiàn)在的
icon：小圖標(biāo)
label：商標(biāo)
homepage：首頁
subpage：二級頁面子頁面
hot：熱門熱點(diǎn)
list：文章列表，（例如：新聞列表：list-news）
scroll：滾動(dòng)
tab：標(biāo)簽
sitemap：網(wǎng)站地圖
msg 或 message：提示信息
current：當(dāng)前的
joinus：加入
status：狀態(tài)
btn：按鈕，（例如：搜索按鈕可寫成：btn-search）
tips：小技巧
note：注釋
guild：指南
arr, arrow：標(biāo)記箭頭
service：服務(wù)
breadcrumb：(即頁面所處位置導(dǎo)航提示）
download：下載
vote：投票
siteinfo：網(wǎng)站信息
partner：合作伙伴
link, friendlink：友情鏈接
copyright：版權(quán)信息
siteinfoCredits：信譽(yù)
siteinfoLegal：法律信息
【CSDN 編者按】從1995年開始，本文作者Dr.Axel Rauschmayer就專門從事JavaScript和Web開發(fā)，已經(jīng)有30多年了。2010年，他獲得慕尼黑大學(xué)信息學(xué)博士學(xué)位。自2011年以來，他一直在2ality.com寫博客，并寫了幾本關(guān)于JavaScript的書，比如《JavaScript for impatient programmers》、《Deep JavaScript: Theory and techniques》等。今天這篇文章就來自于他的博客，介紹了在JavaScript命名沖突時(shí)，現(xiàn)有代碼如何強(qiáng)制對提議的功能進(jìn)行重命名。
不斷發(fā)展的JavaScript：不要破壞web!
JavaScript的一個(gè)發(fā)展核心原則就是"不要破壞Web"：在將新特性添加到語言中后，所有現(xiàn)有代碼都必須能夠繼續(xù)運(yùn)行。
這樣有一個(gè)壞處，就是不能從語言中刪除現(xiàn)有的quirks。但這樣做益處多多，比如舊的代碼可以繼續(xù)運(yùn)行，而且升級到新的ECMAScript版本很簡便等等。
在為新特征（如方法名稱）選擇名稱時(shí)，需要進(jìn)行一個(gè)重要的測試，即在瀏覽器的nightly版本（早期預(yù)發(fā)布版本）中添加該特征，并檢查是否有任何網(wǎng)站出現(xiàn)錯(cuò)誤。
接下來將介紹過去案例中的的四個(gè)沖突源，當(dāng)產(chǎn)生這四種沖突時(shí)，就必須重命名特征。
沖突源1：向內(nèi)置原型添加方法
在JavaScript中，我們可以通過改變其原型來為內(nèi)置值添加方法：
// Creating a new Array methodArray.prototype.myArrayMethod = function () {return this.join('-');};assert.equal(['a', 'b', 'c'].myArrayMethod(), 'a-b-c');// Creating a new string methodString.prototype.myStringMethod = function () {return '?' + this + '!';};assert.equal('Hola'.myStringMethod(), '?Hola!');
神奇的是，語言可以通過這種方式改變。這種運(yùn)行時(shí)的修改被稱為猴子補(bǔ)丁（monkey patch）。
什么是猴子補(bǔ)丁？
如果我們給內(nèi)置原型添加方法，我們就是在運(yùn)行時(shí)修改一個(gè)軟件系統(tǒng)。這樣的修改被稱為猴子補(bǔ)丁。簡單來說，對其含義有兩種可能的解釋。
這個(gè)叫法起源于Zope框架，人們在修正Zope的Bug的時(shí)候經(jīng)常在程序后面追加更新部分，這些被稱作是“雜牌軍補(bǔ)丁(guerilla patch)”，后來guerilla就漸漸的寫成了gorllia((猩猩)，再后來就寫了monkey(猴子)，所以猴子補(bǔ)丁的叫法是這么莫名其妙的得來的。
另一種說法是，它指的是搞亂（monkeying about）代碼。
反對改變內(nèi)置原型的原因
對任何類型的全局命名，都會(huì)存在名稱沖突的風(fēng)險(xiǎn)。如果有解決沖突的機(jī)制，就能規(guī)避風(fēng)險(xiǎn)。例如：
全局模塊是通過裸模塊指定器或URLs來識別的。前者之間的名稱沖突可以通過npm注冊表來解決。后者之間的名稱沖突可以通過域名注冊處來解決。
可以通過將符號添加到JavaScript中，以避免方法之間的名稱沖突。例如，任何對象都可以通過添加一個(gè)鍵為.NET的方法而成為可迭代的。由于每個(gè)符號都是唯一的，所以這個(gè)鍵永遠(yuǎn)不會(huì)與任何其他屬性鍵.Symbol.iterator發(fā)生沖突。
然而，帶有字符串鍵的方法會(huì)導(dǎo)致名稱沖突：
不同的庫可能會(huì)對他們添加到.Array.prototype的方法使用相同的名字。
如果一個(gè)名字已經(jīng)被某個(gè)庫使用了，那么這個(gè)名稱就不能用于命名JavaScript標(biāo)準(zhǔn)庫的一個(gè)新特性。
具有諷刺意味的是，謹(jǐn)慎地添加一個(gè)方法可能會(huì)適得其反：
if (!Array.prototype.libraryMethod) {Array.prototype.libraryMethod = function () { /*...*/ };}
我們會(huì)檢查一個(gè)方法是否已經(jīng)存在。如果沒有，我們就添加它。
如果我們要實(shí)現(xiàn)一個(gè)polyfill（模擬原生Web平臺功能），將新的JavaScript方法添加到不支持它的引擎中，那么這個(gè)技術(shù)就能發(fā)揮作用。(順便說一下，這是修改內(nèi)置原型的一個(gè)合法用例。也許是唯一的一個(gè)）。
然而，如果我們對一個(gè)普通庫的方法使用這種技術(shù)，然后JavaScript獲取具有相同名稱的方法，那么這兩種實(shí)現(xiàn)的工作方式就不一樣了，并且使用庫方法的所有代碼在使用內(nèi)置方法時(shí)都會(huì)中斷。
必須更改名稱的原型方法示例
ES6的方法最初是與JavaScript框架MooTools（錯(cuò)誤報(bào)告）.String.prototype.includes().contains()全局添加的方法相沖突。
ES2016的方法最初是與MooTools(錯(cuò)誤報(bào)告 ).Array.prototype.includes().contains()添加的方法相沖突。
ES2019的方法最初是和MooTools(錯(cuò)誤報(bào)告， 博客文章).Array.prototype.flat().flatten()相沖突。
修改內(nèi)置原型并不總是糟糕的
你可能會(huì)對MooTools的創(chuàng)建者的粗心大意感到疑惑。但是，向內(nèi)置原型添加方法并不總是糟糕的。在ES3（1999年12月）和ES5（2009年12月）之間，JavaScript是一種停滯不前的語言。MooTools和Prototype等框架改進(jìn)了它。這些方法的缺點(diǎn)只有在JavaScript的標(biāo)準(zhǔn)庫再次增加之后才會(huì)凸顯出來。
ES2022的方法最初是.NET的。因?yàn)橐韵聨鞕z查屬性以確定對象是否是一個(gè)HTML集合（而不是一個(gè)數(shù)組），所以它必須被重新命名：Magic360、YUI 2、YUI 3.Array.prototype.at().item().item
自ES2020以來，我們可以通過globalThis訪問全局對象。Node.js一直使用該名稱來實(shí)現(xiàn)此目的。最初的計(jì)劃是為所有平臺標(biāo)準(zhǔn)化該名稱.global
然而，以下模式經(jīng)常被用來確定當(dāng)前平臺：
if (typeof global !== 'undefined') {// We are not running on Node.js}
如果瀏覽器也有一個(gè)名為.global的全局變量，這種模式（以及類似的模式）就會(huì)失效。因此，標(biāo)準(zhǔn)化的名稱被改為.globalglobalThis。
with語句with語句長期以來，人們一直不鼓勵(lì)使用JavaScript的with語句，甚至在ES5中引入的嚴(yán)格模式中也被定為非法。在其他地方，嚴(yán)格模式在ECMAScript模塊中是活躍的。
該語句將一個(gè)對象的屬性變成局部變量：with
cons t myObject = {ownProperty: 'yes',};with (myObject) {// Own properties become local variablesassert.equal(ownProperty, 'yes');// Inherited properties become local variables, tooassert.equal(typeof toString, 'function');}
由with語句引起的沖突
框架Ext.js使用的代碼與下面的片段有些相似點(diǎn)：
function myFunc(values) {with (values) {console.log(values); // (A)}}myFunc([]); // (B)
當(dāng)ES6方法被添加到JavaScript中時(shí)，如果用Array（B行）來調(diào)用它，它就會(huì)失效。該語句將Array的所有屬性變成了局部變量。其中一個(gè)是繼承的屬性。因此，A行中的語句已記錄，不再是參數(shù)（錯(cuò)誤報(bào)告1，錯(cuò)誤報(bào)告2）
Array.prototype.values()myFunc()withvalues.valuesArray.prototype.valuesvalue
Unscopables：防止with導(dǎo)致的沖突
公共符號Symbol.unscopables允許對象隱藏語句中的某些屬性。它只在標(biāo)準(zhǔn)庫中使用一次，對于Array.prototype：with
assert.deepEqual(Array.prototype[Symbol.unscopables],{__proto__: ,at: true,copyWithin: true,entries: true,fill: true,find: true,findIndex: true,flat: true,flatMap: true,includes: true,keys: true,values: true,});
以上提出了JavaScript結(jié)構(gòu)與現(xiàn)有代碼發(fā)生名稱沖突的四種方式：
向內(nèi)置原型添加方法
檢查屬性是否存在
檢查全局變量是否存在
創(chuàng)建局部變量with
沖突的某些來源很難預(yù)測，但存在以下一些一般規(guī)則：
不要更改全局?jǐn)?shù)據(jù)。
避免檢查是否存在全局?jǐn)?shù)據(jù)。
請注意，內(nèi)置值將來可能會(huì)獲得其他屬性（自己的或繼承的屬性）。
對于庫來說，為JavaScript值提供功能的最安全方法是通過函數(shù)。如果JavaScript得到一個(gè)pipe operator，我們也可以像方法一樣使用它們。
參考資料：https://2ality.com/2022/03/naming-conflicts.html
《新程序員001-004》全面上市，對話世界級大師，報(bào)道中國IT行業(yè)創(chuàng)新創(chuàng)造
示：點(diǎn)擊上方"藍(lán)色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信
網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊(duì)合作時(shí)候可以提供合作制作效率，具體DIV CSS命名規(guī)則CSS命名大全內(nèi)容篇。
常用DIV+CSS命名大全集合，即CSS命名規(guī)則
我們開發(fā)CSS+DIV網(wǎng)頁（Xhtml）時(shí)候,比較困惑和糾結(jié)的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號("")括起來，且一定要有值如 class="helloweb" , id="helloweb"
3、每個(gè)標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整
4、空元素要有結(jié)束的tag或于開始的tag后加上"/"
5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如：style、font、bgColor、border 等
6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7、給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記 id
8、給圖片加上alt 標(biāo)簽，優(yōu)點(diǎn)是在于在圖片發(fā)生錯(cuò)誤時(shí)，alt 可以體現(xiàn)給用戶
9、盡量使用英文命名原則
10、盡量不縮寫，除非一看就明白的單詞
下面給大家介紹常見CSS命名和DIV CSS命名方法。
外套 wrap ------------------用于最外層
頭部 header ---------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容（中部）
左側(cè) main-left -------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條
內(nèi)容 content --------------用于網(wǎng)頁中部主體
底部 footer -----------------用于底部
以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：
| CSS樣式命名 | 說明 |
|---|---|
| 網(wǎng)頁公共命名 | |
| #wrapper | 頁面外圍控制整體布局寬度 |
| #container或#content | 容器,用于最外層 |
| #layout | 布局 |
| #head, #header | 頁頭部分 |
| #foot, #footer | 頁腳部分 |
| #nav | 主導(dǎo)航 |
| #subnav | 二級導(dǎo)航 |
| #menu | 菜單 |
| #submenu | 子菜單 |
| #sideBar | 側(cè)欄 |
| #sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
| #main | 頁面主體 |
| #tag | 標(biāo)簽 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情連接 |
| #title | 標(biāo)題 |
| #summary | 摘要 |
| #loginbar | 登錄條 |
| #searchInput | 搜索輸入框 |
| #hot | 熱門熱點(diǎn) |
| #search | 搜索 |
| #search_output | 搜索輸出和搜索結(jié)果相似 |
| #searchBar | 搜索條 |
| #search_results | 搜索結(jié)果 |
| #copyright | 版權(quán)信息 |
| #branding | 商標(biāo) |
| #logo | 網(wǎng)站LOGO標(biāo)志 |
| #siteinfo | 網(wǎng)站信息 |
| #siteinfoLegal | 法律聲明 |
| #siteinfoCredits | 信譽(yù) |
| #joinus | 加入我們 |
| #partner | 合作伙伴 |
| #service | 服務(wù) |
| #regsiter | 注冊 |
| arr/arrow | 箭頭 |
| #guild | 指南 |
| #sitemap | 網(wǎng)站地圖 |
| #list | 列表 |
| #homepage | 首頁 |
| #subpage | 二級頁面子頁面 |
| #tool, #toolbar | 工具條 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜單 |
| #status | 狀態(tài) |
| #scroll | 滾動(dòng) |
| .tab | 標(biāo)簽頁 |
| .left .right .center | 居左、中、右 |
| .news | 新聞 |
| .download | 下載 |
| .banner | 廣告條 |
| 電子貿(mào)易相關(guān) | |
| .products | 產(chǎn)品 |
| .products_prices | 產(chǎn)品價(jià)格 |
| .products_description | 產(chǎn)品描述 |
| .products_review | 產(chǎn)品評論 |
| .editor_review | 編輯評論 |
| .news_release | 最新產(chǎn)品 |
| .publisher | 生產(chǎn)商 |
| .screenshot | 縮略圖 |
| .faqs | 常見問題 |
| .keyword | 關(guān)鍵詞 |
| .blog | 博客 |
| .forum | 論壇 |
| CSS文件命名 | 說明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模塊 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主題 |
| columns.css | 專欄 |
| font.css | 文字、字體 |
| forms.css | 表單 |
| mend.css | 補(bǔ)丁 |
| print.css | 打印 |
CSS命名其它說明：
DIV+CSS命名小結(jié)：無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名，同時(shí)考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1\h2\h3\h4標(biāo)簽使用)、content (內(nèi)容區(qū))、footer(頁腳、底部)、logo（標(biāo)志、可以配合h1標(biāo)簽使用）、banner（廣告條，一般在頂部）、copyRight（版權(quán)）。其它可根據(jù)自己需要選擇性使用。
建議：主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名。
2.CSS樣式文件命名如下：
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css
如果遇到不常用的，可以借助翻譯工具進(jìn)行翻譯取其英文命名。
以上為DIV+CSS的命名規(guī)則總結(jié)，相信通過規(guī)范的CSS 命名會(huì)給你以后做網(wǎng)站網(wǎng)頁的維護(hù)帶來方便。
想認(rèn)識志同道合的朋友一起學(xué)習(xí)web
加入我們的學(xué)習(xí)QQ群 190166743
豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開課
長按圖片，識別二維碼即可入群
你可能感興趣的精彩內(nèi)容
微信：UI設(shè)計(jì)自學(xué)平臺加關(guān)注
長按關(guān)注：《UI設(shè)計(jì)自學(xué)平臺》
↓↓↓
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
