前端练级攻略(第一部分)
|
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 规则只适用于特定的屏幕宽度。 关于媒体查询知识及扩展可以看看以下几篇文章：
实践 HTML 和 CSS 最佳实践 现在你已经掌握了最佳实践，让我们进行测试。下面两个实践的目标是练习编写干净的代码，并观察最佳实践对可读性和可维护性的长期影响。 实践 3 对于实践 3，选择你之前做过的项目，并使用你在这过程所学到的知识来重构你的代码。重构意味着编写代码，使代码更容易阅读，更简单。 能够有效地重构代码是前端开发人员的一项重要技能。 编写高质量代码是一个迭代过程。 CSS体系结构：重构你的 CSS 是重构代码的入门指南。 在重构代码时，有几件事需要问问自己。 * 你的取的类名是否有歧义? 6个月后，你还能理解你的类名是什么意思吗? * 你的 HTML 和 CSS 是语义化的吗?当你浏览你的代码时，你能快速辨别结构和关系的含义吗?
实践 4 最后一个实验把你学到的关于最佳实践的知识运用起来。然而，最佳实践的效果通常不会变得明显，直到你将它们应用到一个更大的项目中。 在最后一个实践中，为自己建立一个作品集网站。作为前端开发者，你的作品集网站是你最重要的数字资产之一。作品集是一个展示你作品的网站。更重要的是，它是一个持续的记录，帮助你跟踪你的进步和发展。所以即使你只有一两件事要展示，也要展示出来。 首先，跟随阿德汉姆·达纳韦的文章 《设计和开发作品集网站站的简单工作流程》 如果你的第一个作品集网站迭代并不完美，那也没关系。作品集网站需要经历许多迭代。还有，重要的是你要用自己的技能来建造它。 与时俱进 虽然 HTML 和 CSS 不会很快过时，但是跟上前端环境的发展是很重要的。 下面是一个网站、博客和论坛的列表，这些网站、博客和论坛阅读起来既有趣且信息丰富。
通过例子学习 最后，最好的学习方法是以身作则。这里有一套样式指南和编码规范，将教你如何成为一个更有效的前端。 （编辑：辽源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |