web前端开发【连载3】-SEO和less框架
先安利我最近看的一部电视剧吧：《鸡毛飞上天》，讲浙江义乌小商品市场怎么发展起来的故事，以小积大呀，所以我们的基础一定要学扎实了。
一分钱撑死人，一毛钱饿死人。 ---金水叔
傻球也喜欢看呢.jpg
SEO基本常识
SEO是Search Engine Optimization的缩写， 翻译成中文就是“搜索引擎优化"。就是通过一定的方法在网站内外发布文章、交换连接等，最终达到某个关键词在搜索引擎上获得好的排名。在很多行业SEO是一个专门的职业，从关键字、文案等方面提高网站的搜索率。
但是从前端开发着手，怎么样才能优化SEO呢：
- 合理使用title, description, keywords
<title>
<meta name="description" content="...">
<meta name="keywords" content="...">
- html语义化
有人会有疑问，既然css能实现所有的效果，那为什么还要有各种<strong>之类的标签出现呢？语义化的html可以让开发者更容易看懂每一块代码的含义及其侧重点，同时，对于SEO优化也有帮助。网络爬虫在搜索的过程中会按着html语义去侧重搜索，标准的符合W3C规范html能让网络爬虫更好的理解，从而提高网站的SEO优化水平。 - 尽量不要使用iframe
对于前端开发来说，ifame已经是很久之前的技术了，现阶段应该很少有前端开发者使用ifame（当然，在后台框架搭建中还是会使用到）。ifame退出前端舞台的理由我想应该就有一点，web中使用ifame，ifame中的内容网络爬虫是搜索不到的，所以对于ifame页面来说基本不存在SEO优化。建议前端开发中少用。 - js输出
对于网站中一些重要的文字或内容最好不要使用js输出生成html展现，因为网络爬虫对web中的js只会视而不见，所以用js输出过多的内容会让网站的SEO优化水平降低，建议重要的信息不要用js输出。 - 图片一定要加上alt属性
alt属性一般应用在<img>标签里，当图片无法正常加载时，alt属性设置的值就会显示出来作为解释文本。对于前端开发人员来说总感觉这个属性有点鸡肋，因为在开发过程中基本看不到这个属性的效果（PS：开发过程中一般情况都不会有加载图片失败的情况）。不过要注意，该加的属性还是要加上去的，网络爬虫是识别不了图片的，不管你的图片怎么炫怎么酷，在网络爬虫眼里终究只是一段code而已，而<img>标签的alt属性在网络爬虫眼里就是图片的标志。 - 常备404页面
做好404页面，并测试其返回状态码为404。 - 合理使用h1-h6标签
每个页要只能出现一次H1标签，H2~H6标签可以多次，这样做是为了加重H1标签的权重。 - 面包屑导航
除首页外别的页面可以加上面包屑型路径，导航一定要清晰。
PS：常用SEO搜索引擎优化工具
CSS组件框架编写以及预处理器less框架的使用
- CSS组件框架就是将相同样式的模块定义成一个相同的class名字，将class的样式写好之后，后面再要用相同的样式，直接在对应的dom中定义class名字就可以了，bootstrap的基本思想就是这样的。
- css的less框架是在css中用变量的思想进行定义，作为CSS的扩展，Less不仅向后兼容CSS，而且增加了额外的功能。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
####### LESS 原理及使用方式
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：
清单style.less 文件
@color: #4D926F;
#header { color: @color; }
h2 { color: @color; }
经过编译生成的 CSS 文件如下：
#header { color: #4D926F; }
h2 { color: #4D926F; }
LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。
####### 执行方式-客户端(认为最方便的方法)
我们可以直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org/#download-options下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：
<script type="text/javascript" src="common/less.min.js"> </script>
LESS 源文件的引入方式与标准 CSS 文件引入方式一样：
<link rel="stylesheet/less" type="text/css" href="common/style.less">
需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的测试网站</title>
<link rel="stylesheet/less" type="text/css" href="common/style.less">
<script type="text/javascript" src="common/less.min.js"> </script>
</head>
<body>
<div id="header">head</div>
<h2>Less test<h2>
</body>
####### 执行方式-服务器端(未在本机测试)
- LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
- 在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：
@import “variables.less”;
.less 文件也可以省略后缀名，像这样：@import “variables”;
引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。
####### 使用编译生成的静态 CSS 文件(未在本机测试)
我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。
####### 语法
<b>A. 变量</b>
LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
我们可以从下面的代码了解变量的使用及作用：
test1.less 文件
@border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-color;
}
经过编译生成的 CSS 文件如下：
.mythemes tableBorder { border: 1px solid #b5bcc7; }
从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。
该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
test2.less文件
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
经过编译生成的 CSS 文件如下：
#homeDiv #centerDiv { width: 30px; }
#leftDiv { width: 20px; }
<b>B. Mixins（混入）</b>
Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 class 中引入另外一个已经定义的 class，就像在当前 class中增加一个属性一样。
我们先简单看一下 Mixins 在 LESS 中的使用：
test3.less 文件
// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
经过编译生成的 CSS 文件如下：
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：
test4.less 文件
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
经过编译生成的 CSS 文件如下：
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们还可以给 Mixins 的参数定义一人默认值，如
test5.less 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。 @arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
test6.less文件
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
经过编译生成的 CSS 文件如下：
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
test7.less文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用#mynamespace > .user就可以了。
<b>C. 嵌套的规则</b>
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 class 或 id 的方式。在 LESS 中我们可以这样写：
HTML 片段
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
test8.less 文件
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
经过编译生成的 CSS 文件如下：
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
#home #center {
border: outset;
height: 300px;
width: 90%;
}
#home #center #left {
border: outset;
float: left;
width: 40%;
}
#home #center #right {
border: outset;
float: left;
width: 40%;
}
从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
test9.less 文件
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
经过编译生成的 CSS 文件如下：
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
<b>D. 运算及函数</b>
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：
test10.less文件
@init: #111111; @transition: @init*2;
.switchColor { color: @transition; }
经过编译生成的 CSS 文件如下：
.switchColor { color: #222222; }
上面的例子中使用 LESS 的 operation特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%);// return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
PS: 上述代码引自 LESS CSS 官方网站，详情请见 http://lesscss.org/#-color-functions
使用这些函数和 JavaScript 中使用函数一样。
test11.less文件
@init: #f04615;
#body { background-color: fadein(@init, 10%); }
经过编译生成的 CSS 文件如下：
#body { background-color: #f04615; }
从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。
LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出，可以看一下bootstrap的源码，在这方面好像有很好的应用。
<b>E. 注释</b>
适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。
<b>F. LESS VS SASS</b>
同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。
LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法，更多两者之间的比较，请参考这篇帖子：https://gist.github.com/674726。
PS：关于less学习的参考原文：LESS CSS 框架简介
less学习官网：http://lesscss.org/
