( 0

zation · Jan 18, 2015 · 6b686f1 · 6b686f1
1 parent 8efb3c4
commit 6b686f1
Show file tree

Hide file tree

Showing 70 changed files with 2,616 additions and 956 deletions.
diff --git a/2012.html b/2012.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -128,7 +128,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2012/12.html b/2012/12.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -128,7 +128,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2012/12/31.html b/2012/12/31.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -128,7 +128,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2012/12/31/summary_of_2012.html b/2012/12/31/summary_of_2012.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -191,7 +191,7 @@ <h3>2013</h3>
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2013.html b/2013.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -132,7 +132,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2013/01.html b/2013/01.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -132,7 +132,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2013/01/07.html b/2013/01/07.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -128,7 +128,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2013/01/07/sass_compass_best_practices_1.html b/2013/01/07/sass_compass_best_practices_1.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -113,8 +113,7 @@ <h2>——组织结构</h2>
 <h3>CSS代码组织的问题</h3>
 
 <p>我们在写程序的时候，总是希望可以清楚的了解模块之间的依赖，这样可以方便程序人员理解代码，也方便监控我们的依赖不要过多。假设我们页面的CSS代码已经根据组件和功能划分为不同的模块和CSS文件，其中还有一些第三方的CSS库（reset）：</p>
-
-<pre><code>style/
+<pre class="highlight text">style/
     reset.css
     layout.css
     menu.css
@@ -123,11 +122,9 @@ <h3>CSS代码组织的问题</h3>
         form.css
         button.css
         input.css
-</code></pre>
-
+</pre>
 <p>相对应的页面<code>header</code>就会有如下的引用：</p>
-
-<pre><code>&lt;header&gt;
+<pre class="highlight text">&lt;header&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;style/reset.css&quot;/&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;style/layout.css&quot;/&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;style/menu.css&quot;/&gt;
@@ -136,16 +133,14 @@ <h3>CSS代码组织的问题</h3>
     &lt;link rel=&quot;stylesheet&quot; href=&quot;style/form/button.css&quot;/&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;style/form/input.css&quot;/&gt;
 &lt;/header&gt;
-</code></pre>
-
+</pre>
 <p>这样我们所有的依赖都在HTML中，不利于我们快速的看到样式之间的依赖，也会产生很多额外的HTTP请求，降低页面性能。我们也可以使用<code>@import</code>在CSS文件内部管理引用，但这同样会产生额外的HTTP请求。</p>
 
 <h3>利用<code>@import</code>管理代码</h3>
 
 <p>当我们希望在CSS代码中就管理所有依赖，并且不会产生额外的request时，就应该用到Sass了。
 下面我们看看如果使用了Sass应该是什么样子的：</p>
-
-<pre><code>style/
+<pre class="highlight text">style/
     screen.scss
     _reset.scss
     _layout.scss
@@ -155,34 +150,27 @@ <h3>利用<code>@import</code>管理代码</h3>
         _form.scss
         _button.scss
         _input.scss
-</code></pre>
-
+</pre>
 <p>在<code>_form.scss</code>中，我们将管理所有的表单及表单控件的样式：</p>
-
-<pre><code>@import &quot;button&quot;;
+<pre class="highlight text">@import &quot;button&quot;;
 @import &quot;input&quot;;
 
 form {
     ⋯⋯
 }
-</code></pre>
-
+</pre>
 <p>在<code>screen.scss</code>中，我们将管理所有页面样式的依赖：</p>
-
-<pre><code>@import &quot;reset&quot;;
+<pre class="highlight text">@import &quot;reset&quot;;
 @import &quot;layout&quot;;
 @import &quot;menu&quot;;
 @import &quot;document&quot;;
 @import &quot;form&quot;;
-</code></pre>
-
+</pre>
 <p>其中文件名前面的下划线是告诉Sass该文件只是一个模块，不用单独生成css文件，所以最后生成的css文件只有一个：<code>screen.css</code>，于是我们只需要一个request就可以引入所有的css文件，写起来也非常方便：</p>
-
-<pre><code>&lt;header&gt;
+<pre class="highlight text">&lt;header&gt;
     &lt;link rel=&quot;stylesheet&quot; href=&quot;style/screen.css&quot;/&gt;
 &lt;/header&gt;
-</code></pre>
-
+</pre>
 <p>可能有人会担心这样调试起来会不会很麻烦？但其实如果我们使用Chrome的inspection，我们根本不必接触源代码就可以很好的调试了。</p>
 
 <p>同时，Compass已经提供了丰富的CSS库，其中包括了rese，所以我们可以直接删除<code>_reset.scss</code>，只在<code>screen.scss</code>中引入就可以了。</p>
@@ -254,7 +242,7 @@ <h3>最佳实践和注意</h3>
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2013/01/09.html b/2013/01/09.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -128,7 +128,7 @@ <h1>Archive for
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/2013/01/09/sass_compass_best_practices_2.html b/2013/01/09/sass_compass_best_practices_2.html
@@ -8,7 +8,7 @@
   <meta name="description"
   content="经历过各种技术和职位，最终发现前端开发才是我的归宿，现为ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。">
 
-  <link href="/stylesheets/main.css?1401972436" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/main.css?1421599046" media="screen" rel="stylesheet" type="text/css" />
   <link href="/images/favicon.png?1401972413" rel="icon" type="image/png" />
   <!--[if lt IE 9]>
     <script src="/javascripts/html5shiv-printshiv.js?1401972413" type="text/javascript"></script>
@@ -111,8 +111,7 @@ <h2>——简化代码</h2>
 <h3>简化兼容性代码</h3>
 
 <p>当我们在用CSS实现渐变效果时，为了浏览器的兼容性，我们常常会用以下写法：</p>
-
-<pre><code>/* FF3.6+ */
+<pre class="highlight text">/* FF3.6+ */
 background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
 /* Chrome,Safari4+ */ 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); 
