我们知道，css文件引入方式有两种：
1. HTML中使用link标签

<link rel="stylesheet" href="style.css" />

1. CSS中@import

@import "style.css";

第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发工程师所忽略。这篇文章就详细解剖之。

语法

@import语法有两种：

@import "style.css";
@import url("style.css");

这两种语法并没什么差别。

规则

MDN中这么描述@import：

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

注意到加粗的部分么——import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：

index.html

<style type="text/css">
  .hd{
    color: orange;
  }
  @import "import.css";
</style>
...
<p class="hd">我是什么颜色</p>

import.css

  .hd{
    color: blue;
  }

测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：

<style type="text/css">
  @import "import.css";
  .hd{
    color: orange;
  }
</style>
...
<p class="hd">我是什么颜色</p>

这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。

媒体查询

@import和link一样，同样可以定义媒体查询(media queries)，我们先看看link定义的方式：

<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

接下来是@import：

@import url("print.css") print;
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import url('mobile.css') (max-width: 680px);

这里要注意的是，不论是link还是import方式，会下载所有css文件，然后根据媒体去应用css样式，而不是根据媒体去选择性下载css文件。

不要使用@import

这。。坑爹呢，看了一大堆，结果告诉我不要使用！
这也只是个建议，因为import的确会带来一些问题，所以网络上会有各种「抵制@import」的文章，既然设计了@import，总有它的有用之处，不能过于绝对。使用@import影响页面性能的地方主要体现在两个方面：

1. 影响浏览器的并行下载
2. 多个@import导致下载顺序紊乱

具体可以看看高性能网站设计：不要使用@import这篇文章，这里就不多说，看完后记得回来点个赞或收藏：）。

原文链接：How to Learn JavaScript Properly

恰当地学习 JavaScript （适合第一次编程和非 JavaScript 的程序员）

• 持续时间：6 到 8 周
• 前提：无需编程经验

继续下面的课程。

更新（2013年 9月 16日）：

几天前成立了刚刚开始这个路线图的学习小组，所以此时加入他们是个好时机。这个过程里你将会得到很多的支持和鼓励。更多访问下面的链接（由Felicia O’Garro组织）：
CodeCrew JavaScript Study Group

注意下还有个基于 Reddit 的学习小组，其他的大部分小组在记在下面的评论里。但这些小组已经从几个月前就开始了。

这个课程的概要给出了有结构性和启发性的路线图，如何恰当完整地学习 JavaScript 从纯粹的初学者到达到新的阶段.

你确实打算学习 JavaScript，这是在这里的原因，如果你打算开发现代的网站和 Web 应用（包括互联网创业），这是明智的选择。尽管网上有大量教你 JavaScript 的资源，但是找到学习“Web 的语言”最高效和最有益的方法并不容易并且会令人沮丧。

值得注意的是，不像前几年那样，你需要知道真正服务端的语言（例如 PHP，Rails，Java，Python，或者 Perl）才能开发可扩展的，动态的，数据库驱动的（database-driven）Web 应用程序，现在你可以单独使用 JavaScript 做到同样的甚至更好的效果。

不要这样学 JavaScript （How NOT To Learn JavaScript）

• 初学 JavaScript 时，不要尝试那些一小段（bits of）跟 JavaScript 无关或者相关的在线教程。这是学习编程语言最糟糕的方式。无数次地学习这样的教程会有些用，但这个过程效率底下，缺乏彻底学习主旨所需的恰当的层次结构。这导致在开始建立网站和 Web 应用程序时，你会经常不知所措。总之，你不会学到，把这语言当成工具——你的工具来使用的实际知识。

• 此外，有些人会推荐你看《JavaScript 语言精粹》（JavaScript: The Good Parts）来学习 JavaScript，这本书是德高望重的 JavaScript 教父 Douglas Crockford 写的。尽管 Mr. Crockford 在 JavaScript 方面知识渊博，被视为 JavaScript 界的爱因斯坦，但是他的书《JavaScript 语言精粹》对初学者来说用处并不大。这本书没有以透彻清晰和容易理解的方式解释 JavaScript 的核心概念。我推荐你看下 Crockford 的高级视频。不过这本书可以做为高级路线图的一部分。

• 不要尝试只用 Codecademy 来学习这门语言，因为尽管你知道如何编写非常小的 JavaScript 程序片段，却绝对没有学会足够的知识去构建一个 Web 应用程序的。不过我在下面补充的学习资源里推荐 Codecademy 。

这个教程用到的资源 （Resources For This Course）

