切图

1、拿到一张psd，用ps CC打开，找到想要切的部分，直接修改名字带后缀，再生成资源，就会在psd所在目录生成。连接

2、切图的时候对位置拿捏不准，下个ps插件可以很方便的标注，关于精灵图制作图层转svg也有相关介绍。链接

3、下面开始写html

之前每次开始一个练习的时候，要分别新建js css image 文件夹，然后 css里面加入一些 reset.css 然后再在html中引用。几次之后觉得没必要每次这么痛苦，虽然也花不了多少时间。如果一行命令这些全都能搞定呢？yeoman可以做到，但是自己弄写小东西，感觉没必要用，于是想到了用shell。链接

比如在终端中输入vgo，那么当前目录下就会生成以下结构，只需要打开index.html开始写结构就可以了。

1
2
3
4
5
6
├── css
│   ├── normalize.css
│   └── style.css
├── images
├── index.html
└── js

关于结构，以及样式命名一直很很头疼的事情（PS：其实是自己没有经验），满足一个效果可以用很多中方法，但是为什么不用最好的哪一种呢，用最少的标签，满足效果，感觉应该也不错吧。
@点头猪

#样式的写法看似有好多种#，其实只有一个是最合理的 井号里的观点翻译过来就是：如果你无法判断A方案和B方案哪个更好，那说明两个都不够好。

方案的好坏，取决于 可读性、可维护性，适用场景。

写css有两种类别

1
一种是fl mr10  类别

一种就是.mod {} .mod_title 或者 .mod .tit

<div class="newList mod">
  <div class="mod_title"></div>
  <div class="mod_con">
      ul…..
  </div>
</div>   
                           -- @林小志_linxz

推荐第二种，对于可维护性更好，记得有文章说样式不要超过3层，不过觉得目前还没到要关心这个的性能多少的时候，第二种结构写的好的话，其实也可以控制在3层以内。

4、结构写好后，该开始写css了

chrome 安装 LiveStyle 插件，搭配sublime，在编辑css的同时就能在浏览器中看到修改效果，同样，在浏览器中修改样式，样式表中也会有相应的变动连接

OK 结束

为什么会写这个？

一个是总喜欢忘，第二个是懒。这些东西搜藏夹，笔记中都能翻到，翻来翻去，烦了。每次要翻，索性就总结一下 总结的东西。或许还有总结总结的总结。。。

因为懒得想类名呀什么的，想着写过一次的东西，为什么还要在写一遍，时间可以拿来做更有意义的事情。 所以我想收集各种模块，结构，弄在一起，等到我需要的时候。直接用，以后说不定，随便配置点东西，一个规范的布局就出来了。

ps 里面有脚本jsx，不过网上貌似没啥教程，还说不定以后设计师，按照一定的规范做图，再安装一个ps插件，可能一键，所有的都帮你弄好了。

或许又出来一个nb的玩意，直接改变现在的方式也说不定。

关于切图，还可以看看这篇 切图方法最佳实践