嵌入式<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开发的新技巧!

相关推荐
云中飞鸿4 小时前
结合项目阐述 设计模式:单例、工厂、观察者、代理
设计模式
蝸牛ちゃん10 小时前
设计模式(二十四)行为型:访问者模式详解
设计模式·系统架构·软考高级·访问者模式
zy小狮子10 小时前
【设计模式系列】策略模式vs模板模式
设计模式·策略模式
找不到、了11 小时前
Java设计模式之<装饰器模式>
java·设计模式·装饰器模式
蝸牛ちゃん12 小时前
设计模式(十六)行为型:解释器模式详解
设计模式·系统架构·解释器模式·软考高级
蝸牛ちゃん16 小时前
设计模式(二十二)行为型:策略模式详解
设计模式·系统架构·软考高级·策略模式
蝸牛ちゃん18 小时前
设计模式(六)创建型:单例模式详解
单例模式·设计模式·系统架构·软考高级
易元21 小时前
设计模式-访问者模式
前端·后端·设计模式
IT小白架构师之路1 天前
常用设计模式系列(十五)—解释器模式
设计模式·解释器模式
蝸牛ちゃん1 天前
设计模式(二十三)行为型:模板方法模式详解
设计模式·系统架构·软考高级·模板方法模式