自贡电子商务网站建设,在哪里可以找到网站,西安网站建设公司有哪些,一站式建设在前端项目开发中#xff0c;例如突然来了一个大项目#xff0c;很可能就需要多人一起开发#xff0c;领导说了#xff0c;要快#xff0c;要快#xff0c;要快#xff0c;你们给我快。然后下面大伙就一拥而上#xff0c;干着干着发现#xff0c;一更新代码#xff0…在前端项目开发中例如突然来了一个大项目很可能就需要多人一起开发领导说了要快要快要快你们给我快。然后下面大伙就一拥而上干着干着发现一更新代码哎我写的样式怎么没了最后一排查发现张三跟李四的CSS命名一样有的级别高有的级别低然后就有的被覆盖掉了。那么我们该如何做一些控制保证CSS样式尽量少一些冲突呢
1. 使用CSS Modules
CSS Modules是一种CSS文件的模块化方案能够保证每个CSS类名的作用域只在当前模块中从而避免了全局命名空间的污染。
假设我们有一个React项目目录结构如下
/src/components/ButtonButton.jsButton.module.cssStep 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 (divh1Hello, World!/h1ButtonClick 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 langless.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.buttonbackground-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 (divh1Hello, World!/h1Button primaryPrimary Button/ButtonButtonDefault Button/Button/div);
};export default App;是不是看着挺简约的看着是不是挺方便的这不是标签名就是上面的样式名嘛你看多高效还能入参。哈哈你自己品去吧我们做的是一个项目不是一个小demo一旦项目大了元素多了慢慢玩去吧很爽哒哈哈。