@@ -126,20 +125,16 @@ <h3>简化兼容性代码</h3>
 background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
 /* IE6-9 */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#1e5799&#39;, endColorstr=&#39;#7db9e8&#39;,GradientType=0 ); 
-</code></pre>
-
+</pre>
 <p>一个简单的渐变，就为了兼容性，变成了超过10行的CSS代码，并且让我们维护起来非常麻烦，一旦有任何修改，我们都必须改7个地方⋯⋯好在Compass为我们提供了解决方案，我们只需要一行代码就可以：</p>
-
-<pre><code>@include background-image(linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)); 
-</code></pre>
-
+<pre class="highlight text">@include background-image(linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)); 
+</pre>
 <p>类似的功能可以用在box-shadow：<code>@include box-shadow(red 2px 2px 10px);</code>、inline-block：<code>@include inline-block</code>、border-radius：<code>@include border-radius(25px);</code>⋯⋯等等</p>
 
 <h3>适当的使用nest</h3>
 
 <p>在CSS中我们常常需要限制样式的作用范围，例如：</p>
-
-<pre><code>.container {
+<pre class="highlight text">.container {
     ⋯⋯
 }
 .container .article {
@@ -154,8 +149,7 @@ <h3>适当的使用nest</h3>
 .container .article .link {
     ⋯⋯
 }
-</code></pre>
-
+</pre>
 <p>这样书写在CSS中没有问题，但是重复的书写<code>.container</code>和<code>.article</code>总会让人感到厌倦，并且使同一部分的样式很容易散落在各处，不容易管理。这时候我们就可以使用nest了，它可以帮助我们：</p>
 
 <ul>
@@ -164,8 +158,7 @@ <h3>适当的使用nest</h3>
 </ul>
 
 <p>下面我们来看看使用nest以后的代码：</p>
-
-<pre><code>.container {
+<pre class="highlight text">.container {
     ⋯⋯
     .article {
         ⋯⋯
@@ -180,11 +173,9 @@ <h3>适当的使用nest</h3>
         }
     }
 }
-</code></pre>
-
+</pre>
 <p>但是切忌不要过分的使用nest，如下：</p>
-
-<pre><code>.container {
+<pre class="highlight text">.container {
     ⋯⋯
     .article {
         ⋯⋯
@@ -199,11 +190,9 @@ <h3>适当的使用nest</h3>
         }       
     }
 }
-</code></pre>
-
+</pre>
 <p>它会使最后生成出这样的CSS：</p>
-
-<pre><code>.container {
+<pre class="highlight text">.container {
     ⋯⋯
 }
 .container .article {
@@ -218,27 +207,23 @@ <h3>适当的使用nest</h3>
 .container .article .content .paragraph .link {
     ⋯⋯
 }
-</code></pre>
-
+</pre>
 <p>我们看到最后生成的CSS甚至出现了5层selector，一般CSS中出现3层selector已经是比较多了，因为太多的selector会使CSS文件变得冗余，可读性也会变差，而且很难被复用。当你真的需要这么多selector才能完成需求的话，那么你应该反思你的HTML结构是否出现了问题？</p>
 
 <h3>谨慎的使用@extend</h3>
 
 <p><code>@extend</code>可以使我们很方便的复用其他元素的样式，假如我们现在有如下的CSS：</p>
-
-<pre><code>h1, h2 {
+<pre class="highlight text">h1, h2 {
     font-family: Arial;
     font-size: 38px;
     color: #222;
 }
 h2 {
     font-size: 24px;
 }
-</code></pre>
-
+</pre>
 <p>我们可以使用<code>@extend</code>使代码看起来依赖关系更清晰，并且稍微简单一些（但它实际生成的CSS代码与前相同）：</p>
-
-<pre><code>h1 {
+<pre class="highlight text">h1 {
     font-family: Arial;
     font-size: 38px;
     color: #222;
@@ -247,8 +232,7 @@ <h3>谨慎的使用@extend</h3>
     @extend h1;
     font-size: 24px;
 }
-</code></pre>
-
+</pre>
 <p>它有些类似于<code>@mixin</code>，不同在于它自身也是CSS，会被页面直接用到。它的目的在于消除重复，并且使依赖关系更加清晰。但是在使用的时候一定要谨慎，因为一个<code>@extend</code>可以很方便的复用代码，人们往往直接这么一用，也不管是否被复用的所有样式都是需要的，也不管最终生成的CSS是否有冗余。所以我们在使用它的时候请先想想一下问题：</p>
 
 <ul>
@@ -313,7 +297,7 @@ <h3>谨慎的使用@extend</h3>
 </ul>
     </div>
   </footer>
-  <script src="/javascripts/main.js?1418545548" type="text/javascript"></script>
+  <script src="/javascripts/main.js?1421599046" type="text/javascript"></script>
   <script type="text/javascript">
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),