整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          常用的CSS命名規(guī)范大總結(jié),非常實(shí)用(收藏)

          本命名規(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)行重命名。

          整理 | 章雨銘 責(zé)編 | 張紅月
          出品 | CSDN(ID:CSDNnews)

          不斷發(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ì)凸顯出來。


              沖突源2:檢查一個(gè)屬性的存在

              ES2022的方法最初是.NET的。因?yàn)橐韵聨鞕z查屬性以確定對象是否是一個(gè)HTML集合(而不是一個(gè)數(shù)組),所以它必須被重新命名:Magic360YUI 2YUI 3.Array.prototype.at().item().item

              沖突源3:檢查全局變量是否存在

              自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



                沖突源4:通過創(chuàng)建局部變量with語句
                JavaScript的聲明with語句

                長期以來,人們一直不鼓勵(lì)使用JavaScript的with語句,甚至在ES5中引入的嚴(yán)格模式中也被定為非法。在其他地方,嚴(yán)格模式在ECMAScript模塊中是活躍的。

                該語句將一個(gè)對象的屬性變成局部變量:with

                • cons t myObject = { ownProperty: 'yes',};

                  with (myObject) { // Own properties become local variables assert.equal( ownProperty, 'yes' );

                  // Inherited properties become local variables, too assert.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, });


                      結(jié)論

                      以上提出了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

                      END

                      《新程序員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命名,特別是新手不知道什么地方該如何命名,怎樣命名才是好的方法。

          一、命名規(guī)則說明

          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命名方法。

          二、相對網(wǎng)頁外層重要部分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 -----------------用于底部

          三、DIV+CSS命名參考表

          以下為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é)平臺》

          ↓↓↓


          主站蜘蛛池模板: 亚洲视频在线观看一区| 国产人妖在线观看一区二区 | 国产精品高清视亚洲一区二区| 日韩精品视频一区二区三区 | 日本在线视频一区二区| 毛片一区二区三区无码| 中文字幕色AV一区二区三区| 久久精品黄AA片一区二区三区| 国产精品综合一区二区| 三上悠亚日韩精品一区在线| 亚洲精品无码一区二区| 中文字幕在线播放一区| 国产成人av一区二区三区在线| 夜夜添无码试看一区二区三区| 国产传媒一区二区三区呀| 亚洲欧洲一区二区| 国产精品视频一区二区噜噜| 国产一区二区三区在线| 日本在线电影一区二区三区| 无码人妻精品一区二区三区9厂| 高清国产AV一区二区三区| 三级韩国一区久久二区综合| 精品国产日韩亚洲一区在线| 精品欧洲av无码一区二区 | 国产乱码伦精品一区二区三区麻豆| 亚洲一区综合在线播放| 日韩好片一区二区在线看| 亚洲视频在线观看一区| 无码精品视频一区二区三区| 日本免费一区二区三区| 久久国产精品视频一区| 亚洲一区二区三区无码国产| 无码av免费毛片一区二区| 国产精品视频一区国模私拍 | 日本激情一区二区三区| 成人精品一区二区三区校园激情| 免费观看日本污污ww网站一区 | 成人H动漫精品一区二区| 日韩精品电影一区亚洲| 久久一区不卡中文字幕| 国产精品99精品一区二区三区|