专栏首页BestSDK前端修仙之路:从“路人”到大神,走对这几步很重要

前端修仙之路:从“路人”到大神,走对这几步很重要

HTML 与 CSS基础

前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式与布局。

首先从HTML 以及 CSS 开始,这里推荐的是MDN的官方指南。MDN对于重要的HTML与CSS内容进行了详细条理的阐述,除此之外,每一章都是单独的一页,提供了在CodePen与JSFiddle展示的Demo。

看完了这些基础教程之后,可以来看看由CodeAcademy提供的tMake a Website系列课程。这个课程只要几个小时就能看完,如果你想要更多的锻炼,可以瞅瞅CSS Diner,这是一个CSS挑战的小游戏。

最后,可以看看怎么使用 Google Fonts,参考下 CSSTricks出的Basics of Google Font API。

国内用不了Google Fonts的话可以参考下FontAwesome,如果你要用中文字体的话建议参考FontSpider,请自行Github搜索。

Typography–排版也是个构建界面时候很重要的部分,有时间的话推荐你看看Donny Truong写的Professional Web Typography这本书,它会教你基本上关于排版的所有东西。在学习这些的时候不要太担心自己会忘了,反正记不住。你应该着重于记录这些并且理解HTML和CSS是怎么工作的。

Practicing HTML and CSS Basics

到这里你应该已经明白了HTML与CSS的基本使用,下面我们要学以致用了。这一部分就设计了两个小实验来让你自己动手构建网站与界面。我是把它们形容成实验,所以不要害怕失败。

第一个实验里,我们用的是CodePen,一个在线的HTML与CSS实验台。同时也提供了实时预览功能,一石二鸟呦。好了,下面我们要看看我们做的界面的原型了,转到 Dribbble吧, 这嘎达可全是设计创意啊。

我是看上了这个系列:1, 2, 3, 4, 以及 5.。我选择了一个移动优先的设计是因为与桌面设计相比更简单一点,不过你也可以自己找一个。

在你选定了设计之后,就可以在CodePen上面开始动手了。你也可以看看其他人设计的Pen: pens on CodePen点击预览. 另外,别忘了StackOverflow ,这可是你的小伙伴呦。如果你最后实现的东西跟设计相去甚远,也不要灰心,不断尝试总会提高的。

Experiment 2

经过实验一估计你已经有点自信了,在实验二里面我们将会先借鉴一些大公司的经典站点。有不少站点会用一些CSS框架或者混淆它们的CSS类名,这会让源代码的阅读比较麻烦,这嘎达我列举了几个源代码可读性比较好的:

  • Dropbox for Business: Try replicating their hero section
  • AirBnB: Try replicating their footer
  • PayPal: Try replicating their navigation bar
  • Invision: Try replicating their signup section at the bottom of the page
  • Stripe: Try replicating their payments section

再次强调下,实验二的目的并不是让你去重构整个页面,而是知道怎么去分割组件以及人家是怎么做的。如果你没有设计的背景,可能你要好好发掘下你的潜能了。一个优秀的前端开发者要能够辨别好的设计然后完美地重现它们。

你可以选择在线编程:CodePen 或者直接本地开发。如果你选择本地做,那你可以使用这个 模板项目 。我推荐是使用Atom 或者Sublime这样的编辑器。另外,对于Firefox或者Chrome自带的控制台与开发者工具也要好好瞅瞅。

HTML and CSS Best Practices

好了,现在你已经能够用HTML与CSS做一些简单的事情了,下面就要看看所谓的最佳实践了。最佳实践实际上就是一系列的在日常开发中总结出来的约定俗成的规范的集合,来让你更快地开发与构建更高质量的代码。

Semantic Markup:语义标记

HTML与CSS最佳实践中重要的一条就是怎么来写出有语义可读性的标记。好的语义即是你使用了合适的HTML标签与CSS的类名来传达出你想表达的结构含义。

譬如 h1 标签会告诉我们里面包裹的是一些很重要的标题信息,另一个例子就是footer 标签,会直截了当地跟你说,这里面是包含一些页脚信息。建议你阅读 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。

CSS Naming Conventions

下面一个比较重要的事情就是怎么给你的CSS定一个合适的类名。好的命名习惯,譬如语义化的标记,可以更好地传达含义,让代码的可读性与可维护性大大增加。

总体来说,我的建议是跟着你的直觉来确定命名习惯,随着时间的发展你会觉得这样看上去很舒服。如果你要看看大公司,譬如Medium是怎么实践BEM这样的命名规范的,可以阅读 Medium’s CSS is actually pretty f***ing good这篇文章,在这里你会学到怎么在一个快速迭代地情况下也维护你的有效地CSS命名习惯。

CSS Reset

不同的浏览器在譬如margin以及line-height这些小的样式点之间存在着一些不一致性,因此你要学会重置你的CSS环境。 MeyerWeb 就是一个常见的重置手段。

Cross Browser Support

