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

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

1. 使用CSS Modules

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

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

/src
  /components
    /Button
      Button.js
      Button.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,一旦项目大了,元素多了,慢慢玩去吧,很爽哒,哈哈。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值