程式設計師應避免css中的10個錯誤做法

2021-07-11 14:42:48 字數 1675 閱讀 6825

很多web

前端工程師(

)在進行專案開發的時候,在

css上回花很多的功夫,因為在使用

css開發時,會出現各種各樣的問題,比如:新增乙個

div元素導致所有**都不得不往下移一行,而另乙個

div「浮」

到左側,感覺沒有任何意義。 「

我們只需要向左邊移動五個畫素,但是

…天哪!為什麼整個都向下移動了一行。到底是**錯了?!?!?!」

所以,我們今天就來聊一聊

css中的十大錯誤的做法。

根據開發人員使用

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壓縮工具來一次**。

程式設計師的10個等級

程式設計師的10個等級 程式設計師的10大級別 轉 第一級 神人,天資過人而又是技術狂熱者同時還擁有過人的商業頭腦,遠矚,技術過人,大器也。如丁磊,求伯君。第二級 高人,有天賦,技術過人但沒有過人的商業頭腦,通常此類人不是頂尖黑客就是技術總監之流。第 牛人,技術精湛,熟悉行業知識,敢於創新,有自己的...

有抱負的程式設計師應看的10個TED演講

編者按 一年一度的 ted 大會,這是創造力和好奇心的慶典。對全球諸多領袖人物來說,這是一次對知識的麥加朝聖。nathaniel whittemore 近日在發布了一篇文章,為有抱負的程式 員整理了10個ted大會演講。伯樂 ted 起源於20世紀80年代 1984年 是乙個小型獨家聚會,參與人都是...

有抱負的程式設計師應看的10個TED演講

一年一度的 ted 大會,這是創造力和好奇心的慶典。對全球諸多領袖人物來說,這是一次對知識的麥加朝聖。nathaniel whittemore 近日在發布了一篇文章,為有抱負的程式 員整理了10個ted大會演講。譯註1 tedx是由ted於2009年推出的乙個專案,旨在鼓勵各地的ted粉絲自發組織t...