跨浏览器支持意味着你的代码要去支持绝大部分的现代浏览器,一些常见的CSS属性,譬如 transition 需要 vendor prefixes 来运行在不同的浏览器中。你可以在 CSS Vendor Prefixes这篇文章里获取更多的知识。这就意味着你需要花费更多的时间来在不同的浏览器之间进行测试。

翻开CSS的历史,自90年代以来,CSS走过了一段漫长而崎岖的道路。整个UI系统变得日益繁复,人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。CSS的预处理器或者CSS语言的扩展会在无声无息之间提供类似于变量、Mixins以及继承这些特性。最主要的两个CSS的预处理器就是Sass 与 Less。2016年中Sass被越发广泛地使用,著名的响应式框架BootStrap就是从Less迁移到了Sass。另外,很多人谈到SASS的时候也会提到Scss。

CSS后处理器则对于手写的CSS文件或者经过预编译的CSS文件进行一些处理,以著名的PostCSS 为例,它有一个插件可以帮你自动地添加一些渲染前缀。

当你接触过CSS的预处理与后处理器之后,你会把它们提升到日常伴侣的。不过,过犹不及,像变量和Mixins这些特性不能滥用啊,还是应该在合适的地方使用。

Grid Systems and Responsiveness

网格系统即是用来水平或者垂直地排布元素的CSS架构。

著名的网格框架有Bootstrap, Skeleton, 以及 Foundation,它们提供了用于在布局中进行行列管理的样式表。这些框架用起来很方便,不过我们也是要理解网格的工作原理,推荐看Understanding CSS Grid Systems 以及 Don’t Overthink Grids。

网格系统另一个目标就是是你的网站具有响应式特性。响应式意味着你的网站可以根据屏幕的大小来动态调整你网站大小与布局。很多时候这个响应式特性都是基于CSS media queries, 即根据不同的屏幕大小选用不同的CSS样式规则。

另外,因为我们正在进行一场所谓mobile-first变革,推荐你看下An Introduction to Mobile-First Media Queries。

Practicing HTML and CSS Best Practices

恭喜道友,筑基成功,你已经能够了解一些关于HTML与CSS的最佳实践了,下面又到了学以致用的时间。这里的两个实验主要是让你锻炼下编写整洁的代码和保证长期的可读性与可维护性。

Experiment 3

实验3中,你需要选一个你之前自己做的项目并且用上文中提及的最佳实践去重构它们,从而保证你的代码更易读并且更简洁。掌握如何有效地重构代码是前端开发者的一个重要技能。当然,写出高质量的代码并非一蹴而就,而是需要一个长期的迭代过程,CSS Architectures: Refactor Your CSS这篇文章就是一个不错的学习起点。

当你决定要重构代码之前,你要先扪心自问以下几点:

  • 你的类名定义是不是模糊不清的,6个月之后你还能否明白你类名的意义。
  • 你的HTML与CSS是否足够语义化,一眼望去是否就能明白你的代码架构与关系意义?
  • 你是否N次的重复使用了相同的颜色代码,别忘了可以用Sass variable。
  • 你的代码是否能够在Safari与Chrome都能正常运行?
  • 能否用像Skeleton这样的网格框架来代替你自己的布局?
  • 你是不是经常使用了!important ?

Experiment 4

最后一个实验是一个大杂烩,把前面讲的所有知识都混杂起来。不过要知道的是,上面讲的很多最佳实践在一个草稿或者小型项目里难见分晓,只有在大项目里才能显露峥嵘。

因此,最后一个项目我是建议建立一个自己的作品剪辑网站,作为一个前端开发者,个人网站就是自己的电子名片。这里会展示你的作品与项目的积累,也是一个回溯你发展的进程与开发履历的地方。

可以参考Adham Dannaway的文章 My (Simple) Workflow To Design And Develop A Portfolio Website来从零开始。

Stay current

当HTML与CSS已经是小菜一碟,你就算是进入了前端开发者的殿堂,一个不断发生改变的地方。

本文分享自微信公众号 - BestSDK(bestsdk)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-10-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 年薪30万的前端面试题,你能答对几道?|附答案

    HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

    BestSDK
  • 体现细节设计?先从APP密码输入框开始吧

    密码输入框在网页设计和APP设计中随处可见,相信每一位产品经理都思考且设计过相关的模块。 ? (图左:电脑网页上的密码输入框 图右:手机APP上的密码...

    BestSDK
  • 物联网、云计算、大数据、人工智能怎么区分?

    一、物联网   1、什么是物联网?   物联网在之前被定义为通过射频识别(RFID)、红外线感应器、全球定位系统、激光扫描器、气体感应器等信息传感设备按约定的协...

    BestSDK
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅
  • 7 个开放式 CSS 面试题及回答策略 [每日前端夜话0x2E]

    这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。

    疯狂的技术宅
  • CSS模块化的演进

    ? | 导语 CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升...

    腾讯NEXT学位
  • 什么是CSS预处理器

    小胖
  • awesome-css-cn命名习惯和方式参考其他资源原文链接

    CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

    琯琯
  • 前端开发,从草根到英雄(第一部分)

    我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

    用户1667431
  • 2017年最佳的20款css工具

    1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券