当前位置： 首页 > article >正文

嵌入式＜style＞设计模式

article 2025/8/26 15:33:12

每天分享一个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开发的新技巧！

相关文章：

嵌入式＜style＞设计模式

每天分享一个web前端开发技巧。 今天分享的主题是&#xff0c;如何提升前端代码的内聚性。我们在写<style></style>的时候&#xff0c;往往把大量无关联的样式写在同一个<style>下&#xff0c;而且离相关的html元素很远&#xff0c;这样导致每次想修改某个元…...

编程日记 2025/6/26 18:38:49

Kotlin 中该如何安全地处理可空类型？

在 Kotlin 中&#xff0c;可空类型&#xff08;如 String?&#xff09;是语言设计的核心特性之一&#xff0c;旨在从编译时避免 NullPointerException&#xff08;NPE&#xff09;。 1 核心处理方式 1.1 安全调用操作符&#xff08;?.&#xff09; 直接调用可空对象的方法…...

编程日记 2025/7/18 18:49:24

基于大模型预测的视神经脊髓炎技术方案

目录 一、术前评估与预测1. 数据采集与预处理2. 大模型构建与训练3. 术前风险评估与预测二、术中监测与决策支持1. 实时数据采集与传输2. 术中决策支持系统三、术后管理与康复1. 术后早期预警与监测2. 康复效果预测与个性化方案四、并发症风险预测与防控1. 并发症风险预测模型2…...

编程日记 2025/6/24 8:46:16

使用防火墙禁止程序联网（这里禁止vscode）

everything搜一下Code.exe的安装路径&#xff1a;D:\downloadApp1\vscode\Microsoft VS Code\Code.exe 方法&#xff1a;使用系统防火墙&#xff08;推荐&#xff09; Windows 通过防火墙阻止 VS Code&#xff1a; 打开 Windows Defender 防火墙&#xff08;控制面板 > 系统…...

编程日记 2025/8/13 2:05:56

Linux（7）——进程（概念篇）

目录 一、基本概念 二、描述进程——PCB 1.task_struct——PCB的一种 2.task_struct的内容分类 三、查看进程 1.通过系统目录查看 2.通过ps命令查看 四、通过系统调用获取进程的PID和PPID 五、通过系统调用创建进程 1.fork函数创建子进程 2.使用if来引出问题 六、L…...

编程日记 2025/8/11 17:02:43

前端流行框架Vue3教程：24.动态组件

24.动态组件 有些场景会需要在两个组件间来回切换&#xff0c;比如 Tab 界面 我们准备好A B两个组件ComponentA ComponentA App.vue代码如下&#xff1a; <script> import ComponentA from "./components/ComponentA.vue" import ComponentB from "./…...

编程日记 2025/8/19 10:38:35

Unity3D仿星露谷物语开发48之显示树桩效果

1、目标 砍完橡树之后会露出树桩&#xff0c;然后树桩可以用斧头收割&#xff0c;并将创建一个新的砍树桩的粒子效果。 这里有&#xff1a;一种作物收获后创造另一种作物的逻辑。 2、分析 在SO_CropDetailsList中&#xff0c;Harvested Transform Item Code可以指定收获后生…...

编程日记 2025/8/23 19:55:10

[Datagear] 实现按月颗粒度选择日期的方案

在使用 Datagear 构建数据分析报表时，常常会遇到一个问题：如果数据的目标颗粒度是“月”，默认的日期控件却是精确到“日”的，这在用户交互和数据处理层面会带来不必要的复杂度。本文将分享两种解决方案，帮助你更好地控制日期控件的颗粒度，实现以月为单位的日期筛选功能。…...

编程日记 2025/8/16 6:48:13

漏洞检测与渗透检验在功能及范围上究竟有何显著差异？

漏洞检测与渗透检验是确保系统安全的重要途径&#xff0c;这两种方法各具特色和功效&#xff0c;它们在功能上有着显著的差异。 目的不同 漏洞扫描的主要任务是揭示系统内已知的安全漏洞和隐患&#xff0c;这就像是对系统进行一次全面的健康检查&#xff0c;看是否有已知的疾…...

编程日记 2025/8/22 6:42:14

DB-GPT扩展自定义Agent配置说明

简介 文章主要介绍了如何扩展一个自定义Agent&#xff0c;这里是用官方提供的总结摘要的Agent做了个示例&#xff0c;先给大家看下显示效果 代码目录 博主将代码放在core目录了&#xff0c;后续经过对源码的解读感觉放在dbgpt_serve.agent.agents.expand目录下可能更合适&…...

