每天分享一個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開發的新技巧！
.openEndDrawer()；不生效問題)
