5個項目，以幫助您掌握現代CSS

很多人認為CSS並非編程語言，我同意——它更難掌握。精通CSS需要設計能力、決心、創造力、經驗以及編碼技能（尤其是在使用Sass等預處理器時）。

CSS向瀏覽器建議佈局和样式。瀏覽器可以隨意解釋這些建議，甚至用戶或設備可以忽略或覆蓋任何屬性。創建在所有設備和屏幕分辨率上都能良好運行的高性能代碼是一項挑戰，很少有人嘗試或成功完成。然而，回報可能是令人興奮的。

從最簡單的開始，以下項目建議將幫助您使用SitePoint Premium提供的書籍，踏上CSS精通之路。

關鍵要點

• 精通CSS需要設計能力、決心、創造力、經驗和編碼技能。創建在所有設備和屏幕分辨率上都能良好運行的高性能代碼可能具有挑戰性，但回報可能是令人興奮的。
• 五個可以幫助提高CSS技能的項目包括：使網站更易於打印、將現代CSS主題應用於現有網站、重新設計表單佈局、提高網站速度以及從頭開始一個新項目或CSS組件。
• 使用現代瀏覽器開發者工具可以幫助評估性能並發現優化目標。諸如關鍵CSS和漸進式CSS加載之類的技術可以確保樣式表有效加載。
• 掌握現代CSS項目需要理解CSS基礎知識和最佳實踐，包括使用CSS重置、響應式設計的移動優先方法、Sass等CSS預處理器、CSS Grid和Flexbox，以及保持CSS井然有序並添加良好的註釋。

1. 使網站更易於打印

訪問您正在處理的網站，並嘗試打印（或打印預覽）頁面。您對結果滿意嗎？

HTML頁面是連續的介質，在打印媒體上不一定效果很好。不合適的章節、縮放、文本大小、列尺寸以及缺失或裁剪的內容都會導致訪問性差的打印體驗，而很少有開發人員會考慮這個問題。

幸運的是，打印CSS可以在幾個小時內開發出來。這通常是重置樣式（黑底白字）、刪除不必要的章節（菜單、英雄圖像、表單、社交媒體小部件等）、線性化佈局以及減少紙張和墨水用量的問題。

深入研究基於瀏覽器的開發者工具（來自《CSS Master》）和《Browser DevTool Secrets》，了解如何在切換到打印渲染後檢查和修改樣式。

《Applying CSS Conditionally》（來自《CSS Master》）描述瞭如何定義@media查詢規則，包括打印樣式表。

考慮您的《Strategy Guide to CSS Custom Properties》（來自《New Frontiers In Web Design》），以確定CSS變量是否可以幫助處理打印屬性。還可以考慮《Accessibility》（來自《CSS Animation 101》），以關閉動畫或以最佳狀態打印它們。

最後，《How to Create Printer-friendly Pages with CSS》（來自《CSS Tools & Skills》）提供了一個完整的打印優化教程，其中包含節省墨水和紙張成本的技巧。

2. 將現代CSS主題應用於現有網站

單一的配色方案很枯燥！每個人都期望在他們的操作系統和應用程序中擁有暗模式選項，那麼為什麼不在您的網站上添加一個呢？

直到最近，主題切換器通常需要一組額外的樣式以及JavaScript驅動的切換控件。但是，現代瀏覽器使用CSS自定義屬性（變量）和prefers-color-scheme @media規則使生活更輕鬆。

《Strategies for Theming》（來自《New Frontiers In Web Design》）在設計新主題時提供了一系列想法和注意事項。

《Applying CSS Conditionally》（來自《CSS Master》）描述瞭如何定義@media查詢規則，包括prefers-color-scheme。

最後，《Modern CSS: Adding a CSS Dark Theme》（來自《Modern CSS》）提供了一個完整的啟用暗主題的教程。

3. 重新設計表單佈局

檢查您網站上的表單，例如查詢或註冊表單。除非它是最近編碼的，否則它很可能使用容器DIV和基於浮動的佈局實現，這些佈局可能在較小的屏幕上中斷。較舊的表單可能使用不必要的JavaScript或可訪問性差。

《A Registration Form》（來自《Form Design Patterns》）描述了使用HTML5設計、樣式和編碼表單的最佳方法。

