前端多人项目开发中,如何保证CSS样式不冲突?

在前端项目开发中,例如突然来了一个大项目,很可能就需要多人一起开发,领导说了,要快,要快,要快,你们给我快。然后下面大伙就一拥而上,干着干着发现,一更新代码,哎,我写的样式怎么没了?最后一排查发现,张三跟李四的CSS命名一样,有的级别高,有的级别低,然后就有的被覆盖掉了。那么,我们该如何做一些控制,保证CSS样式尽量少一些冲突呢?

1. 使用CSS Modules

CSS Modules是一种CSS文件的模块化方案,能够保证每个CSS类名的作用域只在当前模块中,从而避免了全局命名空间的污染。

假设我们有一个React项目,目录结构如下:

/src/components/ButtonButton.jsButton.module.css

Step 1: 创建CSS Module文件 

Button.module.css文件中编写样式:

/* Button.module.css */
.button {background-color: blue;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
}.button:hover {background-color: darkblue;
}

Step 2: 在组件中使用CSS Module 

Button.js文件中引入和使用这个CSS Module:

// Button.js
import React from 'react';
import styles from './Button.module.css';const Button = ({ children }) => {return (<button className={styles.button}>{children}</button>);
};export default Button;

Step 3: 使用组件

 现在可以在其他组件中使用这个Button组件:

// App.js
import React from 'react';
import Button from './components/Button/Button';const App = () => {return (<div><h1>Hello, World!</h1><Button>Click Me</Button></div>);
};export default App;

2. 命名规范

 比如组长可能发话啦,大家开发的时候注意点,CSS命名不要冲突。张三和李四一脸问号?组长,我们该怎么保证呢?组长说,张三,你的CSS开头写个zs,李四,你的CSS命名开头写个ls,这样:

zs_button {width: 100px;height: 100px;border: 1px solid red;
}
ls_button {width: 100px;height: 100px;border: 1px solid red;
}
ww_button {width: 100px;height: 100px;border: 1px solid red;
}

你们记住自己是谁,不就好啦。大家都觉得不错,果然没有冲突。

3. Scoped样式(例如在Vue中) 

这个比较好理解吧,就是开发Vue项目的时候呢,大家喜欢把每个业务组件的样式写到文件底部,然后底部有个 style 部分,给style标签添加 scoped 属性即可。

