css書寫5技巧

來源:互聯網
上載者:User
使用css注釋來分給css分組,這樣結構明了,也有利於協同設計。

1. CSS Reset/重設

你也許需要先瞭解什麼是css重設。然後怎麼樣寫css重設呢。

你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下來應該根據你的項目改成你自己的reset.
不要使用* { margin: 0; padding: 0; } 。我個人很愛用,原作者提到使用這句並不適用一些元素比如選項按鈕。不過俺部落格裡面也沒有選項按鈕,如果有,又重新給選項按鈕重設就好了嘛。

2. 按字母順序來排列css

不按字母順序排的

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

按字母順序排的

div#header h1 {
 border-bottom: 1px solid #dedede;
 color: #000;
 font-size: 18px;
 line-height: 24px;
 margin-right: 48px;
 position: relative;
 z-index: 101;
}
理由是這樣可以更好的找到某個屬性。個人覺得還好,差別也不是太大。不過也許會適合你。

3. 更好的組織css結構

使用css注釋來分給css分組,這樣結構明了,也有利於協同設計。

/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}

4. 保持一致性

不要無意義的去討論到底一個選取器的所有屬性寫在一行,還是每個屬性寫一行比較好。你自己覺得ok就好。

iv#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
比如我個人就喜歡寫在一行,因為每排寫一行會讓整個文檔感覺太長了,找起來不方便。如果你喜歡寫一行,但是發給team的另一個,他卻喜歡每排一行,那怎麼辦?其實很簡單,把css拿去w3c驗證,它會有一份結果,會自動轉換成每排一行。

5. 先標記後css

這個我沒有太看懂。大概理解是對html的標記弄好後再寫css會比較不容易出錯。比如我寫一個頁面,先寫一個最基本的標記結構

<body>
     <div id="wrapper">
          <div id="header"><!--end #header-->
          <div id="container">
               <div id="content">
               </div><!--end #content-->
               <div id="sidebar">
               </div><!--end #sidebarr-->
          </div><!--end #container-->
          <div id="footer">
          </div>!<--end #footer-->
       </div><!--end #wrapper-->
</body>

然後就是盡量善用子選取器,而不是一要給哪個元素進行樣式化,就給它添加個選取器。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.