CSS Grid允許您消除不必要的標記，並在不使用媒體查詢的情況下創建防彈響應式佈局。以下CSS Grid教程將幫助您快速上手：

• 《Production-ready CSS Grid Layouts》（來自《New Frontiers In Web Design》）
• 《Creating Layouts with CSS Grid》（來自《Master CSS》），以及
• 《CSS Grid Layout》（來自《Jump Start Responsive Web Design》）

最後，《Make Forms Great with CSS Grid》（來自《CSS Grid Layout》）提供了一個完整的教程，該教程提供了一個基於網格的表單佈局，以及針對舊版瀏覽器的浮動回退。

4. 提高網站速度

在2020年初，平均網頁需要2MB的下載量，這需要20秒才能在普通移動設備上完全顯示。 CSS佔65KB，分佈在七個文件中。這似乎並不重要，但樣式表屬性會產生影響。

花幾個小時檢查您現有的網站，以確定是否可以使用更高效的CSS替換或優化圖像、字體和JavaScript效果。您的CSS代碼可能會增長，但總體重量會下降，性能會明顯提高。

《Testing Tools》（來自《Jump Start Web Performance》）和《Debugging for UI Responsiveness》（來自《CSS Master》）解釋瞭如何使用現代瀏覽器開發者工具來評估性能並發現優化目標。

《Loading Assets on the Web》（來自《New Frontiers In Web Design》）描述瞭如何使用關鍵CSS和漸進式CSS加載等技術來確保樣式表有效加載。 《20 Tips for Optimizing CSS Performance》（來自《Modern CSS》）提供了一些實用技巧。

最後，《Jump Start Web Performance》包含數十個快速、更深入和改變生活的開發建議，以確保您的網站對每個人都保持快速。

5. 開始一個新項目或CSS組件

以上項目建議可用於改進現有網站，但在從頭開始新項目時沒有限製或約束。可考慮的選項：

1. 創建在線簡歷。額外加分：確保它具有響應性、打印效果好，並將所有資源編碼到可以通過電子郵件發送的單個HTML文件中。 （提示：避免添加JavaScript，以確保它不會被電子郵件系統阻止。）
2. 創建交互式作品集。所有網站的圖形列表，單擊項目時會顯示其他信息。網格佈局是理想的選擇，但如果您真的想要挑戰一下，請嘗試砌體佈局。 （CSS Grid尚無法實現這一點，但請考慮如何使用CSS列或垂直排序的網格佈局來實現。）
3. 編碼圖形設計。也許可以從Dribbble或類似的設計社區中選擇一個有吸引力的想法，並使用HTML5和CSS3進行編碼。額外加分：無需框架或JavaScript即可創建它！
4. 創建僅限CSS的圖像。使用偽元素和CSS形狀創建一組有用的圖標，或使用漸變和陰影構建圖像。
5. 試驗SVG和CSS動畫。嘗試創建有吸引力的徽標、圖表、進度條、活動微調器等等。

開發者和瀏覽器工具：

• 《The DOM, CSS and Animations》（來自《Browser DevTool Secrets》）
• 《How to Use Gulp.js to Automate Your CSS Tasks》（來自《CSS: Tools & Skills》）
• 《Jump Start Sass》
• 《CSS Debugging and Optimization: Code Quality Tools》（來自《CSS: Tools & Skills》）
• 《CSS Debugging and Optimization: Developer Tools》（來自《CSS: Tools & Skills》）
• 《Life-Changing Diets》（來自《Jump Start Web Performance》）
• 《Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers》

CSS Grid理念：

• 《Redesigning a Site to Use CSS Grid Layout》（來自《CSS Grid Layout》）
• 《Easy and Responsive Modern CSS Grid Layout》（來自《CSS Grid Layout》）
• 《Progressively Enhanced CSS Layouts from Floats to Flexbox to Grid》（來自《CSS Grid Layout》）
• 《Redesigning a Card-based Tumblr Layout with CSS Grid》（來自《CSS Grid Layout》）
• 《Better Responsive Structures with Grid Systems》（來自《Jump Start Responsive Web Design》）

響應式CSS技術：

• 《14 Essential Responsive CSS Techniques》
• 《Responsive Design》
• 《Jump Start Responsive Web Design》