<style scoped lang="less">.box-404 {display: flex; flex-direction: column;align-items: center;justify-content: center;height: 100vh;

4. 使用预处理器(如Sass/LESS)嵌套

这个也比较好理解,less 这种预处理器支持嵌套真是一大创举,第一开发者也不知道是如何想到的,我们只要保证最外层的CSS命名不冲突,那么其内部即便和其他CSS命名相同,也不会冲突。

.txt {position: relative;overflow: hidden;border: 1px solid red;width: 100px;height: 40px;padding-right: 20px;line-height: 20px;.btn {width: 100px;height: 100px;border: 1px solid red;}}.txt1 {position: relative;overflow: hidden;border: 1px solid red;width: 100px;height: 40px;padding-right: 20px;line-height: 20px;.btn {width: 100px;height: 100px;border: 1px solid red;}}

我们看代码中虽然都有 btn 的CSS命名,但其外部的命名不同,就可以保证嵌套在内部的命名不会冲突。

5  使用CSS-in-JS库

有句话不知当不当讲,我觉得这个库啊,算了,不说了,我有啥资格说呢。后面我举个例子,表达一下我的看法,我可没说不好啊

styled-components允许你在JavaScript中编写CSS,创建的样式会自动生成唯一的类名,确保样式不冲突。

// Button.js
import React from 'react';
import styled from 'styled-components';// 动态设置背景颜色
const StyledButton = styled.button`background-color: ${props => props.primary ? 'blue' : 'gray'};color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;&:hover {background-color: ${props => props.primary ? 'darkblue' : 'darkgray'};}
`;const Button = ({ children, primary }) => {return (<StyledButton primary={primary}>{children}</StyledButton>);
};export default Button;

使用时可以传递primary属性来控制按钮的样式:

// App.js
import React from 'react';
import Button from './components/Button/Button';const App = () => {return (<div><h1>Hello, World!</h1><Button primary>Primary Button</Button><Button>Default Button</Button></div>);
};export default App;

是不是看着挺简约的,看着是不是挺方便的,这不是标签名就是上面的样式名嘛,你看多高效,还能入参。哈哈,你自己品去吧,我们做的是一个项目,不是一个小demo,一旦项目大了,元素多了,慢慢玩去吧,很爽哒,哈哈。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/344886.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

转型AI产品经理(5):“锚定效应”如何应用在Chatbot产品中

锚定效应是认知心理学中一个重要的概念&#xff0c;它描述了人们在进行判断或决策时&#xff0c;往往过于依赖最先接收到的信息或数字&#xff08;即“锚点”&#xff09;&#xff0c;即使后续信息与初始锚点无关甚至相反&#xff0c;这个初始信息也会显著地影响最终的判断结果…

【下篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

YOLO 型号之所以闻名遐迩,主要有两个原因:其速度和准确性令人印象深刻,而且能够快速、可靠地检测图像中的物体。上回我解释了YoloX, 今天从Yolov6开始。 YOLOv6:面向工业应用的单级物体检测框架 美团视觉人工智能事业部(Meituan Vision AI Department)于 2022 年 9 月在…

拯救者Legion Y9000X IRX9 2024(83FD)原装出厂Windows11系统镜像下载

lenovo联想2024款拯救者Y9000X IRX9 笔记本电脑【83FD】OEM预装Win11系统安装包&#xff0c;恢复开箱状态&#xff0c;自带恢复重置还原功能 链接&#xff1a;https://pan.baidu.com/s/1i_sVcnXF4qgsuj02rebe-Q?pwdyefp 提取码&#xff1a;yefp 联想原装WIN11系统自带所有…

Junit 单元测试 详解,包你掌握

Java单元测试----Junit详解 1 什么是 Junit JUnit 是一个广泛使用的 Java 单元测试框架。它用于编写和运行可重复的测试&#xff0c;以验证 Java 程序的行为是否符合预期 也许有人会好奇&#xff0c;之前学的 Selenium 和 Junit 有什么关系&#xff1f;答案就是没关系&#…

htb-linux-6-beep

nmap web渗透 目录扫描 漏洞关键词 shell py脚本执行 flag root 目前的权限 nmap root

《精通ChatGPT:从入门到大师的Prompt指南》第4章:避免常见错误

第4章&#xff1a;避免常见错误 在使用ChatGPT进行Prompt编写时&#xff0c;常见的错误可能会大大影响生成内容的质量和准确性。本章将详细讨论这些错误&#xff0c;并提供如何避免它们的建议。 4.1 不明确的指令 在使用ChatGPT时&#xff0c;一个常见的问题是指令不够明确。…

使用proteus仿真51单片机的流水灯实现

proteus介绍&#xff1a; proteus是一个十分便捷的用于电路仿真的软件&#xff0c;可以用于实现电路的设计、仿真、调试等。并且可以在对应的代码编辑区域&#xff0c;使用代码实现电路功能的仿真。 汇编语言介绍&#xff1a; 百度百科介绍如下&#xff1a; 汇编语言是培养…

Spring boot+vue前后端分离

目录 1、前端vue的搭建 2、后端项目的构建 pom文件中引入的jar包 yml文件用来配置连接数据库和端口的设置 application.property进行一些整合 service层 imp层 mapper 实体类 额外写一个类、解决跨域问题 3、测试 1、前端vue的搭建 建立项目的过程略 开启一个建立好…

JDK下载安装Java SDK

Android中国开发者官网 Android官网 (VPN翻墙) 通过brew命令 下载OracleJDK(推荐) 手动下载OracleJDK(不推荐) oracle OracleJDK下载页 查找硬件设备是否已存在JDK环境 oracle官网 备注&#xff1a; JetPack JavaDevelopmentKit Java开发的系统SDK OpenJDK 开源免费SDK …

unity3d:GameFramework+xLua+Protobuf+lua-protobuf,生成.cs,.pb工具流

概述 1.区分lua&#xff0c;cs用的proto 2.proto生成cs&#xff0c;使用protogen.exe&#xff0c;通过csharp.xslt修改生成cs样式 3.proto生成lua加载.pb二进制文件&#xff0c;并生成.pb列表文件&#xff0c;用于初始化加载 4.协议id生成cs&#xff0c;lua中枚举 区分cs&…

spring boot3登录开发-2(3邮件验证码接口实现)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 目录 写在前面 上文衔接 接口设计与实现 1.接口分析 2.实现思路 3.代码实现 1.定义验证码短信HTML模板枚举类 2.定义验证码业务接口 3. 验证码业务接口实现 4.控制层代码 4.测试 写…

【原创】springboot+mysql农业园区管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

【物联网实战项目】STM32C8T6+esp8266/mqtt+dht11+onenet+uniapp

一、实物图 前端uniapp效果图&#xff08;实现与onenet同步更新数据&#xff09; 首先要确定接线图和接线顺序&#xff1a; 1、stm32c8t6开发板连接stlinkv2下载线 ST-LINK V2STM323.3V3.3VSWDIOSWIOSWCLKSWCLKGNDGND 2、ch340串口连接底座&#xff08;注意RXD和TXD的连接方式…

数据结构之计数排序算法【图文详解】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …

贪心算法-加油站

一、题目描述 二、解题思路 1.运动过程分析 这里需要一个油箱剩余油量的变量resGas&#xff0c;初始化resGas0&#xff1b;还需要一个标记从什么位置当做初始位置的startIdx&#xff0c;初始化startIdx0。 我们从数组下标idx0处开始向后遍历&#xff0c;初始时startIdx0&#…

go语言进阶 init() 函数

go 语言包 在一个项目中通常我们需要引入第三方包&#xff0c;我们来看下 当我们导入一个包的时候 发生了什么&#xff1a; 首先我们先详细介绍下两个函数&#xff1a; init(), main() 是 go 语言中的保留函数。我们可以在源码中 定义 init()函数&#xff0c; 此函数会在包导入…

代码随想录——将有序数组转化为二叉搜索树(Leetcode108)

题目链接 递归 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {* …

Java Web学习笔记24——Vue项目开发流程

import是引入文件。 export是将对象导出为模块。 new Vue({ router, router: h > h(App) }).$mount(#app) App.vue: vue的组成文件以.vue结尾&#xff0c;每个组件由三个部分组成&#xff1a;<template>、<script>、<style>。 <template><d…

Transformer学习之SwinTransformer

1.算法简介 本文主要参考自以下链接&#xff0c;整理成线上的形式用于备忘&#xff0c;排版太麻烦了直接贴图&#xff0c;参考的朋友慎重&#xff0c;不如直接看参考链接&#xff0c;后期有了新的理解继续更正。 参考链接1&#xff1a;Swin-Transformer网络结构详解_swin tran…

基于JSP技术的文物管理系统

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员界面 用户前台…