CSS開發中的10個不要
本文由碼農網 – 小峰原創翻譯,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃!
自我進入這個行業,我就發現開發人員一直在努力征服CSS。
理由也很充分,開發人員是用邏輯思考的生物。新增一個DIV元素導致所有程式碼都不得不往下移一行,而另一個DIV“浮”到左側,感覺沒有任何意義。
你也一定聽到過開發人員的抱怨:
“我們只需要向左邊移動五個畫素,但是…天哪!為什麼整個都向下移動了一行。到底是哪裡錯了?!?!?!”
所以,我們今天就來聊一聊CSS中的十大錯誤的做法。
根據我作為開發人員使用CSS的經驗,下面是我的十個“不要”。
1.不要濫用類
在有意義的地方使用ID而不要使用類。這是一個使得瀏覽器能夠更快訪問DOM元素的方法。
2.不要把一切都扔進一個CSS檔案中
分割槽CSS使其更易於管理。每一個CSS檔案都可以分解成例如header.css、footer.css等邏輯元件。
3.不要命名選擇器為“.red-with-green-dashed-lines”(紅綠虛線)
根據頁面上的元件命名你的選擇器。例如:“header-left”,“content-title”或“content-date”更具描述性。
4.不要忘記註釋
註釋在CSS中非常重要,可用來理解每個樣式如何與其他樣式關聯以及什麼顏色方案適用於哪些元件。
5.不要害怕開發工具
現在的每個瀏覽器都有自己的一套開發工具,通常是按F12。這些工具在“除錯CSS”時至關重要。
6.不要害怕覆蓋
當然,CSS框架,例如Bootstrap和Foundation都較為巨大,但每一個都需要根據你的需要做出一點調整。當你得到一個更新的框架時,它將覆蓋你的改變。與其深入挖掘龐大的CSS檔案,還不如建立一個bootstrap-overrides.css檔案,按照你的意願調整框架,只是…
7.不要濫用 !很重要
CSS的整體思路是,從一個到另一個地“層疊”樣式。 !重點是要記住排雷一樣地踏遍所有早先的樣式。 : -)
8.不要使用大量網路字型
這也是顯而易見的,但有些人就是喜歡自己排版。只在網站上使用一個或兩個(最多三個)網路字型,然後迴歸到瀏覽器預設設定,以保持網站的優化。
9.不要手動編碼所有的CSS
為了保持CSS的DRY,可以使用CSS預處理程式例如LESS或SASS。使用這些前處理器的最大好處是,你可以定義變數,例如在上面定義配色方案,然後重複使用到所有CSS,而不必當你需要修改的時候追蹤每個顏色。
10.不要讓CSS過於“臃腫”
空格會佔用CSS檔案的空間空間。由於我們都希望我們的CSS能夠快速載入,因此在部署到網站之前最好使用CSS壓縮工具來一次瘦身。
以上只是我作為一個開發人員在編寫CSS時認為不應該做的事情。歡迎提出不同的看法。
譯文連結:http://www.codeceo.com/article/css-10-bad-practices.html
英文原文:Top 10 CSS Bad Practices
翻譯作者:碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]
相關文章
- CSS開發過程中的20個快速提升技巧CSS
- android開發中犯的小錯誤,不要學我!Android
- 開發一個自己的 CSS 框架(一)CSS框架
- 軟體開發中的10個最佳實踐技巧!
- 10個好用的的css框架CSS框架
- 前端想拿萬元月薪?CSS開發中的10個易錯點一定要先規避掉!前端CSS
- [需求建議]強烈希望OneThink開發不要中斷
- 13個幫你提高開發效率的現代CSS框架CSS框架
- 10個好用的Python整合開發環境!Python開發環境
- python開發者常犯的10個錯誤Python
- Java 開發最容易寫的 10 個bugJava
- 這四款好用的前端開發工具,不要錯過!前端
- VSCode 必裝的 10 個高效開發外掛VSCode
- 提升開發技能:10個高階的JavaScript技巧JavaScript
- 工作發狂:Mybatis 中$和#千萬不要亂用!MyBatis
- 使用Spring Boot開發的10個免費開源專案Spring Boot
- 10 個 GitHub 上超火的 CSS 奇技淫巧專案,找到寫 CSS 的靈感!GithubCSS
- Java 開發者最容易犯的10個錯誤Java
- 10 個開發者必知的 MySQL 8.0 新功能MySql
- 10步成為一個優秀的Java開發!Java
- 【推薦】10個好用的Python整合開發環境!Python開發環境
- 幽默:使用CSS中!important的原因只有一個CSSImport
- 7 個開放式的 CSS 面試題CSS面試題
- 不要在REST API中公開您的JPA實體 - Thorben JanssenRESTAPIORB
- 一個Flutter中臺元件的開發過程Flutter元件
- 能讓你受益匪淺的10個css使用技巧CSS
- 通過10個好玩的遊戲來學習 CSS遊戲CSS
- python 開發者注意,錯位時空下,不要用 id 判斷兩個物件是不是同一個Python物件
- 快速開發android,離不開這10個優秀的開源專案Android
- 每個開發人員都應該知道的 10 個 GitHub 倉庫Github
- 10個Vue開發技巧助力成為更好的工程師Vue工程師
- 10個用於開發Spring Boot的最佳Eclipse外掛Spring BootEclipse
- ?Web開發者需要知道的CSS TricksWebCSS
- 前端開發CSS實用的技巧有哪些前端CSS
- Chrome 開發者工具裡的 CSS grid editorChromeCSS
- 將Nuxt.js搭建的網站中css樣式提取到一個css檔案中UXJS網站CSS
- 前端設計師必須知道的10個重要的CSS技巧前端CSS
- CSS中的“大白”——CSS 動畫CSS動畫
- 前端開發的福音!這個功能可直接從藍湖貼上css樣式前端CSS