学透CSS-如何组织你的CSS代码

前言

今天在逛推特的时候看到了国外的一个大佬发的贴子，主要是介绍了如何管理自己的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主要存放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';