CSS開發中的十大錯誤用法

2021-09-28 23:55:07 字數 1176 閱讀 3355

自從接觸前端軟體開發以來,我發現開發猿一直在努力征服著css。

理由也很充分,開發人員是用邏輯思考的生物。

新增乙個div元素導致所有**都不得不往下移一行,而另乙個div「浮」到左側,感覺沒有任何意義。

你也一定聽到過開發人員的抱怨:

「我們只需要向左邊移動五個畫素,但是…天哪!為什麼整個都向下移動了一行。到底是**錯了?!?!?!」

1.不要濫用類

在有意義的地方使用id而不要使用類。這是乙個使得瀏覽器能夠更快訪問dom元素的方法。

2.不要把一切都扔進乙個css檔案中

分割槽css使其更易於管理。每乙個css檔案都可以分解成例如header.css、footer.css等邏輯元件。

3.不要害怕開發工具

現在的每個瀏覽器都有自己的一套開發工具,通常是按f12。這些工具在「除錯css」時至關重要。

4.不要忘記注釋

注釋在css中非常重要,可用來理解每個樣式如何與其他樣式關聯以及什麼顏色方案適用於哪些元件。

5.不要命名選擇器為「.red-with-green-dashed-lines」(紅綠虛線)

根據頁面上的元件命名你的選擇器。例如:「header-left」,「content-title」或「content-date」更具描述性。

6.不要濫用 !很重要

css的整體思路是,從乙個到另乙個地「層疊」樣式。 !重點是要記住排雷一樣地踏遍所有早先的樣式。

7.不要讓css過於「臃腫」

空格會占用css檔案的空間空間。由於我們都希望css能夠快速載入,因此在部署到**之前最好使用css壓縮工具來一次**。

8.不要使用大量網路字型

有些人喜歡自己排版。只在**上使用乙個或兩個(最多三個)網路字型,然後回歸到瀏覽器預設設定,以保持**的優化。

9.不要手動編碼所有的css

為了保持css的dry,可以使用css預處理程式例如less或sass。使用這些預處理器的最大好處是,你可以定義變數,例如在上面定義配色方案,然後重複使用到所有css,而不必當你需要修改的時候追蹤每個顏色。

10.不要害怕覆蓋

當然,css框架,例如bootstrap和foundation都較為巨大,但每乙個都需要根據你的需要做出一點調整。當你得到乙個更新的框架時,它將覆蓋你的改變。與其深入挖掘龐大的css檔案,還不如建立乙個bootstrap-overrides.css檔案,按照你的意願調整框架。

使用者故事使用中的十大錯誤

1.在使用者故事中,將開發中的相關人員作為系統使用者角色 比如 as a po apo ppo developer tester manager integration engineer,i want 必須注意,as a 中的role是執行時實際使用該系統的使用者角色,不是開發時干係人的角色 包括客...

資料探勘的十大錯誤現象 翻譯

在癌症檢測的專案中,醫生和研究人員在使用神經網路訓練資料時驚奇發現 訓練長時間 幾周或幾天 的訓練對結果的提高是有限的,更多時候會有更糟糕的評估結果。2.依賴於一種技術rely on one technique to a little boy with a hammer,all the world ...

資料庫常見十大錯誤No8 備份出錯

sql server資料庫備份出錯及應對措施 早上看了乙個貼子,是乙個哥們推廣自己乙個智慧型的資料庫備份系統,他總結了資料庫備份過程中所有可能出錯的情況,可以借鑑。如果你做dba時間不長,對資料庫的備份有些擔心,希望能找到一種讓你放心的備份方案,那麼本文絕對適合你。關於資料庫的備份恢復原理,大家多少...