模块css_css模块-CSDN博客

本文链接：https://blog.csdn.net/qq_40801987/article/details/120649205

如果css当做一门语言的来写，那么如何才能写好呢？

我列一下我认为好的代码的特点：

简单易懂，原有的代码非常容易看懂，大道至简，别人一看你的代码就知道是做什么的
便于修改，便于扩展，在既有的代码上添加自己的代码不会影响原来的逻辑，作为后来人即是不看原来的代码也能写下去

综合来说也就是css模块化

将页面分割成不同的部分，相互之间没有影响，修改的时候就知道修改哪一部分，不会对其他部分产生影响。不同的模块对css语句进行了封装。

基础样式

:root{
	box-sizing: border-box;
	font-size: calc(1vw + 0.6em);
}
*::before,*::after{
	margin: 0;
	font-family: helvetica,arial,sans-serif;
}

共通的样式。

建立css模块

以按钮为例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮模块</title>
		<link rel="stylesheet" href="9.css">
	</head>
	<body>
		<button class="button">开始</button>
		<button class="button">删除</button>
		<button class="button">提交</button>
		<button class="button">提交1</button>
	</body>
</html>

:root{
	box-sizing: border-box;
	font-size: calc(1vw + 0.6em);
}
*::before,*::after{
	margin: 0;
	font-family: helvetica,arial,sans-serif;
}
.button{
	padding: 0.6em 1em;
	border: 1px solid #333;
	border-radius: 0.3em;
	background-color: transparent;
	font-size: 0.5rem;
}

按钮初始样式
不同的按钮表示的职责也不一样，我们使用 – 双分割线来连接按钮的修饰

/*红色多表示警示*/
.button--danger{
	border-color: #be3427;
	color: #fff;
	background-color: #be2727;
}
/*红色多表示成功*/
.button--success{
	border-color: #006700;
	color: #fff;
	background-color: #006700;
}
.button--large{
	font-size: 1rem;
}
.button--small{
	font-size: 0.25rem;
}

		<button class="button button--small">开始</button>
		<button class="button button--danger">删除</button>
		<button class="button button--success">提交</button>
		<button class="button button--large">提交1</button>