一、中文符号居中效果
对于动态输出文字能够不用在乎，某些页面可能会有相似提示文案的地方，用英文标点符号，对于居中效果比较友好。css
二、元素的上下间距
布局的时候从上往下开始写页面，通常都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽可能不要又是写margin-top又是写margin-bottom，若是混着用，后期很差维护，好比某一块区域须要摞位置，或者是一个组件可能会被不少地方共用，混着写的话后期在改的时候，可能会麻烦一点，这里致使的问题能够说不痛不痒，可是无论是js仍是css，注重细节并养成好的习惯，是代码能力的一种体现。html
三、字体颜色透明
有时候设计师，在配置字体颜色的时候可能用透明的百分比，来设置几种不一样的颜色，好比主色是#000，浅灰色#000 80%的透明度，这种状况下不建议web写透明度，而是让设计师给到对应的颜色值，由于透明色会根据背景的不一样，好比如今看到的这种状况，这样扩展性就比较差。css3
四、命名 web
命名是一个让人最纠结的事情，先看第一种,这样命名的更详细能够一目了然的知道当前类的意思，可是长度比较长，增长代码量。
eg: .nav-btn-float-right
第二种使用缩略命名，会使代码更短，写起来更快，可是不易读。浏览器
eg: .nav-btn-fr
若是用缩略命名，能够约定文档，有约定和熟悉成本，可是熟悉之后更高效，类的命名也会变得更规范和统一.
五、0.5px边框的理解误区 架构
我以前写边框的时候就发现，只要让边框的颜色更淡，边框看起来就更细，因此当设计师问我为何边框看起来比较粗的时候，我都告诉他们颜色调浅一点就行了，这个技巧我一直在实际使用。网上有博客说经过css3 transform的缩放scale 50%，能够实现0.5px边框，我一直很奇怪，1px实际是物理的最小单位，怎么可能实现0.5px，就这样我作了个实验，我设置了1px颜色为000的边框（黑色）。dom
当使用scale缩放50%的时候，颜色变成了c5c5c5，可是实际仍然有1px。我用的是拾色工具会精确到像素，确实仍是1px，因此这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展现，因此这种方式可让2px缩放为1px，让1px的边框变得更淡，这种方式确实能让边框变细，但不能说是0.5px。 ide
六、user-select:none 函数
该属性让区域内容没法被选中,能够阻止用户长按复制,也能够避免用户复制无关内容，好比下面我只但愿用户复制6655验证码，除了6655我都设置了user-select:none，长按其余部分并不会出现复制按钮，按钮数字就能够，而且第三幅图的左右下标只能在6655间拖动
在为dom绑定事件的时候，你们可能会直接绑定当前有样式的class，这样会由于修改或者替换class名称，影响JS，而若是定义一个无样式的js前缀的类 专门用来绑定事件，这样就解除了样式和逻辑的耦合，在读代码的时候，也能一会儿看出哪些元素绑定了事件的。 eg: <div class="item js-item"></div>工具
八、rem布局的文字大小
你们都知道浏览器通常不会让文字小于12px，若是设置小于12px浏览器都会显示12px， 咱们在用到rem布局的时候，元素是会根据屏幕宽度等比例缩放的，好比设计师给到750px的设计稿，若是某一个元素文字是22px，那么当用户的屏幕宽度是375的时候，文字会缩放为11px，实际浏览器就会显示为最小12像素，那么其余非字体元素比例仍然会缩小，这个时候字体可能和其余元素的比例就不是原设计稿的比例了，若是用户屏幕是320px，那么和原设计稿元素间的比例就差更多了。因此咱们必定要根据本身的状况告诉设计师，在宽是750像素的设计稿里，字体最小应该是多少像素。
eg: 设计稿 750px, 文字 22px
设计稿 375px, 文字 11px(12px)
九、object-fit: cover
咱们在作列表页的时候，图片都是固定的大小，好比是一个100px*100px的正方形图片，可是颇有可能拿到的图片并非正方形的，这个非正方形图片放到正方形的img标签里，就会变形若是使用object-fit：cover 能够裁剪超出比例的部分，这样图片看起来就不会是变形或者拉伸的了，可是这样会致使图片残缺，根据图片的不一样，可能裁剪掉关键部分的内容，可是鉴于列表原本就是缩略图，因此仍是能够加上这个属性的,是一个比较折中的办法。
说到图片拉伸的问题, 就要说说对于图片的约定，由于无论是拉伸仍是裁剪都会致使图片的残疾，拉伸影响视觉，裁剪惧怕关键部位丢失，若是不严格按照约定的规范来，确定是不能兼容全部状况的，所以在作项目的一开始就要和产品运营们约定好图片比例，建议约定为正方形。
十一、只在不得已时使用 !important
在一个类上定义 !important 是一种使代码被有动覆盖的方法，特别是当你试图处理 media 查询时。并且这对于移动端来讲很麻烦。好比说，若是你但愿在手机屏幕显示某些内容，则必须使用另外一个 !important 类来覆盖 .hide 类以在移动设备上显示它。我没有找到一个合理的借口来使用 !important ，除非你是在重写别人以前放错位置的 !important 类。
十二、box-sizing的最佳实践
在这里主要回答三个问题：
问题一：box-sizing的值，取content-box好，仍是取border-box值好？
若是最低须要兼容IE六、7，那么box-sizing不可以使用，只能使用W3C盒模型；
若是最低只需兼容IE8，那么使用content-box在功能上彻底没有问题，只是在一些弹性布局和响应式布局实现上，会稍微麻烦一点；而border-box虽然在这些方面表现更好，可是不能和IE8的min-width、min-height、max-width和max-height四个属性一同使用，使用的话就要稍微注意一下；
若是最低只需兼容IE9，那么本人以为，全局配置取content-box更为合适，局部配置两者都可。缘由以下：
CSS3提供了calc函数（IE9+），使得W3C盒模型有了强有力的助攻，在弹性布局和响应式布局的表现，与IE盒模型无异；
默认优于配置原则：我我的认为，“默认优于配置”，特别是在reset.css这种架构级、平台级的配置文件，要尽可能避免对将来可能引入的模块有侵入性。譬如，咱们在一个项目中时常须要引入第三方组件，若是这个组件没有强声明box-sizing,那么其默认使用的就是W3C标准盒模型，若是在全局的reset.css中设置box-sizing的值为border-box以选用IE盒模型，那么就会影响到这一类默认基于W3C盒模型的第三方组件的样式。这里也给咱们提了一个醒，在封装组件时，记得强声明box-sizing，哪怕你使用默认的content-box。
总之，大部分场景两者能够互换，只是使用理念不同。小部分场景border-box更具优点，但随着calc函数的支持，这种优点已经再也不，相反content-box是默认值的优点越发明显。
我我的建议是：全局使用默认W3C盒模型（你的CSS代码最低可以兼容IE6/7，在IE8也能够和min-和max-一块儿使用），局部场景两者都可（仅把IE盒模型看成是一种布局技巧来使用）。你喜欢全局使用IE盒模型也是能够的，只要确认项目只须要兼容到IE8，即使有可能影响到引入的第三方组件，也是有办法处理的。
问题二：若是想要全局使用IE盒模型，那么在reset.css中，该怎样设置box-sizing？
这里提供一个参考：
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
这样设置的好处有：
子元素的盒模型类型，默认由父元素决定，方便组件统一设置；
支持低版本的浏览器：Safari (< 5.1), Chrome (< 10), and Firefox (< 29);
问题三：Bootstrap3开始，全局使用IE盒模型（box-sizing取border-box），又是基于怎样的考虑？怎么协调好与基于标准盒模型开发的第三方组件的关系？
众所周知，BS2还考虑对IE7的兼容，而BS3完全放弃了对IE7的兼容，并将box-sizing设置为border-box。
知识点
正则小专场：
\d 匹配任何十进制数，至关于[0-9]
\D 匹配任何非数字字符，至关于[^0-9]
\s 匹配任何空白字符，至关于[\t\n\r\f\v]
\S 匹配任何非空白字符，至关于[^\t\n\r\f\v]
\w 匹配任何字母数字字符，至关于[a-zA-Z0-9_]
\W 匹配任何非字母数字字符，至关于[^a-zA-Z0-9_]
-------------------------------------------------------------------------------------------------------------
兼容性的渐变背景效果
相关代码以下：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
<div class="gradient"></div>