转载

那些年我干过的矬事

为什么要这个时候自己揭自己的短呢？因为被人指出了一个以前写的页面上面不好的实践方式。觉得干过的类似的事也有一箩筐了，可以小结一下，给大家一个参考。

一、不跟团队规范一致

规范是一个人人在喊，但人人都不太容易遵守的一个东西，因为每个人有着自己的习惯，到不同的团队，和不同的人合作，都会有遇到跟自己习惯不同的东西，这个时候就需要共同遵守一个规范或者大家一起制定出一个规范，不管是自己的文件组织、命名，还是代码的书写方式，交互的实现方式等，都要尽量跟团队一致，因为一定是会有团队协作的，这样会减少很多的沟通成本，提高效率，而且既然它成为了一种规范，某种程度上也是比较好的实践方法，无形中可以提高你的专业水平，养成更好的习惯。

二、习惯使用元素选择器

这里并不是说不能使用，而是不要过多使用（除了reset），虽然大家都觉得命名是个头疼的问题，但仍然建议给元素命一个语义化的类或者ID名，好处在哪里呢？比如常用的a、span、p这些，很多时候，我们使用它们的位置和数量是不可控的，一旦用了元素选择器，又在里面加入了另外的元素，样式不同，怎么办呢？或者，有时候使用了一个标签之后突然觉得并不合适，想改，怎么办呢？为了达到目的，你可能会去采取子选择器，兄弟选择器，css3的nth-child甚至多嵌套一层增加权重等等，这些当然也可以，但经验来讲，这些做法把结构越来越锁死了，哪里都不能动，动一下样式就要重新写，很头疼的问题，所以，不如最开始就不给自己挖坑。简而言之，就是增强代码的可维护性。

当然，出于性能考虑，css选择器的机制是从右往左的遍历式，如果用了元素选择器就会遍历所有同一标签的元素，显然更消耗时间。还有一个常见的不好的实践方式是比如ul.list，这里的ul通常情况下是没必要的，徒增权重。

三、使用较通用的类选择器

这个，是为了不给自己挖坑，也不给别人挖坑，比如title、list、item、mod等，很容易用到的名称，如果在一个地方用到，另一个地方又用到，就很容易产生冲突，你当然可以找理由说你能找到某种方法去避免，但人总会疏忽的，为什么不把它扼杀在萌芽中呢？当然，也不是说这些绝对不能用，有一种方法叫前缀，我们只需要给它们加上一个所在模块的命名前缀，就能一定程度上不踩坑。

四、重复的事情重复做

标题好像有点奇怪，不应该重复做吗？比如，大到我们每个项目都会去建立一些文件夹和文件，小到，我们每次都要为一些效果写兼容代码，经常用到一些浮动相关、水平垂直居中相关、显示/隐藏、溢出隐藏、类似的动画效果等等。其实我们可以通过自己的经验来做一些通用性的文件，每次再需要的时候直接拿过来。或者在同一个项目中，各元素之间我们总能找到共性，那么把它们抽离出来进行归类，既方便统一管理，也方便复用。正所谓，再高效的做事方法也比不上“不用做”~就像有位前辈曾经说的那样“比我聪明的人，我比他更努力，比我努力的人，我比他更聪明。”很多事情，都是有思考改进的空间，可以做得更聪明。

五、不利用继承

这里的继承，可以是大的范畴，也可以小到某个技术，就CSS而言，大家都知道很多东西可以继承，比如font-size、color、line-height等等，很多时候只需要在它们的父容器或者提取出来一个公共类，把这些定义出来，就不用再重复写。并不是简单的省事儿，简化代码，也体现了一定的知识性和思维，全局的规划，模块之间的共性和差异，某种程度上提升了自己写代码的专业素质。

六、不写代码注释

这个其实是很多人不理解的地方，我曾经也很不重视，为什么要写代码注释？我自己写的代码闭着眼睛就能知道哪是哪，有这个想法可能是两种情况：

所做项目代码量很少，需要维护的项目少；
团队协作的地方不多，而且团队整体没有注释意识，大家都习惯了。

其实还是有它的必要性的，清晰的结构和语义化的标签及命名固然必要，但它们肯定比不上注释更能直接的告诉别人你那段代码要做什么，在什么情况下产生什么变化，会有哪些交互。等等，一旦你写了注释，不仅自己什么时候看都能明白，而且别人也能很容易看明白，跟后台开发合作以及会有工作交接的情况，都是很有好处的，有时候还可以利用注释进行搜索定位等，所以不要偷懒。

七、不思考，不规划，拿来就做

很多时候，我们拿来一个页面，通过第一印象看起来就觉得挺简单的，就开始做了，没有对其进行分析，比如：细节方面是否有遗漏，视觉提供的UI元素是否有明显的错误和缺失，怎样实现不会出问题，哪些是页面之间可以共用的模块或者颗粒，哪些图是需要拆开，哪些可以整块处理，哪些可以用代码实现，哪些可以用字体图标，哪些需要合并，哪些是以前做过类似可以复用等等，如果不进行这些规划，在做的过程当中就会不断的遇到问题，然后需要花更多的心思对其进行组织整理，修修补补，效率就会受到影响，完成质量也会相应降低。正所谓“磨刀不误砍柴工”，准备工作要做足。

八、只看视觉稿，不想实际情况

视觉稿还原，这个话题已经被行业提升到一定高度，都在追求毫厘不差的还原视觉稿，觉得那样就是做到了细节的极致，其实很多时候，有两点问题：

提供给我们的视觉稿并不是，也不可能包含所有尺寸和分辨率的设备
视觉稿是静态的，所提供的容器，文字，图片等也都是静态的。

如果我们脑子里有一个声音“严格按照视觉稿”。

那么可能出现什么情况？

