您現在的位置是:電腦技術吧?>? 基礎知識 ??>??規范書寫,9的規范書寫??>??正文詳情

規范書寫,9的規范書寫

富秀華2019-11-13 22:11:09 人圍觀
簡介生字書寫規范方法我寫了這么長時間的CSS,但是大部分前端用戶沒有按照好的CSS編寫規范編寫CSS代碼,這會影響代碼的閱讀體驗。這里我總結了一個CSS的編寫規范和CSS的編寫順序數字零

寫了這么久的CSS,但大部分前端er都沒有按照良好的CSS書寫規范來寫CSS代碼,這樣會影響代碼的閱讀體驗,這里我總結一個CSS書寫規范、CSS書寫順序供大家參考,這些是參考了國外一些文章以及我的個人經驗總結出來,我想對寫CSS的前端用戶來說是值得學習的。

  CSS書寫順序  1.位置屬性(position, top, right, z-index, display, float等)  2.大小(width, height, padding, margin)  3.文字系列(font, line-height, letter-spacing, color- text-align等)  4.背景(background, border等)  5.其他(animation, transition等)

  CSS書寫規范  使用CSS縮寫屬性  CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。

  去掉小數點前的0

  簡寫命名  很多用戶都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!

  16進制顏色代碼縮寫  有些顏色代碼是可以縮寫的,我們就盡量縮寫吧,提高用戶體驗為主。

  連字符CSS選擇器命名規范  1.長名稱或詞組可以使用中橫線來為選擇器命名。

  2.不建議使用_下劃線來命名CSS選擇器,為什么呢?  輸入的時候少按一個shift鍵;  瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的)  能良好區分JavaScript變量命名(JS變量命名是用_)  這里有一篇破折號與下劃線的詳細討論,英文:點擊查看 中文篇:點擊查看

  不要隨意使用id  id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復使用,另外id的優先級優先與class,所以id應該按需使用,而不能濫用。

  為選擇器添加狀態前綴  有時候可以給選擇器添加一個表示狀態的前綴,讓語義更明了,比如下圖是添加了.is-前綴。

  CSS命名規范(規則)  常用的CSS命名規則  頭:header  內容:content/container  尾:footer  導航:nav  側欄:sidebar  欄目:column  頁面外圍控制整體?局寬度:wrapper  左右中:left right center  登錄條:loginbar  標志:logo  廣告:banner  頁面主體:main  熱點:hot  新聞:news  下載:download  子導航:subnav  菜單:menu  子菜單:submenu  搜索:search  友情鏈接:friendlink  頁腳:footer  版權:copyright  滾動:scroll  內容:content  標簽:tags  文章列表:list  提示信息:msg  小技巧:tips  欄目標題:title  加入:joinus  指南:guide  服務:service  注冊:regsiter  狀態:status  投票:vote  合作伙伴:partner  注釋的寫法:  /* Header */  內容區  /* End Header */  id的命名:  1)頁面結構  容器: container  頁頭:header  內容:content/container  頁面主體:main  頁尾:footer  導航:nav  側欄:sidebar  欄目:column  頁面外圍控制整體?局寬度:wrapper  左右中:left right center  (2)導航  導航:nav  主導航:mainnav  子導航:subnav  頂導航:topnav  邊導航:sidebar  左導航:leftsidebar  右導航:rightsidebar  菜單:menu  子菜單:submenu  標題: title  摘要: summary  (3)功能  標志:logo  廣告:banner  登陸:login  登錄條:loginbar  注冊:register  搜索:search  功能區:shop  標題:title  加入:joinus  狀態:status  按鈕:btn  滾動:scroll  標?頁:tab  文章列表:list  提示信息:msg  當前的: current  小技巧:tips  圖標: icon  注釋:note  指南:guild  服務:service  熱點:hot  新聞:news  下載:download  投票:vote  合作伙伴:partner  友情鏈接:link  版權:copyright  注意事項::  1.一律小寫;  2.盡量用英文;  3.不加中?和下劃線;  4.盡量不縮寫,除非一看就明白的單詞。

  CSS樣式表文件命名  主要的 master.css  模塊 module.css  基本共用 base.css  布局、版面 layout.css  主題 themes.css  專欄 columns.css  文字 font.css  表單 forms.css  補丁 mend.css  打印 print.css

版權聲明:本文由 富秀華 整理編輯。

原標題:0的規范書寫,中文書寫規范的方法

