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

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

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

關鍵要點

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

1. 使網(wǎng)站更易于打印

訪問您正在處理的網(wǎng)站，并嘗試打?。ɑ虼蛴☆A覽）頁面。您對結果滿意嗎？

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

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

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

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

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

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

2. 將現(xiàn)代CSS主題應用于現(xiàn)有網(wǎng)站

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

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

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

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

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

3. 重新設計表單布局

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

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

CSS Grid允許您消除不必要的標記，并在不使用媒體查詢的情況下創(chuàng)建防彈響應式布局。以下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》）提供了一個完整的教程，該教程提供了一個基于網(wǎng)格的表單布局，以及針對舊版瀏覽器的浮動回退。

4. 提高網(wǎng)站速度

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

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

《Testing Tools》（來自《Jump Start Web Performance》）和《Debugging for UI Responsiveness》（來自《CSS Master》）解釋了如何使用現(xiàn)代瀏覽器開發(fā)者工具來評估性能并發(fā)現(xiàn)優(yōu)化目標。

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

最后，《Jump Start Web Performance》包含數(shù)十個快速、更深入和改變生活的開發(fā)建議，以確保您的網(wǎng)站對每個人都保持快速。

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

以上項目建議可用于改進現(xiàn)有網(wǎng)站，但在從頭開始新項目時沒有限制或約束?？煽紤]的選項：

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

開發(fā)者和瀏覽器工具：

• 《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》）

現(xiàn)在停止閱讀，開始編碼！

關于掌握現(xiàn)代CSS項目的常見問題解答 (FAQ)

掌握現(xiàn)代CSS項目的一些最佳實踐是什么？

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

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

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

使用CSS時遇到的一些常見挑戰(zhàn)是什么？如何克服這些挑戰(zhàn)？

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

如何使用CSS創(chuàng)建響應式設計？

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

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

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

如何優(yōu)化我的CSS以獲得更好的性能？

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

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

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

如何調試CSS問題？

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

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

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

CSS在Web開發(fā)中的作用是什么？

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

以上是5個項目，以幫助您掌握現(xiàn)代CSS的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！