图片本身是多大就多大放上去没问题
文字本身是多少就是多少没问题
容器本身是多大就定多大没问题

最终会导致什么问题？

图片溢出
文字溢出
不管屏幕多大，容器、图片、文字都是一样大，不能自适应。

最近几年有个说法，觉得还蛮符合，不是视觉稿还原，而是设计理念还原。我们要去理解需求方要的是什么样的页面，理解设计师想要的效果是怎样的，然后结合我们的经验和专业去让页面在实际使用场景中很好的展现出来。这里的实际场景包括，用户上传的图片，用户输入的文字，所用的设备，所处的网络环境等等。

至于上面那些情况所导致的问题，当然还是要以需求为导向，具体第九条和十一条还会有讲到。

九、只看自己用的浏览器情况，不考虑兼容

兼容现在的范畴会比以前更广了，不同浏览器，不同浏览器版本，不同分辨率，还有微信、手Q等，一般开发者只会使用一种自己熟悉的，有很好开发者工具的，对新特性支持很好的浏览器进行制作和预览效果，这其实是在最大程度上掩盖掉了很多问题，当我们换一个浏览器，或者换一种设备去看的时候，可能一下就惨不忍睹。

个人认为要从哪些方面考虑呢？

对于有不同版本的css属性，兼容性代码要写全，如果需要兼容的版本比较低，那就衡量一下是统一使用兼容性比较好的方案，还是采取判断浏览器使用两种方案。
优先采用不固定布局，比如百分比、父容器内边距，结合浮动和定位等，这些都能让你的布局在不同尺寸的设备上收放自如。
要特别考虑的是有一些特殊要求的网页，比如需要占据整屏的页面，需要定在某个位置的元素，怎样让它做到至少主流机型都正常，布局不会乱。

十、拒绝尝试更好的实践方法和新鲜事物

比如当你习惯了css，是否愿意尝试less、sass、stylus等？当你习惯了px单位，是否愿意尝试em、rem？当你习惯了使用各种工具来处理代码和图片，是否愿意尝试grunt、gulp，当然现在还有webpack、browserify等很多。是否在项目中使用了雪碧图、字体图标甚至更多？是否愿意尝试一些框架的使用，是否愿意去玩一下css的新属性，哪怕还没有浏览器支持（chrome开启实验功能可用的）。当你习惯了dw，是否愿意去尝试notepad++、sublimetext等等这些更轻量，看起来学习成本更高但可能更好用的工具？当你习惯了手写代码，觉得自己的手足够快，那你是否愿意继续去了解一下有哪些快捷操作方法可以免去一次次的鼠标点击和复制粘贴？你试过就知道有多好玩，试过就一发不可收拾~

十一、想省事

不重视沟通，不重视自查，认为没问题。

很多时候，我们看视觉稿，看交互稿（有时候还没有），然后根据自己的经验去判断，去想象页面应该是什么样子，怎样合理，这种情况应该是大多数公司或者团队都有。鉴于每个人的喜好和经验不同，我们想的跟需求方/产品/设计师想的很可能不一样，如果在有疑问或者不确定的时候嫌麻烦不去沟通，可能出现的后果是，都做好了，给到团队进行走查，都提出来一大堆的问题，甚至有时候需要你动大刀子，这个时候就该你叫苦不迭了。想省事，其实给自己留了更多的后患，得不偿失，也是一种消极的工作方式。

除了做之前和过程中的沟通，做之后的自查也是有必要的。难以避免做的过程中，会有一些小的尝试，代码的增减，注释，临时文件，已经可以把这些进行整理删减了。另外，虽然有很多同事和测试来对我们的产出进行测试，但我们自己先检查出来总是好的，减少了一来二去的反馈和反复修改，对我们的自身的工作体验和节奏也是有好处。

十二、在没问题的地方找问题

我们会犯一些低级错误，这是无法避免的，比如符号不小心漏写了，删除了，在某个地方定义了另外的规则把我们想要的覆盖了，改错文件了。或者因为对某个属性只是字面上的理解，没有理解本质，用的时候起不了作用，然后排查的时候，没有针对性，乱查，要么删点代码，要么大幅度的修改数值想暴露问题，往往事与愿违。这就是方法不对了。

怎样能比较好的找问题呢？我觉得下面几点可以作为参考

由经验判断，哪里最可能有问题或者回忆一下自己操作不当的地方
养成好的编码习惯，不犯低级错误给自己挖坑
编程工具有比较好的错误提示
查看控制台报错
选择性注释代码来暴露问题代码段

十三、只想把事情做对，没想着做好

举个极端一点的例子，我跟同事曾经玩笑的谈论了一下标签的使用，说就算是你整个网站全都用一种标签去写，那也是可以写出来的，因为从表现类别来说，就分为“行内”和“块级”，另外还有一个display可以改变它，所以就没什么关系了，写出来的页面应该也看不出来什么问题。好像也没错是吧，我们肯定不会这么做，但我们总会做很多类似这样的“对”的事，但远没有达到科学、合理。

人人都更加愿意谈自己擅长的新东西，好玩的东西，高级的东西，某种技巧等，我为什么写这么一篇文来告诉大家自己做过的矬事呢？每个人都是从无知到有知，从做得差到做得好，很多人会觉得自己在某个时候进入了一种瓶颈，其实就是没有对比，没有去接触更好，更广阔的东西，没有跟外界有足够的交流，就比较难发现自身的不足，勇于去主动发现自己的不足，总结思考，加以改进，就能从中学到东西，得到提升。我写到的这些东西，应该也有很多人同样遇到过，大家的经历应该都是相似的，所以，希望能够起到一定的参考作用。

该告一段落了哈，以后应该还会干更多矬事，哈。有需要交流可以直接找我，相互学习，促进进步~

正文到此结束