更新：Reddit 用户 d0gsbody 刚在（4月8日） Reddit 为这个路线图创建了一个学习小组。他和这个小组的成员热心助人并且非常活跃。我推荐你参加这个小组，他们会保持你的积极性和帮助你按自己的方式学习 JavaScript 。自己从头开始学习 JavaScript 是很困难的。这是小组的链接：[Learning JS Properly – Study Group on Reddit.](Learning JS Properly – Study Group on Reddit.)

我们使用两本书的其中一本，一本是对编程初学者来说非常理想的，如果你只有有点编程经验，另一本更好。

你可以使用下面两本书的其中一本：

我个人非常喜欢第一本书，因为作者讲解主题非常棒，涵盖了高级 JavaScript 主题。不过，如果你至少了解一些非常基础的 Web 开发，最好使用这本书。因此，如果你只有点编程或者 Web 开发（不必是 JavaScript） 经验，购买这本书：

• 平装版：JavaScript 高级程序设计

• Kindle 版：JavaScript 高级程序设计

或者：

如果你没有编程经验，购买这本书：

• JavaScript 权威指南

• JavaScript 权威指南

注册一个 Stack Overflow（免费服务）帐号。这是一个程序设计领域的问答网站。这个网站回答你的编程问题比 Codecademy 更加有用，甚至是非常基础，看起来似乎很愚蠢的问题（记住，从来没有愚蠢的问题）。

注册一个 Codecademy 帐号。这是一个在线学习编程的平台：你在网站写代码，浏览器就正确显示结果（这同样也是免费服务）。

JavaScriptIsSexy博客的文章关注对象，闭包（Closures），变量范围，Hoist，函数还有更多。

学成 JavaScript 的路线图

如果要完成整个课程要点，你将会在 6 到 8 周 里学习几乎全部的 JavaScript 语言（还有 jQuery 和一些 HTML5）。如果你没有足够的时间在 6 周内完成全部的章节，学习时间尽力不要超过 8 周。学习的时间越久，你掌握和记住学到的东西就越困难。

第 1 和 2 周（介绍，数据类型，表达式和操作符）

1. 如果你没有很好地了解 HTML 和 CSS，那么就去 Codecademy 完成 Web 基础的历程（Track）。

2. 阅读《JavaScript 权威指南》的前言和第 1、2 章。或者《JavaScript 高级程序设计》的介绍，第 1、2 章。

3. • 非常重要：你在书里碰到的每个代码示例，在 Firefox 或者 Chrome 浏览器的控制台或者 使用JSFiddle敲出来，测试下，做些修改（实验下）。不要使用 Safari。我推荐 Firefox —— 添加上 Firebug 组件来使用它测试和调试你的代码。浏览器的控制台是你写和运行 JavaScript 代码的地方。
   • JSFiddle 是能够让你在线编写和测试代码的 Web 应用，方便在你的浏览器使用。你能测试各种代码，包括 HTML，CSS 和 JavaScript（和 jQuery）的组合。

4. 完成在 Codecademy 上 JavaScript Track（历程）《介绍 JavaScript》章节。

5. 阅读《JavaScript 权威指南》的第 3、4 章。或者《JavaScript 高级程序设计》的前言和第 3、4 章。你可以跳过 位操作（Bitwise Operators）这个章节。几乎在你的 JavaScript 生涯用不到这些知识。再次强调，务必停下来在你的浏览器控制台（或者 JSFiddle）编写示例代码，还有做下实验—— 改变一些变量的值和微调（tweak）一下代码。

6. 阅读《JavaScript 权威指南》的第 5 章。这步不用阅读《JavaScript 高级程序设计》，你已经在这本书的上一节学了这些知识。

7. 完成 Codecademy 上 JavaScript Track（历程）的第 2 到 5 章节。

第 3、4 周（对象，数组，函数，DOM，jQuery）

1. 看我的这篇文章《JavaScript Objects in Detail》。或者《JavaScript 权威指南》的第 6 章，或者《JavaScript 高级程序设计》的第 6 章。注意：只阅读 “理解对象（Understanding Objects）” 章节。这三个里哪个都行，尽管这两本教材深入更多的细节，如果你阅读并完全地理解我的文章，可以自信地跳过额外的细节。

2. 阅读《JavaScript 权威指南》的第 7、8 章，或者阅读《JavaScript 高级程序设计》的第 5 和 7 章。

