1。在增强网页设计效果时，您应该使用生成内容，而不是依赖冗余的标签和图像。2、要设置表单元素的字体与页面其余部分相同，不需要重复指定font属性，使用inherit特性即可。3.使用CSS自身的机制来组织fallbackstyles而不是依赖CSShacks来实现eg：正确的代码组织应该是先写“fallbackstyle”，再写“idealstyle”background:#000;background:rgba(0,0,0,0.75);4、DRY(Don'trepeatyourself)5.理解发现解决方案的过程比解决方案本身更重要6.浏览器能够解析某个css特性并不代表它已经实现或正确实现了这个feature7.浏览器前缀：-ms这两个属性-border-radius和-o-borderradius从未在任何浏览器中出现过；因为IE和Opera一开始就直接实现了无前缀版本的border-radius-moz-border-radius:10px;-ms-边框半径：10px；-o-边框半径：10px；-webkit-边框半径：10px；边框半径：10px；8.尽量减少重复，也就是尽量减少修改时需要编辑的点a)当某些值相互依赖时，它们的关系应该用代码表示font-size:20px;行高：1.5；b)比如做一个button的时候，padding,margin,border-radius,text-shadow,box-shadow等相对于font-size设置为em单位c)尽量把color写成hsla而不是rgba;因为它的字符长度较短，主要是因为重复次数较少背景：#58alinear-gradient(hsla(0,0%,100%,.2),transparent)上面这句话背景有渐变阴影。如果我想重复使用一种颜色，我只需要使用background-color:#c00;9、代码易于维护和代码量两者缺一不可eg:border-width:10px10px10px0;为了便于维护，也许border-width:10px;左边框宽度：0；这会更好10，当前颜色是css中的第一个变量a)假设我们希望所有水平分隔线都匹配文本的颜色hr{background:currentColor;}b)没有颜色分配给边框，它会自动从文本中获取颜色颜色在那里获取是因为currentColor本身就是很多CSS颜色属性的初始值，比如border-color和outline-color，还有text-shadow和box-shadow的颜色值。设置成和页面其他部分一样，不需要重复指定font属性，使用inherit特性即可eg:input,select,button{font:inherit;}b)设置超链接的颜色为了和页面上的其他文字一样，也可以使用inheriteg:a{color:inherit;}c)比如在创建提示框的时候，希望提示框的小箭头可以自动继承背景和边框的样式12.每次媒体查询都会增加成本，你添加的媒体查询越多，你的css代码会越来越不堪，只有正确使用才能成为利器13、实现弹性可伸缩的布局，并在每个断点区间内指定合适的大小（如果你发现自己需要大量的媒体查询为了使设计适应大小屏幕，那么可能值得退后一步，重新审视你的代码结构。因为在所有情况下，响应式都不是唯一要考虑的问题）14.缩写词的合理使用a)CSS工作组未来可能会引入更多可扩展的属性，合理使用缩写词是一种很好的防御性编码方式，可以抵御未来的风险。b)如果我们想显式覆盖某个特定的扩展属性并保留其他相关样式，那么我们需要使用扩展属性c)列表扩散规则：如果我们想显式覆盖某个特定的扩展属性并保留其他相关样式，您需要使用扩展属性eg：例如下面的代码背景：url(tr.png)no-repeattopright/2em2em,url(br.png)no-repeatbottomright/2em2em,url(bl.png)左下角不重复/2em2em;可以简写为：background:url(tr.png)topright,url(br.png)bottomright,url(bl.png)bottomleft;背景-大小：2em2em；背景重复：不重复；15.养成手头检查语法的好习惯16.原生特性通常比预处理器提供的版本强大得多a)eg:预处理器根本不知道如何进行像100%-50px这样的计算，因为百分比在页面真正呈现之前，无法解析值。但是原生CSS的calc()计算这样的表达式没有任何压力b)查看css变量eg：下面的代码是在一个有序的列表中，列表项的背景色会是rebeccapurple；但在无序列表中，列表项的背景色将为紫色。尝试使用预处理器来做ul{--accent-color:purple;}ol{--accent-color:rebeccapurple;}li{背景：var(--accent-color);}