CSS過渡和動畫：

• 《CSS Animation 101》
• 《Transitions and Animations》（來自《CSS Master》）
• 《Using CSS Transforms in the Real World》（來自《Modern CSS》）

將CSS與SVG結合使用：

• 《Animating SVG》（來自《Practical SVG》）
• 《Using CSS with SVG》（來自《CSS Master》）
• 《Real World Use of CSS with SVG》（來自《Modern CSS》）

現在停止閱讀，開始編碼！

關於掌握現代CSS項目的常見問題解答 (FAQ)

掌握現代CSS項目的一些最佳實踐是什麼？

掌握現代CSS項目需要很好地理解CSS基礎知識和最佳實踐。這些包括使用CSS重置以確保不同瀏覽器之間的一致性，使用移動優先方法進行響應式設計，以及使用Sass或Less等CSS預處理器來使您的CSS更易於維護。此外，了解CSS Grid和Flexbox可以幫助您使用更少的代碼創建複雜的佈局。最後，保持CSS井然有序並添加良好的註釋可以使其他人（或未來的您）更容易理解您的代碼。

如何提高我的CSS編碼技能？

通過持續練習和學習可以提高您的CSS編碼技能。首先了解CSS的基礎知識，然後逐漸轉向更高級的主題。在線教程、編碼挑戰和開源項目可以提供實踐經驗。此外，關注行業專家並加入CSS社區可以幫助您了解最新的趨勢和技術。

使用CSS時遇到的一些常見挑戰是什麼？如何克服這些挑戰？

使用CSS時的一些常見挑戰包括處理瀏覽器不一致性、理解盒模型以及管理複雜的佈局。這可以通過使用CSS重置或規範化、了解box-sizing屬性以及使用CSS Grid或Flexbox進行佈局來克服。此外，使用CSS預處理器可以幫助管理大型CSS文件並使您的代碼更易於維護。

如何使用CSS創建響應式設計？

可以通過使用媒體查詢來使用CSS創建響應式設計，媒體查詢允許您為不同的屏幕尺寸應用不同的樣式。此外，CSS Grid和Flexbox可用於創建適應屏幕尺寸的靈活佈局。移動優先方法（從最小的屏幕尺寸開始，然後逐漸為更大的屏幕添加樣式）也可以幫助創建有效的響應式設計。

我應該學習哪些高級CSS技術？

您應該學習的一些高級CSS技術包括CSS動畫和過渡、CSS變量和CSS自定義屬性。此外，了解如何使用偽元素和偽類可以幫助您創建更複雜的樣式。學習Sass或Less等CSS預處理器也很有益。

如何優化我的CSS以獲得更好的性能？

可以通過最大限度地減少使用的CSS數量、使用速記屬性以及減少使用昂貴的CSS屬性來優化CSS以獲得更好的性能。此外，使用CSS壓縮器可以幫助減小CSS的文件大小，從而加快加載時間。

學習高級CSS的一些資源是什麼？

有很多在線資源可以學習高級CSS，包括在線教程、編碼挑戰和文檔。 CSS-Tricks、MDN Web Docs和Smashing Magazine等網站提供關於各種CSS主題的深入文章和指南。此外，關注行業專家並加入CSS社區可以提供寶貴的見解和學習機會。

如何調試CSS問題？

可以使用瀏覽器的開發者工具來調試CSS問題，這些工具允許您檢查元素、查看應用的樣式以及實時試驗不同的樣式。此外，了解CSS級聯、特異性和繼承可以幫助您理解為什麼某些樣式沒有按預期應用。

如何保持CSS井然有序且易於維護？

可以通過遵循一致的命名約定、使用註釋來描述您的代碼以及將CSS組織成邏輯部分或單獨的文件來保持CSS井然有序且易於維護。此外，使用CSS預處理器可以幫助管理大型CSS文件並使您的代碼更易於維護。

CSS在Web開發中的作用是什麼？

CSS通過控製網站的外觀和感覺在Web開發中發揮著至關重要的作用。它允許您將樣式應用於HTML元素，創建響應式設計，甚至創建動畫和過渡。如果沒有CSS，網頁將是普通且無樣式的，這使得它成為任何Web開發人員的重要工具。

以上是5個項目，以幫助您掌握現代CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！