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

相关推荐
鼠鼠我呀243 分钟前
【设计模式04】单例模式
单例模式·设计模式
缘来是庄9 小时前
设计模式之访问者模式
java·设计模式·访问者模式
hqxstudying12 小时前
Java创建型模式---单例模式
java·数据结构·设计模式·代码规范
花好月圆春祺夏安13 小时前
基于odoo17的设计模式详解---装饰模式
数据库·python·设计模式
fie888913 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
哆啦A梦的口袋呀13 小时前
《深入设计模式》模式结构汇总
设计模式
花好月圆春祺夏安13 小时前
基于odoo17的设计模式详解---单例模式
单例模式·设计模式
在未来等你16 小时前
设计模式精讲 Day 22:模板方法模式(Template Method Pattern)
设计模式·模板方法模式·软件架构·java开发·面向对象设计·设计模式实战·java应用开发
花好月圆春祺夏安18 小时前
基于odoo17的设计模式详解---代理模式
设计模式·代理模式
Small black human1 天前
设计模式-应用分层
设计模式