嵌入式＜style＞设计模式
每天分享一个web前端开发技巧。
今天分享的主题是，如何提升前端代码的内聚性。我们在写<style></style>的时候，往往把大量无关联的样式写在同一个<style>下，而且离相关的html元素很远，这样导致每次想修改某个元素的样式的时候都要在编辑器中滚动许久才能找到css代码。这样导致代码比较离散，调试困难。如何解决这个问题呢？对于一一映射的样式和元素，可以放在一起呀。谁说<style>一定要写在<head>里面，或者<body>的最后面呢？单开一个新的放在相关元素旁边不好吗？反正style是没有作用域的，性能上没有任何区别，当然未来可能出现@scope语法来增强体验。
有人说这样会不会增加html代码的长度，但这不舒服？这里解决方法也很简答，各大IDE编辑器都支持代码折叠和展开，不用的时候都默认折叠起来就好了。
只是对于有class的元素们，这种公共样式就得记得要单独写css了。但是开发过前端的同学们都知道，更多的css样式是针对某一个元素的，所以嵌入式一对一style就非常重要了。
关于css选择器，结合前两期我分享的自定义未知元素，很多时候可以直接使用新元素比如<tips>，那后面跟一个style里面直接选择tips{.....}来设置样式，只要全局只有这一个tips就行。
总结：通过这种开发模式，可以将一对一的html和css放在一起，调试修改的时候非常轻松地就定位到相关代码。除非遇到一对多的情况不得不分开来写。
通过一个个前端开发的“冷门”技巧，融会贯通了以后，相信你利用原生语言开发一个app将会达到极速！之后我会经常分享web开发的新技巧！