CSS最佳实践
CSS，总所周知，⼊门较为简单，很多⼈稍微学习⼀下基本就可以捣⿎出⼀个简单页⾯了。但另⼀⽅⾯，就算是最专业的Web开发者，可能也很难完美的管理好CSS。⼊门易，难精通，这其中涉及到各浏览器的兼容问题、CSS不断发展的新特性，甚⾄撇开设计稿也对前端⼈员有⼀定的美学要求等等，但这对喜欢这门语⾔的⼈来说⼤概也正是它的魅⼒所在！
进⼊正题，在前端乱炖看到⼀篇⽂章，叫《CSS最佳实践—成为CSS忍者的⼗四步（上）》，这⾥简单的总结⼀下。
第⼀条：掌握CSS特殊层次结构
CSS特殊层次结构，是经常被忽略的基础知识，可以⽤这个⽅⾯的问题来测试⼀个⼈才CSS知识全⾯与否，因为⼀个真正精通CSS的前端开发者，必然知晓这门语⾔的各种细节，何况是重要的细节？
那么既然它如此重要，为什么它是CSS最容易被忽略的部分之⼀呢，⽽且为什么极少的CSS实践中会提及到？⼤概是因为你可能需要做⼀些数学运算。在这个层次结构中，每个CSS选择器都有⼀些特定的值。⽽且当你组合起选择器时，这些值会增加。
通配符选择器的值最低，⼏乎等于0，可以说所有其他选择器都优先于它。后⾯是元素选择器，值为1.然后
是待遇伪元素的元素，值结合起来为2…………⼀直排下去，最⾼值是元素选择器、id选择器、class选择器加上⼀个元素选择器的组合。值为112。下⾯提供⼀个CSS特殊层次结构的表格，⽰具体的层次算法。
第⼆条：避免使⽤!important声明
这⼀条其实也和CSS层次结构有关系，!improtant是 CSS1就定义的语法，作⽤是提⾼指定样式规则的应⽤优先权，使其有最⾼优先级，相当于写在最下⾯。那为什么说要避免使⽤!important声明呢？不是说这条规则本⾝有多⼤问题，⽽是它会带来你不能避免的恶性循环。
尤其是在团队合作中，若你或同事在CSS中已经使⽤了!improtant声明，遇到要修改覆盖这条样式规则的情况下，你会怎么办？⼏种选择，第⼀，冒险移出这条!improtant声明，可能会破坏⼀些东西，然后花⼤量时间去重写并测试重写后样式如初。第⼆，运⽤上⼀条CSS层次结构的知识，使⽤更⾼层级的选择器来覆盖!improtant声明。⽐如之前声明应⽤在class选择器上，为了覆盖它，你可能会⽤到两个元素+class 选择器的⽅法、⽤id选择器的⽅法，或者两者结合。但是后⾯的⼀条规则会告诉你CSS中为什么不要使⽤id选择器，因此这个⽅法也不够好。第三，再次添加!improtant声明覆盖，问题显⽽易见，治标不治本。
总⽽⾔之，当你不得不对使⽤了!improtant的样式进⾏覆盖时，你就会发现问题所在，它会产⽣⼀个恶性
循环。所以解决办法不是
对!improtant声明替换修补或者覆盖，⽽是⼀开始就不要⽤!improtant声明！
第三条：不要使⽤ID选择器
直接⽤原⽂作者的⼀段话，总结得很好：
样式化元素时千万不要⽤ID。为什么说它属于CSS最佳实践呢？第⼀，ID是不可复⽤的，你只能在⼀个页⾯中⽤⼀个特定的ID元素。所以如果你想要在同⼀个页⾯样式化更多的元素，你需要使⽤更多的ID和更多⾏的CSS。第⼆，这是恶性循环的开始，我⼜要扯到CSS层次结构了。我们在前边的!improtant中有提到这个。第三，对于ID的争议是它通常⽤来指特定的元素，那么你就不可能让你的CSS变得简短⼜可复⽤。让样式太过特制化不是个好主意。相反的你应该让样式更具抽象和通⽤性。这可以帮助你重复地使⽤同⼀个样式。如果你在每个页⾯都⽤了超过⼀个特定的ID，那么可复⽤的CSS这个⽬标就不可能实现。
关于性能，确实ID选择器⽐class选择器要快，但这个性能优势在你写的CSS规则不够多的时候并不明显。⽽且你若想将这种保持性能优势，你可以使⽤纯粹的id选择器，⼀旦在id选择器后⾯添加了其他选择器，id选择器的速度优势也被冲击掉了，要知道，浏览器是从右向左阅读你的的CSS的。
结论就是性能提升的唯⼀途径就是⽤纯id选择器，同时你需要有⾜够多的CSS规则让优势显现。显然这些都不可取，所以你应该避免使⽤ID 选择器。
第四条：避免层次过⾼的元素
层次过⾼的元素，就是给⼀个元素赋予了过于复杂的选择器。上⾯提到过，浏览器是从右到左阅读你的选择器，我们来看这样⼀个选择器nav .link a，浏览器会先寻所有的a标签，然后选出类名为.link元素中的a标签，然后才是nav标签中.link ⾥的a标签。这样问题就明显了，使⽤层次过⾼的元素⽆疑会拖缓CSS的渲染，⽽且会使你的CSS⽂件字节冗余，这样的选择器根本没有必要。
值得⼀提的就是这条规则也是SASS或LESS嵌套中提倡嵌元元素素不要过多的原因，它会使得最终编译的CSS⽂件拥有⼤量层次过⾼的元素！
⾼效、简练、复⽤性的CSS才是我们的追求。
css样式表优先级最高第五条：reset还是normalize
在现阶段，CSS在各⼤浏览器的兼容问题依旧是学习CSS很重要的⼀部分，甚⾄在实际⼯作中这个部分⽐你想象的更加重要。各浏览器对CSS的渲染⽅式不同，导致了这些差异的存在。CSS样式重置表就是⼀种解决浏览器之间差异得⽅式。
⽬前有两种样式表可选，Nicolas Gallagher和Jonathan Neal写的Normalize或Eric A. Meyer写的Reset。这两种样式表是不同的，它们遵循不同的⽅法来移除浏览器的不⼀致性。Normalize只着眼于常规正确的样式；同时旨在保留默认样式，没有完全移除它们。它包含了⼀些⼩的修正来提⾼可⽤性。它也相对来说更模块化些，你可以提取或删除你不需要的部分。
Reset样式表则不太⼀样。它通过移除所有的样式来达成同质化的视觉样式，给⼏乎所有元素设定了⼴泛性的默认样式。它除去了所有的样
式像粗体斜体等等。结果就是strong、em、span看起来都差不多。从这个⾓度讲，reset就像⼀个⼤锤⼦，normalize则像⼀把⼿术⼑。reset 坚决地重置所有东西，normalize则是重置需要重置的。
使⽤reset或者normallize之前，先思考⼀下你你更喜欢哪种⽅式？这两种样式表在重置⽅式和代码⼤⼩上都是有区别的，根据你的兴趣或者项⽬需求选择。
第六条：别重置所有东西
这条看似和第五条冲突，其实不然！
样式重置表提供给我们⼀种⾯对各浏览器差异的思路，但并不是所⽤时候使⽤它们都是好的选择，⽆论是reset还是normalize，都包含了⼤量你可能不会运⽤到你的项⽬⾥的代码，因此没有必要让这些代码
扩⼤你的CSS。定制，就是这条的核⼼思路！
运⽤样式重置的思想，根据项⽬或⼯作的具体情况，有选择的重置⼀些样式来保持你的CSS在浏览器下的表现统⼀，这才是最完美的⽅式。你可以多研究两种重置样式表的代码与具体表现，甚⾄去熟悉浏览器的差异。
其实所谓最佳实践，没有标准，要结合⾃⼰，由表及⾥，看清代码背后是什么东西，然后再去谈灵活运⽤，才能到最适合⾃⼰的CSS！
最后

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。