初接触移动前端，第一天整个人都是懵的。不仅从web前端到移动前端的思维转化，还有一些html页面结构的模块化，css样式的顺序书写与可读性, 关于布局的思考等等。如今入职快一个月，对此进行总结，往后继续优化。
1）CSS样式的书写顺序
1. 位置属性(position, top, right, z-index, display, float等)
2. 盒模型(width, height, padding, border, margin)
3. 文字系列(font, color， line-height, letter-spacing, text-align等)
4. 背景(background等)
5. 其他(animation, transition等)
2）CSS样式的书写规范
1. 去掉小数点前面的"0"，如font-size: .28rem;
2. 16进制颜色代码缩写 , 尽量不要出现英文，会与设计稿偏差。一般英文只用来测试。
3. 连字符CSS选择器命名规范，不建议使用"_"连接，推荐Camel命名，也可以用"-".
4. 不要随意使用id，因为id在js中是唯一的。这个之前就知道，但是现在包括结构，使用的都是class。而ID通常只是JS代码中需要，才会加上。
5. 在这之前，当需要用Javascript改变css样式时，经常都是使用$().css()连缀，不仅麻烦、重复，而且代码看起来很乱。而现在的思路则是，在CSS中添加一个.selected类，再使用addClass(‘.selected‘)、removeClass(‘.selected‘)，不仅简单明了，还可复用。
3）对于设计稿的思考
到目前为止，被说的最多的就是以下两种情况：1.你不能什么都按照设计稿来，他有时候本身是有问题或者不合理的，包括有时候字体大小、padding，宽高值之类。2.这 个是设计稿上的东西，不能随便乱改。
那么对于是否遵循设计稿，就不得不思考了。目前总结如下：
当拿到一个设计图的时候，首先是根据设计图布局。当你完成页面结构，也就代表了你对每块内容粗略的实现了一遍。那还有什么东西是需要PS从设计图里面获取的呢？
1. 色彩。2. li的行高，图片大小。3. 字体大小（大部分时候遵循设计稿，但当设计稿字体明显过小且在手机上实现效果也不好时，就需要大胆的修改了）。
然后就是一些注意点了。
Tip:
I. 从他的每一个图标获取信息，一个箭头可能代表有下拉选项，而一个省略号，通常就是说明这个标题不显示完全，或者文章内容值显示2行。
II. 图片的圆角加在自身还是外面包裹的div则根据后台有没有默认图片。
III.然后就是表单的问题了，输入内容在右显示还是中间显示，布局都有差别。而两种情况下都需要注意输入框内容不能覆盖图标。
IV.节省流量，有些时候，一些简单的图标通常都可以用css来实现。
而目前我最大的问题就是，在设计图上的一些尺寸浪费了过多时间，不仅耗费时间想精细量，并且有时候还会计算，而不是通过代码直接实现效果，这点毫无疑问是要改 的。与其在那纠结几px的距离，还不如在完成之后多测试效果。！important
4）尾声，一些旁枝末节
1. line-height。
文本行高多是用倍数，当碰到一些字体过大的时候，比如标题，如果使用倍数那么每行间距就会太大（包括由于数字的特殊性），此时会使用固定数值。
2. 移动端的体验问题。
首先就是表单的输入与键盘的争夺，在某些机型上，可能键盘弹出后会完全遮盖输入框。所以，一般情况下，将输入框设计在上半部分。当然，如果设计图本身就是这 样的时候，你也不能说不解决这个问题。第一种投机取巧的办法，如果下面有提交按钮，就将按钮的margin-bottom值设大一点。如果你处在一种无计可施的情形，那么 就只能采用JS触发一个弹出窗口了。
其次， 在web前端上想必：hover用的很多，那么移动端：active给用户反馈，通常用在li/button上。此时，li里面的select、input则需将背景设置透明，以避免背景 参差不齐。：active在IOS上面是存在问题的，解决方法就是给该元素绑定一个touch系列的事件。
3. border-left, border-right, 在表单里面设置li，这样不仅不会减小li的宽度，而且可以起到文本偏移的作用。
4. 前缀问题。因为有一些属性需要兼容老版本，所以需要加上前缀。这里推荐书写顺序
.text {
-webkit-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
这只是到目前为止碰到的一些问题，可能还有很多问题没有考虑到，这里仅作总结加深印象。以后工作中努力做到不犯同样的错误，及时总结，希望自己越来越好。