這里向大家描述一下編寫(xiě)完美CSS代碼五個(gè)必要條件,主要包括關(guān)于CSS重置,CSS屬性的排序,CSS樣式的組織,保持一致性等內(nèi)容,相信通過(guò)本文的學(xué)習(xí)你對(duì)如何編寫(xiě)CSS代碼會(huì)有深刻的認(rèn)識(shí)。 寫(xiě)出完美CSS代碼的5個(gè)重要方面 每個(gè)人都可以編寫(xiě)CSS代碼,甚至你現(xiàn)在已經(jīng)讓它為你的項(xiàng)目工作了。我們?cè)?1cto.com中也一直與大家討論,學(xué)習(xí)CSS編碼與CSS技巧。但是CSS還可以更好嗎?開(kāi)始用這5個(gè)Tips改進(jìn)你的CSS吧! 一、關(guān)于CSS重置 首先,很認(rèn)真的告訴你,總是要重置某些分類(lèi)。無(wú)論你是使用EricMeyerReset、YUIReset或者你自己編寫(xiě)的重置代碼,只要使用就對(duì)了。 它能很簡(jiǎn)單的移除所有元素的填充(padding)和邊距(margin): ExampleSourceCode
EricMeyerReset和YUIReset都是非常強(qiáng)大的,但是對(duì)于我而言,它們走的太遠(yuǎn)了。我覺(jué)得你最終需要重置一切,然后重新定義所有元素的屬性。這就是為什么EricMeyer推薦更有效的使用(重置樣式表),而你不要只是使用他的重置樣式表,將它拖放到你的項(xiàng)目中。調(diào)整它(的重置樣式表),建立屬于自己的重置樣式表。 請(qǐng)停止使用: ExampleSourceCode
花更多的時(shí)間去制作它,當(dāng)你移除了填充(padding)你認(rèn)為單選按鈕會(huì)發(fā)生什么變化?表單元素有時(shí)能夠做些時(shí)髦的事情,所以最有效的方式就是將他們獨(dú)立。 二、CSS屬性的排序 一個(gè)小的測(cè)試,這個(gè)例子就是要讓你思考如何更快的找到右邊距屬性? ExampleSourceCode
你不能告訴我Example#2不能更快的找到右邊距屬性。根據(jù)字母排序你的元素屬性。一致的創(chuàng)建你的CSS,將幫助你節(jié)省花費(fèi)在尋找一個(gè)特殊屬性的時(shí)間。 我知道一些人用這樣的方法去組織代碼,其他人又用另一種方法去組織,但是在我的公司,我們協(xié)商一致做出決定,所有的代碼都將按照字母排序來(lái)組織。通過(guò)這樣組織代碼與其他人協(xié)同工作一定是有幫助的。當(dāng)我碰到屬性沒(méi)有按照字母排序的層疊樣式表我每一次都會(huì)退縮。 三、CSS樣式的組織 你應(yīng)該組織你的樣式表以致相關(guān)的內(nèi)容靠在一起,更簡(jiǎn)單的找到想要的。使用更有效的注解。舉個(gè)例子,這是我如何構(gòu)造我的層疊樣式表: ExampleSourceCode
定義其他的選擇器。通過(guò)注解和歸類(lèi)相似元素的分組,將更快的找到你想要的。 四、保持一致性 無(wú)論你決定使用什么方式去編寫(xiě)代碼,保持一致。我已經(jīng)對(duì)全部放在1行VS多行的CSS編寫(xiě)編寫(xiě)方式的爭(zhēng)論感到乏味和疲倦。這是不需要爭(zhēng)辯的。每個(gè)人都有自己的觀點(diǎn),所以選擇一種你喜歡的工作方式,并在所有的樣式表中保持一致。 就我個(gè)人而言,我將使用兩者結(jié)合的方式。如果一個(gè)選擇器超過(guò)了3個(gè)屬性,我將截?cái)嗨捎枚嘈械姆绞骄帉?xiě)。 ExampleSourceCode
所以找到你喜歡的工作方式然后保持一致。 五、從正確的地方開(kāi)始 在完成標(biāo)記語(yǔ)言之前不要去嘗試靠近你的樣式表。 當(dāng)我準(zhǔn)備分割一張網(wǎng)頁(yè)的時(shí)候,創(chuàng)建CSS文件之前,我需要預(yù)覽并且標(biāo)記body開(kāi)標(biāo)簽到body的閉合標(biāo)簽之間的所有文檔。我不會(huì)增加額外的DIV,ID,或者類(lèi)選擇器。我將會(huì)添加一些一般的DIV,就好像hearder、content、footer.因?yàn)槲抑肋@些東西是現(xiàn)實(shí)存在的。利用CSS子選擇器指定子元素;不要只是機(jī)械的給元素添加類(lèi)或者ID選擇器。記?。簺](méi)有一個(gè)良好的格式化文檔(或者標(biāo)記結(jié)構(gòu))CSS是無(wú)價(jià)值的。 |
|
來(lái)自: kulwe > 《我的圖書(shū)館》