CSS網頁開發中的建議(寫給我自己的嗎,傻瓜,你也可以看呀)

這些建議都是我在網頁開發中的總結和經驗,沒有順序之分,看需要的就好。在往後的網頁開發中有新的好的總結和經驗也會提煉到這篇文章,所以建議收藏,當然也不要忘了點贊和關注喲~

一、CSS選擇器建議:

爲什麼不用class呢,要用CSS選擇器呢?

我想應該有很多小夥伴有重重的疑問的,我爲什麼不用class呢,要用CSS選擇器呢?這樣說吧,通常我們開發網頁中一個父級是有很多子級的,你不可能給每一個子級都加上class,而且選擇器的使用會讓我們更加靈活,但是長的class名讓我們增加了可讀和維護性的同時確是會消耗性能。

1.選擇器指定最後一個子級不要使用:last-child

在子級不多的情況下不要使用last-child去選擇父元素最後一個子級,而改用 nth-child(n) 代替,因爲最後一個子級經常需要擴展其他子級,如果你一開始就把它定義爲最後一個父類子級,那麼後面你需要擴展其他子級元素再去改動元素是很麻煩的(如果層級還特別多,那麼頭更大),用nth-child(n)有利於擴展,因爲n裏填上對應的子級層級數就好了,後面以此類推。

這時有人可能會問了那first-child可以嗎?是可以的因爲它是選擇第一個元素,第一個一般都是比較清晰的信息所以幾乎很少去改動它。

2.選擇器既要指定父類層級也要指定子類層級

使用CSS選擇器指定不管是子級還是父級一定要指定當前的層級,不要因爲它現在還沒層級就不用,竟然你使用了選擇器那麼它的範圍是你父類裏的所有子類,例如:div裏現在有一個p元素,你直接指定p,

div p{}

那麼它的範圍就是當前div裏所有p元素,後面還是那個問題你去改動或者去擴展多一個那就非常麻煩了,老要回頭改前面的選擇器的指定層級,你不得崩潰,選擇器開始一時爽,層級嵌套太多你就知道多費功夫了。(不管你後面還有沒有層級,你都得指定它父類的層級以及它的子級)

div:first-child p:first-child /* 第一個div裏的第一個p */

(總結上面使用選擇器建議是爲了更好維護和擴展)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章