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

相关推荐
StevenGerrad1 小时前
【读书笔记】架构整洁之道 P2~3 编程范式&设计原则
设计模式·架构·软件工程
大飞pkz6 小时前
【设计模式】迭代器模式
开发语言·设计模式·c#·迭代器模式
zero13_小葵司10 小时前
在不同开发语言与场景下设计模式的使用
java·开发语言·javascript·设计模式·策略模式
charlie11451419111 小时前
精读 C++20 设计模式:行为型设计模式 — 状态机模式
c++·学习·设计模式·状态模式·c++20
charlie11451419113 小时前
精读 C++20 设计模式:行为型设计模式——观察者模式
c++·学习·观察者模式·设计模式·程序设计·c++20
青草地溪水旁13 小时前
设计模式(C++)详解——观察者模式(Observer)(2)
c++·观察者模式·设计模式
charlie11451419113 小时前
精读 C++20 设计模式:行为型设计模式 — 备忘录模式
c++·学习·设计模式·c++20·备忘录模式
希望_睿智14 小时前
实战设计模式之迭代器模式
c++·设计模式·架构
charlie11451419114 小时前
精读C++20设计模式——行为型设计模式:策略模式
c++·学习·设计模式·策略模式·c++20
周杰伦fans1 天前
C# 23种设计模式详解与示例
开发语言·设计模式·c#