如果讓你來實(shí)現(xiàn)下面這種頁面，該怎么實(shí)現(xiàn)呢

原子化和css組件化方式寫法，可以搭配起來使用，常用的css

原子css

比如 下面這些類似flex 布局，lstn curser-pointer 等常用的或者
具備一定規(guī)律性的padding margin 樣式可以抽取為單獨(dú)的原子類使用

// 移除ul的點(diǎn)
.lstn {list-style-type: none;
}// 高度滿屏
.h100vh {height: 100vh;
}// 透明度
.opacity-30 {opacity: 0.3;
}.opacity-50 {opacity: 0.5;
}.opacity-70 {opacity: 0.7;
}// 橫向排列
.flex {display: flex;flex-wrap: wrap;
}.flex-grow {flex-grow: 1;
}// 縱向排列
.flex-col {flex-direction: column;flex-wrap: wrap;
}.text-white {color: #fff;
}.bg-red {background-color: red;
}.bg-orange {background-color: orange;
}.justify-around {justify-content: space-around;
}.justify-between {justify-content: space-between;
}.justify-center {justify-content: center;
}.nowrap {flex-wrap: nowrap;
}.color-white {color: white;
}.fw-600 {font-weight: 600;
}// 字體大小
.fz16 {font-size: 16px;
}.fz20 {font-size: 20px;
}.fz25 {font-size: 25px;
}.fz40 {font-size: 40px;
}//內(nèi)邊距.pt50 {padding-top: 50px;
}.px5 {padding: 0 5px;
}.px40 {padding: 0 40px;
}.py15 {padding: 0 15px;
}.py40 {padding: 0 40px;
}.p20 {padding: 20px;
}.p25 {padding: 25px;
}//外邊距
.mt15 {margin-top: 15px;
}.mr10 {margin-right: 10px;
}.my15 {margin: 0 15px;
}.my20 {margin: 20px auto;
}// 寬度相關(guān)
.w100 {width: 100%;
}.w23 {width: 23px;
}// 圖標(biāo)相關(guān)
.icon20 {width: 20px;height: 20px;
}.icon80 {width: 80px;height: 80px;
}.position-relative {position: relative;
}.position-absolute {position: absolute;
}.ovh {overflow: hidden;
}
.radius50 {border-radius: 50%;
}
// 箭頭指向
.cursor-pointer {cursor: pointer;
}// 文字居中
.text-center {text-align: center;
}

對(duì)于比較大的公共類，比如一些比較通用的組件，可以抽取為一個(gè)大的組件類

.card {background-color: var(--card-bg);margin-bottom: 30px;border-radius: var(--card-radius);box-shadow: 0 0 33px 2px rgba($color: #000000, $alpha: .1);
}

而一些比如字體17px 背景顏色非特別的紅白藍(lán)綠這種顏色的，或者陰影這些可以在組件化代碼當(dāng)中編寫

// 第二屏
.section2 {// 文章列表.article {.article_item {height: 240px;// 圖片在右邊.article_item--right {flex-direction: row-reverse;}.article_item_img {height: 240px;width: 370px;img {transition: transform .6s ease-in-out;transform-origin: center;&:hover {transform: scale(1.2)}}}}}// 導(dǎo)航相關(guān).nav_info {//作者信息.author_info {.name {font-size: 22px;}.follow_btn {height: 35px;background-color: var(--btn-bg);}}}

 <section class="container h100vh section2 pt50"><div class="row"><!--文章列表--><div class="article col-md-9 px5"><!--文章項(xiàng)--><div class="article_item card flex article_item--left"><div class="article_item_img flex ovh flex-col justify-center"><img src="./img/404.jpg" class="w100" alt=""></div><div class=" flex flex-col justify-center flex-grow py40"><div> Mac 切換 github 賬號(hào)</div><div>發(fā)表于 1 個(gè)月前 |工具 |mac?github</div><div>本文詳細(xì)講述了如何在 Mac 環(huán)境下 切換 github 賬號(hào)</div></div></div><div class="article_item card flex nowrap article_item--right"><div class="article_item_img ovh flex flex-col justify-center"><img src="./img/404.jpg" class="w100" alt=""></div><div class=" flex flex-col justify-center flex-grow py40"><div> Mac 切換 github 賬號(hào)</div><div>發(fā)表于 1 個(gè)月前 |工具 |mac?github</div><div>本文詳細(xì)講述了如何在 Mac 環(huán)境下 切換 github 賬號(hào)</div></div></div></div><!--導(dǎo)航信息--><div class="col-md-3 px5"><div class="nav_info"><!--站長信息--><div class=" author_info card p25"><div class=" icon80 radius50 bg-orange my20"></div><div class=" text-center ">毛竹</div><p class="text-center">怕什么真理無窮，進(jìn)一寸有一寸的歡喜。</p><div class=" flex justify-between"><div class=" text-center"><p>文章</p><p class="fz20">159</p></div><div class=" text-center"><p>標(biāo)簽</p><p class="fz20">517</p></div><div class=" text-center"><p>分類</p><p class="fz20">57</p></div></div><div class="follow_btn content-center cursor-pointer text-white"><img src="./img/icon/github.png" class="icon20 mr10" alt=""> Follow Me</div><div class=" content-center mt15"><img src="./img/icon/github.png" class="cursor-pointer w23" alt=""><img src="./img/icon/email.png" class="cursor-pointer w23 my15" alt=""><img src="./img/icon/twitter.png" class="cursor-pointer w23" alt=""></div></div><!--公告信息--><div class="p25 card"><div class="fz16">公告</div><div class=" text-center">Ask Me Anything</div><img class=" w100" src="./img/202109211725265.png" alt=""></div><!--最新文章--><div class="card p25"><div class="fz16">最新文章</div><div class=""><div class=""></div><div class=""></div><div class=""></div></div></div></div></div></div></section>

寫代碼思路：
1、提取出原子類：有哪些常用類，哪些類名可以抽取出來？
2、提取公共組件類：有哪些公共組件類
3、針對(duì)特殊，沒有規(guī)律，不需要復(fù)用的樣式進(jìn)行組件化編寫

簡單點(diǎn)就是先用原子類搭建好基本結(jié)構(gòu)，然后再進(jìn)行組件化樣式的編寫