HTML和CSS編碼指南

我們正在與外部顧問簽訂合同，爲我們目前正在開發的新項目的大多數主要頁面生成XHTML（過渡）和CSS。HTML和CSS編碼指南

我被要求爲他們制定一份指導方針清單，以便我們確信可以達到一定的質量水平。作爲一個技術背景，我們將把他們提供的原始HTML整合到ASP.NET Web表單應用程序中（利用通常的主頁/外部樣式表/ jquery）。 JavaScript不應該是一個考慮因素，但應該是CSS的格式和組織。

我已經開始了，但很快意識到這可能不是一個獨特的情況，而且一個經過測試和測試的列表可能在那裏，我至少可以用作模板！有沒有人有過這方面的經驗？

來源

2008-11-28 Kieran Benton

從技術角度來看，頁面必須pass validation可能是我的第一個測試。

我希望該網站能夠被禁用JavaScript的用戶以及使用屏幕閱讀器的用戶使用（這是相當不錯的，因爲它還應該突出顯示使用不當的表格和其他內容如丟失的其他內容圖像alt標籤，標題標籤的不一致使用等）。

來源

2008-11-28 15:06:59

+1。另外，在瀏覽器中禁用CSS應該使頁面變成一個乾淨的，自上而下的文本文檔：http://www.singingeels.com/Articles/How_To_Pure_CSS_Design.aspx – 2008-11-28 15:23:31

+1基礎知識。儘管我不會去禁用CSS。甚至掌上電腦和什麼都沒有CSS。 – 2008-11-28 15:40:19

除了確認以下幾點應該牢記 - 輔助功能（誰是觀衆） - 基於CSS的設計（其中語義精心設計） - 與您的命名約定（CSS和ID命名保持一致。從長遠來看，當需要做出任何改變，新的CSS必須被應用時，這將是有益的）。

退房從雅虎開發人員庫中的以下最佳實踐... http://developer.yahoo.com/performance/rules.html

此外，由於使用的是ASP.net命名用戶控件作爲產生可能是相當長的和意想不到的客戶端ID時要小心（asp.net在運行時生成id）;

一些好的信息可以在 http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

來源

2008-11-28 15:16:34

發現的確，確保該頁面通過驗證。

還要注意語義，當CSS被禁用時（這是一些瀏覽器和屏幕閱讀器的情況）頁面應該按邏輯順序排列。確保標題實際上是< h＃>標籤，並且所有圖像都有適當的alt標籤。還要確保表格僅用於顯示信息，不用於格式化。該菜單應該被構造爲一個列表而不是divs（語義）。

來源

2008-11-28 15:18:09

我總是爲自己做的一個很好的測試是打開頁面和按Ctrl +滾動。縮放讓您立即瞭解您的設計的靈活性和流動性。

在IE中這往往會失敗，不管是什麼，但你也可以嘗試使字體更大，看看會發生什麼（注意按鈕例如垂直拉伸）

來源

2008-11-28 15:42:02

給他們瀏覽器的列表（瀏覽器版本和操作系統），你期望他們支持。

應該遵守可訪問性準則嗎？您可以同意支持Checklist for Web Content Accessibility Guidelines中的一些要點。該列表實際上非常有用，因爲它不僅可以確保您的網站適用於殘障人士，而且還適用於沒有JavaScript，CSS和圖片的瀏覽器。該清單還包含一些建立合理網站的一般良好做法。

由於您使用的是ASP.NET，請確保它們每個網頁只包含一個<form>。或者至少，準備好一些解決方法，如果你允許他們使用更多。

如果您打算使用AJAX，請將它們顯示爲ASP.NET AJAX Control Toolkit，以便它們不會花時間在已經構建的東西上。

我會堅持說他們使用一些成熟的框架，如YUI css reset和jQuery。

來源

2008-11-28 16:01:32

在多個前端開發人員之間傳遞HTML/CSS模板的一件事是正確構造和縮進標記。書籍分爲書卷，章節，段落，句子，單詞，空格和句號的方式相同，有一個層次結構，使HTML和CSS易於閱讀（另一方面，一種編碼方式使事情成爲可能一塌糊塗）

作爲一個經驗法則：

 <body> 
      <div id="first"> 
       <p> 
        Some text goes in here... 
       <p> 

       <ul> 
        <li>A list item</li> 
        <li>A list item</li> 
        <li>A list item</li> 
        <li> 
         <ul> 
          <li> 
            <a href="#">A link</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> <!-- #first ends --> 
    </body>

這種堅持結構確實可以通過使掃描代碼超級簡單的誰正在IT-削減時間不管他們是否寫它與否。

來源

2010-08-30 05:54:47

HTML和CSS編碼指南

回答

相關問題