• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Today, when I was browsing twitter, I saw a big guy from abroad posted a post, which mainly introduced how to manage their OWN CSS code. I think his management methods are good. Of course, every company and every person’s management style is different. You can learn from him. Make up for your shortcomings.

Twitter.com/_georgemoll…

Folder division

Divide folders into different functions, such as component styles, layout styles, and global variables.

  • 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 mainly stores reset files and some text typesetting files

reset.css

body{
    margin: 0;
    padding: 0;
}

ol.ul{
    list-style: none;
}

a{
    text-decoration: none;
}

Copy the code

typography.css


h1{
    font-size: 4.4 rem;
}
h2{
    font-size: 2.6 rem;
}
h3{
    font-size: 2.8 rem;
}
h4{
    font-size: 1.2 rem;
}
h5{
    font-size: 1rem;
}

Copy the code

component

This is where styles related to components (Buttons, Imputs, Modals, and so on) are stored. button.css

.btn{
    display: block;
    color: black;
    background-color: transparent;
}
.btn.disabled{
    pointer-events: none;
}

.btn-primary{
    background: blue;
    color: white;
}
Copy the code

dropdown.css

.dropdown{
    cursor: pointer;
    position: relative;
    display:inline-block;
    outline: none;
}

.dropdown .menu{
    cursor: auto;
    position: absolute;
    display: none;
    outline: none;
    
}
Copy the code

layout

Here mainly for web page layout of main styles, such as header, footer, navaigation, siderbar.

header.css

header{
    display: flex;
    padding: 1rem;
    font-size:2rem;
    line-height: 2rem;
    color: # 000;
    background-color: #fff;
}
Copy the code

utils

This is where we store global variables, common styles, and so on.

variables.css

:root{-color-blue:#od6efd;
    --font-primary:"inter" ,sans-serif;
    --font-big:2rem;
}
Copy the code

utils.css

.hidden{
    display: none;
}

.mt-5{
    margin-top: 5rem;
}

Copy the code

Vendors folder

This is used to store third-party CSS libraries, such as Bootstrap,Foundation, etc.

The pages folder

This is where special definition styles are stored for the page. login.css

.login-form{
    display: flex;
    flex-direction: column;
    padding: 10rem 8rem;
    z-index:1;
}
.login-logo{
    height: 5rem;
    margin-bottom: 2rem;
    position: relative;
}

Copy the code

use

You can reference them separately in different files, or you can create a global CSS file to import. Pay attention to the order of introduction to prevent style overwriting

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';
Copy the code