使用CSS3樣式表的提示

一旦我們定義了網站的結構並開發了 DOM 以精確的方式，定義相同的樣式非常重要，它也是最具創意的領域，您可以在其中以更高的精確度自定義網站的最後一個角落。 級聯樣式表是最合適的解決方案，但是對於所有首次涉足Web開發領域的人們，必須考慮一些技巧才能獲得最佳結果。

為了獲得典型的奉獻前端的專業結果，有必要考慮某些方面，例如順序，可讀性以及此類實踐中最常見的錯誤的更正。 我在下面分享 五個技巧 非常基本，但同時對於CSS樣式表的處理和最佳配置也非常重要。

確保在CSS3樣式表中建立有效的順序和結構

我總是按層次結構順序劃分樣式表。 首先，我通常會應用常規選擇器，然後繼續添加html選擇器的聲明，最後在容器和次要元素的ID中進行操作。 基本接地 遵循DOM的邏輯 從父母開始，直到孩子。 但是，我們也可以遵循其他公式或順序，例如，可以根據選擇器和聲明的功能對它們進行分組。 一切都取決於我們的喜好以及我們對工作的感覺如何。

為每個選擇器選擇簡潔明了的名稱

您必須考慮到非常重要的一點，即CSS3在大小寫字母的用法上有所不同，因此用大寫字母寫一個單詞可能意味著不同，並可能導致錯誤。 最簡單的方法是始終使用小寫字母來避免此類問題。 也試試 選擇您的班級和您的ID可以清楚識別的名稱 並且它們不會推斷我們有任何疑問或錯誤。

不要忘記添加澄清的評論

當然，您需要與其他人共享文件，也許是您的客戶或工作團隊中的同事，例如佈局設計師，其他設計師或開發人員。 因此，非常重要的是要注意結構並確保整潔有序。 清晰的註釋將幫助訪問我們樣式表的任何人快速找到自己的出路。 必須考慮的任何類型的觀察 它必須作為內容出現。 請記住，您既可以在HTML文件中也可以在CSS文件中包含內容，並且在這兩種情況下，它們都是註釋，它們在邏輯上不會反映在最終結果中，並且僅在訪問相同源代碼時才可見，因此它們會很有幫助。

始終在樣式表中應用重置

每個瀏覽器都有其默認樣式表，因此為了避免根據查看頁面的瀏覽器而導致任何錯誤或更改，它非常有用，建議您 重置您的樣式表。 有幾種選擇，Eric Meyer的重置樣式表可能是一個很好的選擇。

選擇最有效的工具

在進行網站設計時，可以使用許多工具來提高效率。 從線框的創建到網站結構的開發，以及各種應用程序，包括 Adobe Photoshop，Illustrator或Fireworks。 您也有很多專業編輯是最受推薦的編輯之一（至少是我使用的編輯） Sublime Text，或者失敗了，Adobe Dreamweaver 因為它們提供了具有高度個性化的非常簡單的界面，並且可以通過快捷方式系統和自動完成系統來使用我們的代碼，這將幫助我們節省70％以上的編輯時間傳統純文本。