写在前面 ,学好css,需要长期的推敲和积累 ,细节是不断完善的,逐渐形成自己的风格 让自己的css更加接近优雅.
下面来总结一些我觉得比较好的css代码风格 :
1. 一般网页中的背景 用背景时 设置为行内样式 style="background-image: url(img/01.jpg)";
这样做有一点好处:图片一般为资源 尽量写在html中 便于后期维护 结构清晰
这样做还有一点要注意:这里应该使用 "background-image" 而不要偷懒 写"background",因为行内样式的权重比较高(1000),避免在外联css中设置其他背景属性设置不上;
2.左边固定 右边自适应
在布局的时候，比如一些列表页，常常左边是一个固定大小的图，右边剩余部分展示标题，
方法 有两种
1.100%宽的div用padding-left把左边图片的位置留出来，div元素内容的部分就是标题，图片绝对定位到padding-left区域，这样就实现了左固定右自适应，（前提是box-sizing必须是border-box，否则padding加上100%宽会超出屏幕宽度），代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.container{
position: relative;
width: 50%;
margin: 0 auto;
}
.left{
width: 300px;
height: 300px;
position:absolute;
left: 0;
top: 0;
background: red;
}
.right{
box-sizing: border-box;
width: 100%;
height: 300px;
padding-left: 300px;
background: #ccc;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容
</div>
</div>
</body>
</html>
2.父容器width100% 左边盒子宽度固定 左浮动 右边盒子 overflow:hedden(原理暂不清楚) 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 300px;
background: red;
}
.right{
overflow: hidden;
background: #ccc;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边固定盒子</div>
<div class="right">
我就是左边自适应的内容 我就是左边自适应的内容 我就是 左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容 我就是左边自适应的内容
</div>
</div>
</body>
</html>
3.元素的上下间距
布局的时候从上往下开始写页面，一般都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽量不要又是写margin-top又是写margin-bottom，如果混着用，后期不好维护，比如某一块区域需要换位置，或者是一个组件可能会被很多地方共用，混着写的话后期在改的时候，可能会麻烦一点，这里导致的问题可以说不痛不痒，但是不管是js还是css，注重细节并养成好的习惯，是代码能力的一种体现。
4.字体颜色透明
有时候设计师，在配置字体颜色的时候可能用透明的百分比，来设置几种不同的颜色，比如主色是#000，浅灰色#000 75%的透明度，这种情况下不建议web写透明度，而是让设计师给到对应的颜色值，因为透明色会根据背景的不同，这样扩展性就比较差。
5.命名
命名是一个让人最纠结的事情，先看第一种,这样命名的更详细可以一目了然的知道当前类的意思，但是长度比较长，增加代码量。
nav-botton-float-right
第二种使用缩略命名，会使代码更短，写起来更快，但是不易读。
nav-btn-fr
如果用缩略命名，可以约定文档，有约定和熟悉成本，但是熟悉以后更高效，类的命名也会变得更规范和统一
约定 fr为 float right
6. 0.5px边框的理解误区
之前写边框的时候就发现，只要让边框的颜色更淡，边框看起来就更细，所以当设计师问我为什么边框看起来比较粗的时候，我都告诉他们颜色调浅一点就好了，这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%，可以实现0.5px边框，我一直很奇怪，1px实际是物理的最小单位，怎么可能实现0.5px，就这样我做了个实验，我设置了1px颜色为000的边框（黑色）
7.rem布局的文字大小
大家都知道浏览器一般不会让文字小于12px，如果设置小于12px浏览器都会显示12px， 我们在用到rem布局的时候，元素是会根据屏幕宽度等比例缩放的，比如设计师给到750px的设计稿，如果某一个元素文字是22px，那么当用户的屏幕宽度是375的时候，文字会缩放为11px，实际浏览器就会显示为最小12像素，那么其他非字体元素比例仍然会缩小，这个时候字体可能和其他元素的比例就不是原设计稿的比例了，如果用户屏幕是320px，那么和原设计稿元素间的比例就差更多了。所以我们一定要根据自己的情况告诉设计师(也许人家就知道)，在宽是750像素的设计稿里，字体最小应该是24像素。
8.没有必要过分的去兼容低版本的IE
兼容IE就是甚至浪费人力成本，比如说IE8不支持圆角，得用图片代替，没有没有placeholder，得用JS来模拟。对于个人来说，技术的更新换代是大势所趋，我们要往前看，有的是东西给你学，不要在这个地方浪费青春。
总结:
要做好css，写好页面，和设计师的沟通也是很重要的一个技能，因为设计师决定页面最终要呈现的样子，要通过项目验收，也必须要设计师验收通过才行。
设计师给过来一个交互效果，前端拿到，一想交互效果还可以，但是实现成本比较高，功能都做不完，不想做这么细，然后就直接说没时间这个做不了，设计师一想这个交互很难吗，别人都能做，你为什么不做，就这样来回几句就闹矛盾了，闹到产品那里去了，最后可能交互效果还得做，时间也耽误了。其实这个是很多前端会遇到的问题，时间压得紧，功能可能都要延期，还来做这些交互，自然会有点抱怨，情绪一上来，把产品和设计都得罪了，最后还是要做，久而久之矛盾越来越深，沟通就越来越困难。 换个思路想问题，设计师大部分时候时间也很紧，要对产品和设计领导有所交代，前端又在催，好不容易做出来了，你这也不能实现那也不能实现，你这样我也没法交代啊。那么我们换个沟通方式，比如这样说：我们这边时间确实有点紧，这个交互比较麻烦，比较费时间，我做是可以做，只是可能会影响项目进度，你看要不我先做简单点，等到提测的时候有时间再加上这个交互，实在不行能不能等到上线之后，我单独再优化一下这个地方，很快就能上线。
设计师们还是讲道理的，根据web上的一些特性，设计师设计出来的一些样式一些想法或许没法实现，又或者实现成本太高，我们就得说服他们这个地方为什么不能实现，因为他们不懂，所以害怕你忽悠他们（实际有时候就有人忽悠他们），所以要想说服别人，自己一定要把问题搞清楚，把知识点理清楚，不能实现的理由对设计师说清楚，并且要有理有据，同时最好网上找到相关博客或者官方解释进行佐证。有很多矛盾和问题，就在于我们疏忽了沟通，又或者说是我们自己偷懒了，其实当自己把知识点能给外行说清楚了，这也说明是理解透了，也是对自己能力的提升。设计师辛苦设计的稿子一定要尽量达到他们的效果，也要考虑扩展性和可实现性，态度很重要，不要让人觉得是在敷衍他们，什么是敷衍，不解释清楚就说不做，就是敷衍，否则碰一鼻子灰只有怪自己。技术点要搞清楚，要不解释不清楚，别人不买单，在发现设计稿有问题的时候，耐心提醒其中一些不合适的地方，多帮别人承担一点，前端和设计师要友好相处。
