css修炼宝典

前端岗位目前确实十分火热，但是就业压力也很大；前一段时间与大学同学交谈，他向我哭诉说去一个机构学习了前端工程师，我心底里为他高兴，因为他马上就可以月薪突破10K了，可是不幸的是他说去北京面试一个月，还是没有找到满意的工作，这里想提醒想进入前端工程师的你，也考虑报班的话，那么你可以先自己去看看网上的一些视频课程，看看你自己能否看懂？还有想想自己在开发道路中能否坚持下来？能否喜爱与电脑、各大浏览器、还有键盘等打交道。

如果你决定了，那么请先放弃能否找到工作？先学习好知识，才是王道；因为其实在用人单位，看的是你的态度和能力，并不去深究你的能力来自哪里？如何来的？前端工作知识体系非常庞大，而且更新非常快。但是这些都可以自己慢慢去积累，“只要你有恒心，毅力，你可以去攀登这个高峰”；培训班的课程是4个半月到5个月，但是你或许没有看到这里的学员每一天都是敲代码到凌晨2点，第二天早上8点依旧会起床，也会去整理自己的学习笔记，做自己的项目，但是一个好老师很重要，其实，最重要的是你自己想做什么？有没有目标？你的执行力如何？

前端中有三大板块，一个是布局html,一个是样式表stylesheet，一个是JavaScript；或许是由于工作原因，我现在对于前端有了新的看法，新的领悟吧。前端最牛逼的地方到底是什么呢？我发现最牛逼的是前端的数据表现能力，前端的交互形式。

不知道大家现在对于淘宝APP有没有感觉到变化，它现在已经变得非常人工智能了，只要你今天浏览一个商品，淘宝APP就会在首页或者消息推送中去引导你去消费，或许你会觉得这跟前端没有关系，那么我只能说你还是一个小白阶段，或者说你只有编码能力；如果这里问你：如何实现一个系统或者网站根据不同的用户展现不同的商品，你如何去实现呢？

这里回归本文的主题，前端css宝典的秘籍

推荐一很好的前端bootstrap的框架AdminLTE,这里推荐大家去学习它的样式表，还有一些布局，下面我讲从我的个人工作习惯变化去阐述如何快速增强自己的css能力

1.最常见的是内联样式和外链样式混用

 <p class="red" style="position:relative">
     <h1 class="h1">我会css</h1>
 </P>

这里首先从一个类名开始，一般初级工程师，都会随意命令ClassName，这是最为致命的，因为你可能定义了很多类，但是你并不清楚自己的类的意义和效果，自己调用还可以，但是项目中，无法出手的，会被人所唾弃的。

第二点：这里引用了外部的样式，而用了内部的样式，大家做过项目的都会明白为什么会再项目开始的时候，统一类名的要求，严格的项目甚至会规定注释的model，其实内部引用的样式只是后期不好优化，不是很方便去修改样式，如果一个页面上千行去这样写，从代码的可读性来说不是很高，同时，大家都知道浏览器去读取（解析）我们的HTML的结构是s从第一行开始去解析的，外部引用的样式也会去请求我们的服务器，去解析我们的css并且转化为demo tree，在转化为tree construction，再render tree  最后 painting  the render tree ，推荐去看看这个博客深入解析浏览器的工作原理

第二种  类名过长，嵌套太多

 .tree .tree-ul .tree-ul-li  .tree-bottom a:hover span{
     color:#ccc;
 }

这个例子还不是很长的，推荐的那个框架有一个肤色的样式，你看了就会发现，确实很长，有的甚至类名长达几行。

大家很多人很喜欢用less去编写 css，因为它确实很方便，而且还可以去定义一些函数，类等方便我们去修改一些样式，但是如果你用的不合理，反而会造成页面的一些缺陷，就是css类层级太深，不利于优化，也不利于读取，再渲染的时候，时间会花大量的时间；很长的类名不易于浏览区去读取，望大家合理使用；

第三种  项目中如何去修改类

其实我们的样式表设计可以分为初始化的样式，交互时的样式设计，交互后的样式设计，以前初出茅庐，我从来没有这样考虑过，或许这就是实战项目带来的益处吧，如果你这么去设计一个页面的样式，那么你可能会出一个初始化样式的类的大集合，甚至你们项目中会定义一些通用的类名，以便于大家开发。同时这里提醒大家不要再一个项目中去修改你不是清楚样式类的设计而需要修改样式，建议大家去重新编写自己的类，然后去修改它。

因为，你要考虑到将来产品升级的时候，你怎么快速去修改样式，修改产品，而不影响其他的模块，甚至或者修改的时候，只是脚本需要变化，类延用就可以了。

第四 css晋升阶段

利用伪类实现一些角标或者不重要的图标，这是很多大牛与初级工程师的差别，很多初级工程师，遇到小的三角形或者其他的图标都会做一个png图片或者精灵图去实现自己的功能，有的甚至是一个页面多次去引用精灵图，没有合并，优化的人员会感觉非常恶心，是浪费加载时间，或许你觉得没事，那是因为你没有经历过大项目，一个网页要是延时多几毫秒可能已经丧失了几十万用户了。

还有前端的样式表层出不穷，要多注意数据的表现形式，如何实现优雅的表现，同时吸引用户的眼球，自己的类使用方便，而且便于管理，各大浏览器都兼容。这里提醒大家如果你遇到样式的问题，那么不要解决了就说再见了，你要搞明白为什么这样写就是可以呢？为什么这个属性一修改就不对呢？记住多去研究标准。这样自己才能不断提高。