练习，背景图片开发慕课网右下角工具条

标签：

前几天学的慕课的一个课程，侧栏工具条开发。这门课程主要的学习价值：

1. 讲解的案例场景很实用，用到的技术点也较多，主要有css精灵，background-position，css transition，requirejs，sass，图标字体等；

2. 原理分析彻底，html结构清晰，sass逻辑合理，最重要的是在讲解过程中体现出的工作方法和工作态度，都能看出讲师的一些优秀的职业素质；

这门课的练习价值：

1. 掌握以上提到的知识点。

2. 看看在这个过程中会有哪些思考总结。

今天实现的方式是第一种，背景图片的方法。实现不难。

html结构:

<div class="toolbar-contaienr">
		<a href="javascript:;" class="toolbar-item toolbar-item-wexin">
			<span></span>
		</a>
		<a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
		<a href="javascript:;" class="toolbar-item toolbar-item-app">
			<span></span>
		</a>
		<a href="javascript:;" class="toolbar-item toolbar-item-backtop"></a>
	</div>

1. a元素除了toolbar-item这个公共类之外，独有的那个类，如toolbar-item-wexin，该不该加toolbar-item这个前缀。结论是应该加，原因还是为了避免命名冲突，比如很有可能还存在有另外一个css类也叫app，但是这里的app并不想从那个类里面继承样式；

2. span元素该不该加css类。加的话好像语义更清晰了。实际上并不是这样，加了的话就会导致一个文件html代码增多了，而且用css的语义污染了html的语义，注意css的语义只是人为牵强附会的，搜索引擎不认，这里之所以不加的最大原因是因为从这个组件来看，span内部甚至，a元素内部再也没有其他多余元素了。

css: 课程里面用的是sass，好像现在less用的多，我改成less了，基本上差不多，不过在写less的过程中我也发现一些问题：

1. 什么样的东西该抽出来成为变量？

如果说为了灵活性，less里面每个属性值都应该抽出来，定义成变量，方便以后维护，但是这样的话与直接写死在属性规则里面有什么区别，代码量还是很大，而且为了保证这些变量没有命名冲突，还得把名字起的很长。。。我擦。。。所以到底哪些该抽，结论是：

a. 有2处以上属性规则都用到的时候，比如toolbar的宽度以及toolbar里面每个item的宽度，这个在定义的时候肯定需要定义成变量。

b. url里面的一些路径前缀，这个是很有必要的，万一前期文件夹规划不合理，往往都后面都不方便改了。。

暂时只遇到这两个。

哪些没必要？

a. 比如定位的时候，距离父元素的上下左右多少个像素这种，这种往往是根据设计来的，设计变了，你就得变了，你做灵活了，也达不到重用的价值，而且这种地方太多了，都定义的话会增加less的代码量跟复杂度

b. margin padding这些，如果不是框架级别的组件而且还没有重用的话，就别整那么多变量了

c. transition等一些属性相关的时间，变化函数等等，这些影响的是效果，效果出来了就OK了，设置成灵活的没用。

（收）。

练习，背景图片开发慕课网右下角工具条

标签：

原文地址：http://my.oschina.net/lyzg/blog/487278