3. • 此时，你应该花费大量的时间在你的浏览器控制台编写代码，并测试 if-else 语句，for 循环，数组，函数，对象 等等。 你知道（并保持练习）如何独立地（不借用 Codecademy 的帮助）在你的浏览器编写代码。到时你再回到 Codecademy，你应该不需要任何帮助和提示。对你来说每道作业（assignment）都很容易。
   • 如果你仍在 Codecademy 奋斗，则回到你的浏览器并 keep hacking away.这里是你常用到的。这个类似勒布朗·詹姆斯（Lebron James）年轻时在“街上”磨练他的技术，或者类似比尔盖茨在地下室 hacking away。
   • There is tremendous value in your hacking away and learning bit by bit on your own. You have to see the value in this strategy, and you have to embrace it and trust that it will work.
   • 使用 Codecademy 获得的是虚假的成就感
   • Codecademy 最大的问题是太多的提示和小代码片段帮助你，很容易通过练习进步你会获得虚假的成就感。此时你并不了解它，但你大部分正在做的不是靠自己。
   • 现在， Codecademy 仍对你学习如何编写代码提供很大的帮助。尤其是指导你完成小项目和小应用程序的开发过程，通过像 if 语句，for 循环和变量构造的非常基本的代码。

4. 回到 Codecademy 完成 JavaScript track 的 6、7、8 节（(Data Structures （数据结构）到 Object 2（对象））。

5. 当你在 Codecademy，开始构建在Projects track 5个小的基本项目。之后，就完成了 Codecademy。这是件好事，因为你自己实践得越多，学得就越快，为开始自己独立编程准备得就越多。

6. • 阅读《JavaScript 权威指南》的 13，15，16 和 19 章。
   • 或者阅读《JavaScript 高级程序设计》的 8，9，10，11，13 和 14 章。这本书没有涉及到 jQuery，Codecademy 设计到的 jQuery 不充足。参加这个 jQuery 课程，这是免费的 ———— http://try.jquery.com/。
   • 如果你有《JavaScript 权威指南》这本书，阅读第 19 章，更多关于 jQuery 的内容。

7. 在http://try.jquery.com/完成全部的jQuery 课程。

使用终极 JavaScript 编辑器：WebStorm

在你建立第一个项目之前，如果你打算成为 JavaScript 开发者或者经常使用 JavaScript，你现在应该休息下，下载 WebStorm 的试用版。在这里（特别为这个教程而写）学习如何着手。

毫无疑问 WebStorm 绝对是 JavaScript 开发者最棒的编辑器（IDE）。当 30 天的试用期到期之后需要花费 $49.00 美元，但这很可能是你作为 JavaScript 开发者，除了购买这个课程学习 JavaScript 使用的书之外最好的投资。

确保你设置了 WebStorm 使用了 ** JSHint**。 JSHint 是

你的第一个项目 ————— 动态提问（A Dynamic Quiz）

此时，你已经学习足够的知识来构建一个可靠的易管理的 Web 应用。除非你能够成功地构建我在下面描述的应用，否则不要继续。如果你有困惑，在 Stack Overflow 提问并重新阅读书里的章节，完全理解概念。

你正在构建一个 JavaScript 提问应用（你也会用到 HTML 和 CSS），具备的功能如下：

• 这是一个简单的提问，有单选按钮的各种选项（radio button choices），在用户完成之后显示他/她的分数。（it will show the user her score upon completion.）
• 能够显示多种（any number of）问题和多种选择。
• 记录用户的得分，并且在最后的页面显示最后的得分。最后的页面只显示得分，所以把移除最后的问题。（Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.）
• 用一个数组存储所有的问题。每个问题，连同它的选项和正确的答案，应该存储在一个对象里。存储问题的数组应该跟下面的类似：

// Only one question is in this array, 
//but you will add all the questions.
var allQuestions = 
[{question: "Who is Prime Minister of the United Kingdom?", 
choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
correctAnswer:0}];

• 当用户点击“下一个”按钮时，动态地（使用 document.getElementById 或者 jQuery）添加下个问题和从屏幕移除目前的问题。“下一个”按钮是导航此版本的提问（quiz）的唯一导航。
• 你可以在下面的评论里或者最好在 Stack Overflow 寻求帮助。你很有可能在 Stack Overflow 得到一个提示或者准确的回答。

第 5 和 第 6 周（正则表达式，窗口对象（Window Object），事件，jQuery）

1. 
   
   • 阅读《JavaScript 权威指南》的第 10，14，17和 20 章。
   • 或者阅读《JavaScript 高级程序设计》的 20 和 23 章。

2. 记住保持在 Firefox 控制台把示例代码敲出来，并且稍微修改每个片段的代码，做下实验，真正地理解它是怎样工作和做了什么。

3. 这时，你应该觉得 JavaScript 非常舒服，很可能觉得像是绝地武士。你还不是一个绝地武士，必须持续使用你最新学到的知识和技能，尽可能地经常持续学习和提高。

4. 改进之前你的 quiz 程序：
   
   
   • 添加客户端的数据验证（client-side data validation）：确保在进行到下个问题之前，用户回答了每个问题。
   • 添加“返回”按钮，允许用户返回并修改答案，用户能够回到第一个问题。用户已经回答的问题，确保显示单选按钮的选项，这样用户不会被迫再次回答她已经完成的问题。
   • 使用 jQurey 添加 animation（动画），淡出目前的问题，淡入下个问题。
   • 在 IE 8 和 IE 9 测试这个 quiz，修正任何的 bug。这是个很好的锻炼。
   • 在外部的 JSON 文件存储 quiz 问题。
   • 添加用户认证：允许用户登录，并保存他们的登录证书到本地存储器（HTML5 浏览器存储(storage)）。
   • 使用 cookies 记住用户，并当用户回到 quiz 时显示“Welcome，名字”信息。

第 7 周，如果需要到第 8 周（类，继承，更多 HTML5）

1. • 阅读《JavaScript 权威指南》的第 9，18，21 章。
   • 或者阅读我的博客文章 OOP In JavaScript: What You NEED to Know。
   • 或者阅读《JavaScript 高级程序设计》的第 6 章（这次只阅读“对象创建”和“继承”小节） 和 16，22，24 章。注意：在整个路线图里，本书的这个章节是你碰到的技术含量最多的。你自己决定是否打算阅读完这些内容。你应该至少学会原型模式（Prototype Pattern），工厂模式（Factory Pattern）和原型的继承（Prototypal Inheritance），你不必知道所有其他的模式。

2. 进一步改进你的 Quiz 应用：

   • 使用 Twitter Bootstrap为整个页面布局，包括把 quiz 的元素弄得看起来更专业。作为额外的好处（As an added bonus），使用 Twitter Bootstrap 用户界面组件的标签页，展示 4 个不同的提问，一个标签放一个。
   • 学习 Handlebars.js，添加 Handlebars.js 模板到 quiz。你应该不再把 HTML 放进你的 JavaScript 代码里。你的 quiz 一点一点地变得更高级。
   • 保留所有做完 quiz 的用户记录，并显示跟其他测验者相比的得分排名。

3. 稍后（在你学了 Backbone.js 和 Node.js），你将会使用这两种技术重构你的 quiz 代码，使用最新的 JavaScript 框架把同样的 quiz 变成精致（sophisticated)，单页面（single-page）的现代 Web 应用。你可以存储用户的认证证书和得分在一个 MongoDB 数据库里。

