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中文网其他相关文章！