前端练级攻略(第一部分)(2)

CS S预处理程序是 CSS 语言扩展，它添加了一些额外的功能，比如变量、混合和继承。两个主要的CSS预处理程序是 Sass 和 Less。2016 年，Sass的使用范围更加广泛。Bootstrap是 一种流行的响应式 CSS 框架，它也正在从 Less 转换到 Sass。而且，当大多数人谈论 Sass时，他们实际上是在谈论 SCSS。

CSS 后处理器在由预处理器手写或编译后对 CSS 应用更改。 例如，PostCSS 等一些后处理器具有自动添加浏览器供应商前缀的插件。

当您第一次得知有 CSS预处理器和后处理器时，你很有可能在任何地方已经使用它们。 但是，从简单开始，仅在必要时添加变量和 mixin 等扩展。 我之前建议的文章，Medium’s CSS is actually pretty f*ing good，也涵盖了预处理器相关的知识。

网格系统和响应能力

网格系统是CSS结构，它允许你水平和垂直地堆叠元素。

Bootstrap，Skeleton 和 Foundation 等网格框架提供了管理布局中行和列的样式表。 虽然网格框架很有用，但了解网格的工作原理也很重要。 理解CSS网格系统 和 Don’t Overthink Grids 这两篇文章是很好的概述。

网格系统的主要目的之一是为你的网站添加响应性。响应性意味着你的网站根据窗口宽度调整大小。很多时候，响应是通过使用 CSS 媒体查询实现的，CSS 规则只适用于特定的屏幕宽度。

关于媒体查询知识及扩展可以看看以下几篇文章：

•  Intro to Media Queries
•  mobile-first
•  An Introduction to Mobile-First Media Queries

实践 HTML 和 CSS 最佳实践

现在你已经掌握了最佳实践，让我们进行测试。下面两个实践的目标是练习编写干净的代码，并观察最佳实践对可读性和可维护性的长期影响。

实践 3

对于实践 3，选择你之前做过的项目，并使用你在这过程所学到的知识来重构你的代码。重构意味着编写代码，使代码更容易阅读，更简单。

能够有效地重构代码是前端开发人员的一项重要技能。 编写高质量代码是一个迭代过程。 CSS体系结构：重构你的 CSS 是重构代码的入门指南。

在重构代码时，有几件事需要问问自己。

*　你的取的类名是否有歧义?　6个月后，你还能理解你的类名是什么意思吗?

*　你的 HTML 和 CSS 是语义化的吗?当你浏览你的代码时，你能快速辨别结构和关系的含义吗?

•  你是否在代码中反复使用相同的十六进制颜色代码? 将它重构为一个 Sass变量 是否更有意义?
•  你的代码在 Safari 和 Chrome 上运行得一样的吗?
•  你是否可以用类似于 Skeleton 的网格系统替换一些布局代码?
•  你经常使用 !important 标志吗?你怎么解决这个问题?

实践 4

最后一个实验把你学到的关于最佳实践的知识运用起来。然而，最佳实践的效果通常不会变得明显，直到你将它们应用到一个更大的项目中。

在最后一个实践中，为自己建立一个作品集网站。作为前端开发者，你的作品集网站是你最重要的数字资产之一。作品集是一个展示你作品的网站。更重要的是，它是一个持续的记录，帮助你跟踪你的进步和发展。所以即使你只有一两件事要展示，也要展示出来。

首先，跟随阿德汉姆·达纳韦的文章 《设计和开发作品集网站站的简单工作流程》

如果你的第一个作品集网站迭代并不完美，那也没关系。作品集网站需要经历许多迭代。还有，重要的是你要用自己的技能来建造它。

与时俱进

虽然 HTML 和 CSS 不会很快过时，但是跟上前端环境的发展是很重要的。

下面是一个网站、博客和论坛的列表，这些网站、博客和论坛阅读起来既有趣且信息丰富。

•  CSSTricks
•  Smashing Magazine
•  Designer News
•  Nettuts+
•  CSS Wizard

通过例子学习

最后，最好的学习方法是以身作则。这里有一套样式指南和编码规范，将教你如何成为一个更有效的前端。

（编辑：ASP站长网）