编程日记 2025/8/11 20:46:41

基于SamOutV8的序列生成模型实现与分析

项目概述 本项目实现了基于SamOutV8架构的序列生成模型&#xff0c;核心组件包括MaxStateSuper、FeedForward和DecoderLayer等模块。通过结合自注意力机制与状态编码策略&#xff0c;该模型在处理长序列时表现出良好的性能。 核心组件解析 1. MaxStateSuper&#xff08;状态编…...

编程日记 2025/6/10 23:29:25

家政维修平台实战09：推送数据到多维表格

目录 1 API调试2 创建云函数3 前端调用整体效果总结 上一篇我们搭建了服务分类的后台功能&#xff0c;对于分类的图标通过集成TOS拿到了可以公开访问的地址&#xff0c;本篇我们将写入的数据推送至多维表格中。 1 API调试 要想推送多维表格的数据&#xff0c;首先要利用官方的…...

编程日记 2025/8/20 13:25:53

前端框架token相关bug，前后端本地联调

今天我搭建框架的时候&#xff0c;我想请求我自己的本地&#xff01;然后我自己想链接我自己的本地后端&#xff0c;我之前用的前端项目&#xff0c;都是链别人的后端&#xff0c;基本上很少情况会链接自己的后端&#xff01;所以我当时想的是&#xff0c;我前后端接口一样&…...

编程日记 2025/8/14 0:13:41

PyQt学习系列05-图形渲染与OpenGL集成

PyQt学习系列笔记&#xff08;Python Qt框架&#xff09; 第五课&#xff1a;PyQt的图形渲染与OpenGL集成 一、图形渲染概述 1.1 为什么需要图形渲染&#xff1f; PyQt默认基于2D绘图&#xff08;QPainter&#xff09;&#xff0c;但某些场景需要高性能3D图形或复杂视觉效果…...

编程日记 2025/8/25 23:38:57

卷积神经网络（CNN）可视化技术详解：从特征学到演化分析

在深度学习领域&#xff0c;卷积神经网络&#xff08;CNN&#xff09;常被称为“黑箱”&#xff0c;其内部特征提取过程难以直接观测。而 可视化技术 是打开这一“黑箱”的关键工具&#xff0c;通过可视化可直观了解网络各层学到了什么、训练过程中如何演化&#xff0c;以及模型…...

编程日记 2025/8/16 11:47:56

第十天的尝试

目录 一、每日一言 二、练习题 三、效果展示 四、下次题目 五、总结 一、每日一言 哈哈&#xff0c;十天缺了两天&#xff0c;我写的文章现在质量不高&#xff0c;所以我可能考虑&#xff0c;应该一星期或者三四天出点高质量的文章&#xff0c;同时很开心大家能够学到知识&a…...

编程日记 2025/6/20 2:12:59

WHAT - 兆比特每秒 vs 兆字节每秒

文章目录 Mbps 解释Mbps 和 MB/s&#xff08;兆字节每秒&#xff09;换算总结网络场景1. 在路由器设置中的 Mbps2. 在游戏下载时的 Mbps / MB/s总结 Mbps 解释 首先&#xff0c;Mbps 是一个常见的网络带宽单位&#xff0c;意思是&#xff1a; Megabits per second&#xff08;…...

编程日记 2025/6/30 10:31:22

业务场景中使用 SQL 实现快速数据更新与插入

一、业务背景 在气象数据处理系统中&#xff0c;我们经常需要对分钟级的降水数据进行更新和插入操作。具体场景如下&#xff1a; • 数据源会定期发送分钟级的降水数据&#xff0c;包括降水值&#xff08;PRECA&#xff09;和质控码&#xff08;PRECA_QC2&#xff09;。 • …...

编程日记 2025/8/19 14:11:44

QT之INI、JSON、XML处理

文章目录 INI文件处理写配置文件读配置文件 JSON 文件处理写入JSON读取JSON XML文件处理写XML文件读XML文件 INI文件处理 首先得引入QSettings QSettings 是用来存储和读取应用程序设置的一个类 #include "wrinifile.h"#include <QSettings> #include <QtD…...

编程日记 2025/8/25 16:30:19

微信小程序调用蓝牙API “wx.writeBLECharacteristicValue()“ 报 errCode: 10008 的解决方案

