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

相关推荐
半夏知半秋17 小时前
游戏登录方案中常见的设计模式整理
服务器·开发语言·笔记·学习·游戏·设计模式·lua
Asort21 小时前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式
原来是好奇心21 小时前
告别if-else!使用策略模式优雅处理多种MQTT消息类型
java·mqtt·设计模式·策略模式·emqx
AY呀1 天前
# 从 HTML5 敲击乐到前端工程化:模块化开发如何重塑交互体验
设计模式
天南星1 天前
23种设计模式-深度讲解-7. 装饰器模式 (Decorator)
后端·设计模式
hans汉斯1 天前
【计算机科学与应用】基于多光谱成像与边缘计算的物流安全风险预警模式及系统实现
大数据·数据库·人工智能·设计模式·机器人·边缘计算·论文笔记
杯莫停丶1 天前
设计模式之:适配器模式
设计模式·适配器模式
xiezhr1 天前
见过哪些醍醐灌顶的Java代码:从"卧槽"到"原来如此"的顿悟
java·后端·设计模式
WaWaJie_Ngen1 天前
【设计模式】适配器模式(Adapter)
设计模式·适配器模式
Mr_WangAndy1 天前
C++设计模式_行为型模式_策略模式Strategy
c++·设计模式·策略模式·依赖倒置原则