4. 下一步：选定构建一个个人项目，开始快速构建你的项目（当你头脑里一切都还是新的时候）。当你困惑时，使用《JavaScript 权威指南》（或者《JavaScript 高级程序设计》，如果你拥有它）作为参考书。当然做个 Stack Overflow 活跃的成员：问问题和回答别人程序员的问题。

继续提高

1. 完整地学习 Backbone.js
2. 学习中级和高级的 JavaScript
3. 阅读我即将完成的文章 Getting Started with Meteor.js
4. 阅读我即将完成的文章 the Three Best Front-end JavaScript Frameworks

鼓励的话

祝你学习一切顺利。永不言弃！当你挣扎并感到无知时（你可能时常如此），总要记住，世界上许多（很可能大部分）其他新手，甚至有经验的程序员都有可能遇到这样的情况。

当你第一次学习编程时，尤其是过了青少年时期（pass your teenage years），刚开始都是很困难的。青少年没有恐惧，没有失去的东西，并且可以在充满热情的东西投入大量的时间。所以对他们来说，只有简短的障碍才会出现挑战。

但是在青少年时期之后，你想快速得到结果，因为没有充足的时间花费大量的时间在看似无关紧要的小事上。但是你必须深入了解这些东西，并且不要泄气。只是继续并坚持这个任务或者寻找 bug 直到搞定它。因为值得的奖励在最后成功的时候等着你 ————编程很有趣并且有利益回报的（lucrative）。

从构建应用程序得到的令人满意的乐趣和热情，是种美妙的感觉，这种感觉必须体会过才能理解。不过更令人满意的是，当你意识到你已经学到了从头开始构建应用程序的技能和知识，就会体会到的认可（empowerment）。

这一刻将会来临，当意识到忍耐所有的困难是值得的，因为你成为了程序员并且你知道作为 JavaScript 开发者的前途是光明的。就像你之前经历过成千上万的：你在最难（toughest）的 bugs，妥协与放弃中存活了，你战胜了退出的找借口。

当你建立了一些东西，即使是微小，小巧玲珑的项目，请随意（Feel free）跟我们分享你的链接。