Sass/Css Smacss模组化 DAY38

这里必须先介绍
为什么我们需要模组化呢?
这里举一个例子我们尚未模组化的css

//基本按钮.btn{  display: inline-block;  width: 40px;    height: 30px;  padding: 10px 0;  background: #000;  text-align: center;  color: #fff;  text-decoration: none;}//红色按钮.btn-red{  display: inline-block;  width: 40px;    height: 30px;  padding: 10px 0;  background: red;  text-align: center;  color: #fff;  text-decoration: none;}//大颗按钮.btn-large{  display: inline-block;  width: 70px;    height: 70px;  padding: 10px 0;  background: blue;  text-align: center;  color: #fff;  text-decoration: none;}

CodePen: https://codepen.io/wemyferb/pen/bGeddZY
会发现我们因为要为了某个按钮样式
而再新增一个 class名称
但会发现这些按钮 大部分的样式很多都一样(多了很多程式码)
所以这时候
我们可以利用模组化来改善这个问题

我们来看 Bootstrap 是怎么模组化的
Bootstrap Button:https://getbootstrap.com/docs/4.5/components/buttons/
来看此例子

会发现 .btn 它是作为基底(有点像是reset但不太像normalize的reset)
然后以 .btn-primary 作为颜色

上述做法有点像是增加子模组

Smacss HTML标籤优化

方便 HTML 语意化调整 CSS尽量不指定 HTML标籤
在还没介绍 HTML标籤优化之前
我们都会直接指定 h2 或 ul
如下图:

.l-grid{    margin: 0;}.l-grid h2{    color: #000;}.l-grid ul{    float: left;}

但这样做其实不太好
我们因为有时后因为要为了 SEO 而有权重
所以改成下图 会比较好

.l-grid{    margin: 0;}.l-grid-title{    color: #000;}.l-grid-list{    float: left;}

权重高:

<h2 class="l-grid-title"></h2>        <ul class="l-grid list">            <li></li>            <li></li>        </ul>

权重低:

<h3 class="l-grid-title"></h3>        <ul class="l-grid list">            <li></li>            <li></li>        </ul>

那 Smacss 的介绍就到这里结束啦
明天将介绍 OOCSS
敬请期待啦~~
若有任何问题 或 内容有误
请不吝色的告诉我唷