一、规范:http://codeguide.bootcss.com/#html-syntax
良好的写作规范不仅大大缩减页面代码,结构清晰,还能被搜索引擎搜索到,更可以提高易用性。然后就看到了上面的那篇文章,以下的几点我觉得是和我相悖的也正是要去思考的。
其中:
1、减少标签的数量
如下图,我一般都会在img外面加上一个标签,我会觉得这样比较好控制。而比较好的做法是不需要外层的标签。
2、JavaScript 生成的标签:
通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。
3、媒体查询(Media query)的位置:
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。下面给出一个典型的实例。
4、class命名
感觉以上几点是我常忽视的,所谓的规范可能不是真正的规范也没有对与错,只是保持良好的习惯和取长补短的心态是重要的。比如媒体查询那里,我现在的做法是把查询都写在css文档的最下方,时间长了确实不记得写的究竟是哪里的代码。但是又觉得写在相关样式附近会不会显得比较不清晰,比较纠结。其余的还有很多点,详情点击上面的链接查看。
二、兼容
1、bootstrap中的表格,其中有个隔行变色,是用css3的nth-child实现的,不被ie8兼容,慎用
2、在firework < 30的版本中为input元素创建的line-height属性,使按钮在fireworks浏览器上不能和其他按钮保持一致的高度
3、如果为button元素添加disabled属性,ie9及更低版本的浏览器会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前没办法解决
4、在ie8-10中,设置为img-responsive(让图片支持响应式布局)的svg图像显示出的尺寸不均匀。解决方法:在出现问题的地方添加widht: 100%\9;因为bootstrap并没有给所有图像元素设置这一属性,因为这会导致其他图像出现格式错误。
5、img-rounded、img-circle、img-thumbnail等圆角的样式,同样ie8不支持,因为用的是css3的样式