前言
今天在逛推特的時候看到了國外的一個大佬發的貼子，主要是介紹了如何管理自己的CSS代碼，我覺得他的管理方法還是不錯的，當然，每個公司，每個人的管理方式都是不一樣的，大家可以借鑒，取他之長，補己之短，
https://twitter.com/_georgemoller/status/1438168695176634374?s=05
檔案夾劃分
按照不同的功能劃分檔案夾，例如組件樣式，布局樣式，還有全域的變數，
- CSS
- base
- reset.css
- typography.css
- components
- buttons.css
- dropdown.css
- layout
- navagation.css
- utils
- variables.css
- vendors
- bootstrap.min.scss
- pages
- login.css
- contact.css
- base
base
base主要存放reset檔案以及一些文字排版的檔案
reset.css
body{
margin: 0;
padding: 0;
}
ol,ul{
list-style: none;
}
a{
text-decoration: none;
}
typography.css
h1{
font-size: 4.4rem;
}
h2{
font-size: 2.6rem;
}
h3{
font-size: 2.8rem;
}
h4{
font-size: 1.2rem;
}
h5{
font-size: 1rem;
}
component
這里主要存放跟組件（button,imputs,modals等等）相關的樣式，
button.css
.btn{
display: block;
color: black;
background-color: transparent;
}
.btn.disabled{
pointer-events: none;
}
.btn-primary{
background: blue;
color: white;
}
dropdown.css
.dropdown{
cursor: pointer;
position: relative;
display:inline-block;
outline: none;
}
.dropdown .menu{
cursor: auto;
position: absolute;
display: none;
outline: none;
}
layout
這里主要存放網頁中布局的主要式樣,例如header,footer,navaigation,siderbar，
header.css
header{
display: flex;
padding: 1rem;
font-size:2rem;
line-height: 2rem;
color: #000;
background-color: #fff;
}
utils
這里主要存放全域的變數，共同的樣式等等，
variables.css
:root{
--color-blue:#od6efd;
--font-primary:"inter" ,sans-serif;
--font-big:2rem;
}
utils.css
.hidden{
display: none;
}
.mt-5{
margin-top: 5rem;
}
vendors 檔案夾
這里主要存放第三方CSS庫，例如bootstrap,Foundation等等，
pages 檔案夾
這里存放對頁面的特殊定義樣式，
login.css
.login-form{
display: flex;
flex-direction: column;
padding: 10rem 8rem;
z-index:1;
}
.login-logo{
height: 5rem;
margin-bottom: 2rem;
position: relative;
}
使用
可以在不同的檔案中單獨參考，也可以創建一個全域的css檔案引入，
引入的時候要注意先后順序，防止樣式覆寫
main.css
@import './vendors/bootstrap.css';
@import './base/reset';
@import './base/typography.css';
@import './components/button.css';
@import './components/dropdown.css';
@import './utils/variables';
@import './utils/utils.css';
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/310609.html
標籤：其他