轉載注明出處:http://www.dn9ww09s.icu/basics/11959.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7電腦安全模式怎么進,win7安全模式進不去

    win7電腦安全模式怎么進,win7安全模式進不去 相關圖片windows7安全模式如果電腦出了問題,不能進入系統怎么辦?計算機出現問題的原因有很多。我們可以讓電腦進入安全模式,希望能幫助你找出問題和解決辦法。如何輸入具體要求?接下來...

  • 草稿,草稿本怎么做

    草稿,草稿本怎么做 相關圖片草稿本怎么寫萬維網聯盟(W3C)發布了HTML5規范草案,這是html4十多年前發布以來的第一次重大修訂。在此期間,隨著開發人員逐漸將其應用程序遷移到web上,web已經從草稿怎么寫...

  • 000007e藍屏,藍屏0ed

    000007e藍屏,藍屏0ed 相關圖片藍屏000008e很多用戶反映,這臺電腦剛買下來,藍屏錯誤碼ox0000007e無緣無故出現。0x0000007e error表示系統進程遇到問題,如果遇到此類問題,應該怎么辦?0x0000007e藍屏...

  • 純代碼,xib和純代碼

    純代碼,xib和純代碼 相關圖片純代碼 圖案!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1純代碼游戲...

  • 安裝系統藍屏,系統藍屏

    安裝系統藍屏,系統藍屏 相關圖片裝win7藍屏計算機系統已經使用很長時間了,想改變一個系統。通常是重新安裝的。現在系統的安裝非常簡單。許多用戶可以自己手動安裝系統。有時安裝系統時會出現計算機的藍屏。藍...

  • 背景顏色,換背景顏色

    背景顏色,換背景顏色 相關圖片word背景顏色htmlheadtitlexker.com/titlestyle.l1{背景:#ffffff}.l2{背景:#f4f4f4}/stylescriptfunctiwps背景顏色...

  • 打印機如何共享打印,打印機共享無法打印怎么辦

    打印機如何共享打印,打印機共享無法打印怎么辦 相關圖片共享打印機已連接但無法打印在辦公室里,我們經常使用打印機共享功能,這樣大家打印文件就更方便了。當windows系統的用戶最近共享打印機時,系統提示:如果共享打印機拒絕訪問,...

  • 本地連接ip地址怎么設置,設置本地連接

    本地連接ip地址怎么設置,設置本地連接 相關圖片怎么啟用本地連接事實上,建立本地IP通常是在intranet中。在我們常見的網絡環境(如路由器和交換機)中,我們經常需要設置本地連接IP。如何設置本地連接IP?我相信大多數用戶w7本地...

  • 已為你切換到當前音效,切換音效

    已為你切換到當前音效,切換音效 相關圖片耳機按下去才有聲音在交互中添加正確的聲音通常會改善用戶體驗。在我們熟悉的窗口中,刮紙清空回收站的聲音就是一個很好的例子。下面是一個小部件,它使用HTML5、jQuery向頁面添加...

  • USB共享網絡,usb共享網絡是什么意思

    USB共享網絡,usb共享網絡是什么意思 相關圖片小米usb共享網絡有網友說,USB共享網絡意味著我出差時經常沒有WiFi網絡。如果我能插上電腦上網,那就太好了,但是如何使用USB共享網絡呢?無論您的手機是通過流量還是WiFi,usb共享網...

熱評文章

  • mrt文件用什么軟件打開,增強mrt是什么

    mrt文件用什么軟件打開,增強mrt是什么 相關圖片.bat是什么文件當我們認為大多數用戶會打開資源管理器來關閉一些不必要的流程以節省資源時,但是當我們看到很多流程時,我們不知道是否有任何影響。mrt.exe進程是許多用戶不知道它...

  • 四行八列,四行五列

    四行八列,四行五列 相關圖片四行一列的面板首先看效果:這里是源代碼:htmlheadtitletest/titletype type=text/CSSUl{margin:0px;padding:0px;四行三列行列式計算器...

  • 打印機出錯怎么解決,打印機常見問題及解決方法

    打印機出錯怎么解決,打印機常見問題及解決方法 相關圖片打印機顯示無法打印打印機作為一種重要的辦公設備,當它不能打印時,很多人都在討論如何處理它。打印機無法打印的原因有很多。如果我們遇到打印機不能打印,我們應該從簡單到...

  • 無法應用轉換程序,編寫一個程序

    無法應用轉換程序,編寫一個程序 相關圖片數制轉換這個功能主要是為了方便UBB發布。一。自動識別圖片、超鏈接、字體顏色、粗體、斜體和下劃線字體的HTML代碼,并將其轉換為UBB代碼。2。兼容htmlheadti能將高級語言轉換成目標...

  • 安全模式怎么解除dnf,dnf安全模式解除不了

    安全模式怎么解除dnf,dnf安全模式解除不了 相關圖片dnf永久取消安全模式如何去除DNF安全模式是很多小伙伴頭疼的問題,因為玩家無法在安全模式下進行敏感的操作,如出售裝備、丟棄道具、拆卸裝備等,會給人這樣的提示,影響心情。...

  • 電腦軟件亂碼怎么修復,亂碼修復工具

    電腦軟件亂碼怎么修復,亂碼修復工具 相關圖片亂碼軟件現在很多人在使用電腦時,有時會遇到各種各樣的問題。例如,系統的中文顯示會出現代碼混亂,這也是故障之一。怎么了?我們怎樣才能解決這個問題?現在我會告訴你具體...

  • attr和,attr怎么用

    attr和,attr怎么用 相關圖片matterattr()特性自css2.1標準以來就一直存在,但現在它才變得流行起來。它提供了一種在CSS中使用HTML標記上的屬性的聰明方法,這可以幫助您在許多情況下保存attempt...

  • 電腦安裝系統,電腦系統重新安裝步驟

    電腦安裝系統,電腦系統重新安裝步驟 相關圖片電腦怎么安裝系統軟件現在很多人想在購買新電腦時安裝自己喜歡的系統。目前的系統主要分為四種:原來的XP系統、兼容性好的win7系統、先進的win8系統和市場上最新的win10系統電腦安...

  • 文本溢出顯示省略號,多行文本溢出省略號隱藏

    文本溢出顯示省略號,多行文本溢出省略號隱藏 相關圖片多行元素的文本省略號CSS文本溢出省略號文本溢出:省略號文本溢出是一個特殊屬性,由W3C的早期文檔定義(當前文檔不包含文本溢出屬性FML!)as:名稱:文本-單行文本省略號...

  • 本地連接獲取不到網絡地址,本地連接正在獲取網絡地址怎么辦

    本地連接獲取不到網絡地址,本地連接正在獲取網絡地址怎么辦 相關圖片本地連接連不上近日,Windows 7系統用戶反映,電腦開機后,網絡連接一直顯示“獲取網絡地址”,過一段時間就會變成“無法獲取網絡地址”。此問題導致網絡連接無法訪問Inter本地連接...

關注微信

变脸官网查询