1、问题现象 问题：在开发微信小程序蓝牙通信功能时，常常会遇到莫名其妙的错误，查阅官方文档可能也无法找到答案。如在写入蓝牙数据时，报了这样的错误： {errno: 1500104, errCode: 10008, errMsg: "writeBLECharacteristicValue:fail:system error, status: UNKNOW…...

编程日记 2025/8/19 4:38:28

【Java基础笔记vlog】Java中常见的几种数组排序算法汇总详解

Java中常见的几种排序算法&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;希尔排序&#xff08;Shell Sort&#xff09;归并排序&#xff08;Merge Sort&#xff09…...

编程日记 2025/8/18 12:34:27

WebRTC与RTSP|RTMP的技术对比：低延迟与稳定性如何决定音视频直播的未来

引言 音视频直播技术已经深刻影响了我们的生活方式&#xff0c;尤其是在教育、医疗、安防、娱乐等行业中&#xff0c;音视频技术成为了行业发展的重要推动力。近年来&#xff0c;WebRTC作为一种开源的实时通信技术&#xff0c;成为了音视频领域的重要选择&#xff0c;它使得浏览…...

编程日记 2025/8/17 23:21:24

spring cloud alibaba Sentinel详解

spring cloud alibaba Sentinel详解 spring cloud alibaba Sentinel介绍 Sentinel 是阿里巴巴开源的一款动态流量控制组件&#xff0c;主要用于保障微服务架构中的服务稳定性。它能够对微服务中的各种资源&#xff08;如接口、服务方法等&#xff09;进行实时监控、流量控制、…...

编程日记 2025/8/14 1:55:42

Kafka + Flink + Spark 构建实时数仓全链路实战

本文聚焦如何通过 Kafka + Flink + Spark 构建一套稳定、可扩展、可插拔的实时数仓体系。覆盖从数据接入、实时清洗、指标计算，到离线补数、数据一致性保障的完整链路设计，结合实践样例提供可复制的落地方法。 🧱 一、架构总览 ┌────────────┐│ 数据源 …...

编程日记 2025/6/5 2:32:47

React19源码系列之渲染阶段performUnitOfWork

在 React 内部实现中&#xff0c;将 render 函数分为两个阶段&#xff1a; 渲染阶段提交阶段 其中渲染阶段可以分为 beginWork 和 completeWork 两个阶段&#xff0c;而提交阶段对应着 commitWork。 在之前的root.render过程中&#xff0c;渲染过程无论是并发模式执行还是同…...

编程日记 2025/8/16 16:35:57

Redis中的事务和原子性

在 Redis 中&#xff0c;事务 和 原子性 是两个关键概念&#xff0c;用于保证多个操作的一致性和可靠性。以下是 Redisson 和 Spring Data Redis 在处理原子性操作时的区别与对比&#xff1a; 1. Redis 的原子性机制 Redis 本身通过以下方式保证原子性&#xff1a; 单线程模型…...

编程日记 2025/6/27 9:41:47

怎样把B站的视频保存到本地

在B站&#xff08;哔哩哔哩&#xff09;上&#xff0c;有数不清的优质内容&#xff0c;无论是搞笑视频、学习资料&#xff0c;还是动漫影视&#xff0c;总有一些视频让你想反复观看。但是&#xff0c;遇到没有网络或流量不够用的时候&#xff0c;怎么办&#xff1f;把B站的视频…...

编程日记 2025/7/7 7:09:27

Vue3前后端分离用户信息显示方案

在Vue3前后端分离的项目中&#xff0c;若后端仅返回用户ID&#xff0c;可通过以下步骤显示用户名&#xff1a; 解决方案 获取用户信息API 确保后端提供以下任意一种接口&#xff1a; 批量查询接口&#xff1a;传入多个用户ID&#xff0c;返回对应的用户信息列表 单个查询接口…...

编程日记 2025/8/1 18:05:45

DL00987-基于深度学习YOLOv11的红外鸟类目标检测含完整数据集

提升科研能力&#xff0c;精准识别红外鸟类目标&#xff01; 完整代码数据集见文末 针对科研人员&#xff0c;尤其是研究生们&#xff0c;是否在鸟类目标检测中遇到过数据不够精准、处理困难等问题&#xff1f;现在&#xff0c;我们为你提供一款基于深度学习YOLOv11的红外鸟类…...

编程日记 2025/8/19 7:25:01

黑马程序员C++2024新版笔记 第4章 函数和结构体

1.结构体的基本应用 结构体struct是一种用户自定义的复合数据类型&#xff0c;可以包含不同类型的成员。例如&#xff1a; struct Studet {string name;int age;string gender; } 结构体的声明定义和使用的基本语法&#xff1a; struct 结构体类型 {成员1类型 成员1名称;成…...

编程日记 2025/8/20 8:25:06