前端项目全局样式借鉴

首先， css的 -- 前缀通常被用在类中，是CSS中对变量声明的前缀。

:root{

    --rotate-arrow:0;

    --dropdown-height:0;

    --list-opacity:0;

    --translate-value:0;

    --floating-icon-size:26;

    --floating-icon-top:0;

    --floating-icon-left:0;

另外，当--前缀被用在var函数中时，通过var函数调用自定义属性，设置旋转角度，var（）可以代替元素中任何属性中的值的任何部分，var()函数可以读取变量，在CSS中当作且仅可当作属性值使用,可以放置第二个参数作为默认值：

.main-button .dropdown-arrow{

    margin-left: 1.8rem; 

    transform: rotate(var(--rotate-arrow));

    transition: transform 0.4s cubic-bezier(0.25,0.46,0.445,0.94);

}

 

1 :root {
    --color-neutral-25: #FCFCFD;
    --color-neutral-50: #F9FAFB;
    --color-neutral-100: #F2F4F7;
    --color-neutral-200: #E4E7EC;
    --color-neutral-300: #D0D5DD;
    --color-neutral-400: #98A2B3;
    --color-neutral-500: #667085;
    --color-neutral-600: #475467;
    --color-neutral-700: #344054;
    --color-neutral-800: #1D2939;
    --color-neutral-900: #101828;
    --color-primary-25: #FBFBFF;
    --color-primary-50: #F6F6FE;
    --color-primary-100: #ECECFD;
    --color-primary-200: #DEDEFF;
    --color-primary-300: #CCCCFA;
    --color-primary-400: #B7B7FF;
    --color-primary-500: #A0A0F5;
    --color-primary-600: #8080F2;
    --color-primary-700: #6358D4;
    --color-primary-800: #4B32C3;
    --color-primary-900: #341BAB;
    --color-warning-25: #FFFCF5;
    --color-warning-50: #FFFAEB;
    --color-warning-100: #FEF0C7;
    --color-warning-200: #FEDF89;
    --color-warning-300: #FEC84B;
    --color-warning-400: #FDB022;
    --color-warning-500: #F79009;
    --color-warning-600: #DC6803;
    --color-warning-700: #B54708;
    --color-warning-800: #93370D;
    --color-warning-900: #7A2E0E;
    --color-success-25: #F6FEF9;
    --color-success-50: #ECFDF3;
    --color-success-100: #D1FADF;
    --color-success-200: #A6F4C5;
    --color-success-300: #6CE9A6;
    --color-success-400: #32D583;
    --color-success-500: #12B76A;
    --color-success-600: #039855;
    --color-success-700: #027A48;
    --color-success-800: #05603A;
    --color-success-900: #054F31;
    --color-rose-25: #FFF5F6;
    --color-rose-50: #FFF1F3;
    --color-rose-100: #FFE4E8;
    --color-rose-200: #FECDD6;
    --color-rose-300: #FEA3B4;
    --color-rose-400: #FD6F8E;
    --color-rose-500: #F63D68;
    --color-rose-600: #E31B54;
    --color-rose-700: #C01048;
    --color-rose-800: #A11043;
    --color-rose-900: #89123E;
    --primary-button-background-color: var(--color-primary-800);
    --primary-button-hover-color: var(--color-primary-900);
    --primary-button-text-color: #fff;
    --secondary-button-background-color: var(--color-primary-50);
    --secondary-button-hover-color: var(--color-primary-100);
    --secondary-button-text-color: var(--color-brand);
    --ghost-button-background-color: var(--color-primary-50);
    --ghost-button-text-color: var(--color-brand);
    --color-brand: var(--color-primary-800);
    --body-background-color: #fff;
    --body-text-color: var(--color-neutral-500);
    --headings-color: var(--color-neutral-900);
    --border-color: var(--color-neutral-300);
    --divider-color: var(--color-neutral-200);
    --icon-color: var(--color-neutral-400);
    --dark-icon-color: var(--color-neutral-500);
    --link-color: var(--color-primary-800);
    --lighter-background-color: var(--color-neutral-100);
    --lightest-background-color: var(--color-neutral-50);
    --docs-lightest-background-color: var(--color-primary-50);
    --hero-background-color: var(--color-neutral-25);
    --footer-background-color: var(--color-neutral-25);
    --outline-color: var(--color-brand);
    --editor-string-color: var(--color-warning-800);
    --editor-comment-color: var(--color-success-700);
    --editor-keyword-color: var(--color-primary-900);
    --editor-name-color: var(--color-primary-700);
    --editor-bracket-match-outline-color: var(--color-neutral-200);
    --editor-bracket-match-background-color: var(--color-neutral-100);
    --editor-bracket-match-color: none;
    --editor-bracket-no-match-outline-color: var(--color-rose-500);
    --editor-bracket-no-match-background-color: none;
    --editor-bracket-no-match-color: none
}

@media(prefers-color-scheme: dark) {
    :root {
        --body-background-color: var(--color-neutral-900);
        --body-text-color: var(--color-neutral-300);
        --headings-color: #fff;
        --divider-color: var(--color-neutral-600);
        --border-color: var(--color-neutral-500);
        --icon-color: var(--body-text-color);
        --dark-icon-color: #fff;
        --link-color: var(--color-primary-400);
        --lighter-background-color: var(--color-neutral-800);
        --lightest-background-color: var(--color-neutral-800);
        --docs-lightest-background-color: var(--color-neutral-800);
        --hero-background-color: var(--color-neutral-800);
        --footer-background-color: var(--color-neutral-800);
        --outline-color: #fff;
        --editor-string-color: var(--color-warning-300);
        --editor-comment-color: var(--color-success-500);
        --editor-keyword-color: var(--color-primary-500);
        --editor-name-color: var(--color-primary-300);
        --editor-bracket-match-outline-color: var(--color-neutral-600);
        --editor-bracket-match-background-color: var(--color-neutral-700);
        --editor-bracket-match-color: var(--color-neutral-25)
    }
}

html[data-theme=light] {
    --body-background-color: #fff;
    --body-text-color: var(--color-neutral-500);
    --headings-color: var(--color-neutral-900);
    --border-color: var(--color-neutral-300);
    --divider-color: var(--color-neutral-200);
    --icon-color: var(--color-neutral-400);
    --dark-icon-color: var(--color-neutral-500);
    --link-color: var(--color-primary-800);
    --lighter-background-color: var(--color-neutral-100);
    --lightest-background-color: var(--color-neutral-50);
    --docs-lightest-background-color: var(--color-primary-50);
    --hero-background-color: var(--color-neutral-25);
    --footer-background-color: var(--color-neutral-25);
    --outline-color: var(--color-brand);
    --editor-string-color: var(--color-warning-800);
    --editor-comment-color: var(--color-success-700);
    --editor-keyword-color: var(--color-primary-900);
    --editor-name-color: var(--color-primary-700);
    --editor-bracket-match-outline-color: var(--color-neutral-200);
    --editor-bracket-match-background-color: var(--color-neutral-100);
    --editor-bracket-match-color: none
}

html[data-theme=dark] {
    --body-background-color: var(--color-neutral-900);
    --body-text-color: var(--color-neutral-300);
    --headings-color: #fff;
    --divider-color: var(--color-neutral-600);
    --border-color: var(--color-neutral-500);
    --icon-color: var(--body-text-color);
    --dark-icon-color: #fff;
    --link-color: var(--color-primary-400);
    --lighter-background-color: var(--color-neutral-800);
    --lightest-background-color: var(--color-neutral-800);
    --docs-lightest-background-color: var(--color-neutral-800);
    --hero-background-color: var(--color-neutral-800);
    --footer-background-color: var(--color-neutral-800);
    --outline-color: #fff;
    --editor-string-color: var(--color-warning-300);
    --editor-comment-color: var(--color-success-500);
    --editor-keyword-color: var(--color-primary-500);
    --editor-name-color: var(--color-primary-300);
    --editor-bracket-match-outline-color: var(--color-neutral-600);
    --editor-bracket-match-background-color: var(--color-neutral-700);
    --editor-bracket-match-color: var(--color-neutral-25)
}

:root {
    --fc-3xs-min: (var(--fc-s-min) * 0.25);
    --fc-3xs-max: (var(--fc-s-max) * 0.25);
    --fc-2xs-min: (var(--fc-s-min) * 0.5);
    --fc-2xs-max: (var(--fc-s-max) * 0.5);
    --fc-xs-min: (var(--fc-s-min) * 0.75);
    --fc-xs-max: (var(--fc-s-max) * 0.75);
    --fc-s-min: (var(--f-0-min));
    --fc-s-max: (var(--f-0-max));
    --fc-m-min: (var(--fc-s-min) * 1.5);
    --fc-m-max: (var(--fc-s-max) * 1.5);
    --fc-l-min: (var(--fc-s-min) * 2);
    --fc-l-max: (var(--fc-s-max) * 2);
    --fc-xl-min: (var(--fc-s-min) * 3);
    --fc-xl-max: (var(--fc-s-max) * 3);
    --fc-2xl-min: (var(--fc-s-min) * 4);
    --fc-2xl-max: (var(--fc-s-max) * 4);
    --fc-3xl-min: (var(--fc-s-min) * 6);
    --fc-3xl-max: (var(--fc-s-max) * 6);
    --fc-4xl-min: (var(--fc-s-min) * 8);
    --fc-4xl-max: (var(--fc-s-max) * 8);
    --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
    --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
    --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
    --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
    --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
    --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
    --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
    --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
    --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
    --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp));
    --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
    --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
    --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
    --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
    --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
    --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
    --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
    --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
    --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
    --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp));
    --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
    --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
    --spacer-2x: 2rem;
    --spacer-3x: 3rem;
    --spacer-4x: 4rem;
    --spacer-6x: 6rem;
    --spacer-8x: 8rem
}

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1280;
    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)))
}

@media screen and (min-width: 1280px) {
    :root {
        --fluid-screen: calc(var(--fluid-max-width) * 1px)
    }
}

:root {
    --f--2-min: 12.64;
    --f--2-max: 10.24;
    --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
    --f--1-min: 14.22;
    --f--1-max: 12.80;
    --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
    --f-0-min: 16.00;
    --f-0-max: 16.00;
    --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
    --f-1-min: 18.00;
    --f-1-max: 20.00;
    --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
    --f-2-min: 20.25;
    --f-2-max: 25.00;
    --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
    --f-3-min: 22.78;
    --f-3-max: 31.25;
    --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
    --f-4-min: 25.63;
    --f-4-max: 39.06;
    --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
    --f-5-min: 28.83;
    --f-5-max: 48.83;
    --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
    --f-6-min: 32.44;
    --f-6-max: 61.04;
    --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp))
}

:root {
    --mono-font: "Mono Punctuators", "Space Mono", monospace;
    --text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Twemoji Country Flags", "Segoe UI Emoji", "Segoe UI Symbol";
    --display-font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

:root {
    --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --border-radius: .5rem
}

::selection {
    background-color: var(--color-brand);
    color: #fff
}

h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
    background-color: var(--lighter-background-color)
}

*:focus {
    outline: none
}

*:focus-visible {
    outline: 2px solid var(--outline-color);
    outline-offset: 3px
}

*.focus-visible {
    outline: 2px solid var(--outline-color);
    outline-offset: 3px
}

*:focus:not(:focus-visible) {
    outline: 1px solid transparent;
    box-shadow: none
}

.js-focus-visible *:focus:not(.focus-visible) {
    outline: 1px solid transparent;
    box-shadow: none
}

input:focus-visible {
    outline: 2px solid var(--link-color);
    border-color: var(--border-color)
}

input:focus {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--link-color)
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    accent-color: var(--link-color);
    background-color: var(--body-background-color);
    height: 100%;
    font-family: var(--text-font);
    overflow-x: hidden;
    caret-color: var(--link-color)
}

body {
    position: relative;
    margin: 0 auto;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--body-background-color);
    color: var(--body-text-color)
}

#skip-link {
    position: fixed;
    top: -30em;
    left: 0;
    right: auto;
    offset-block-start: -30em;
    offset-inline-start: 0;
    offset-inline-end: auto;
    z-index: 999;
    transition: top .1s linear
}

#skip-link:focus {
    outline: 2px solid transparent;
    top: 2px;
    offset-block-start: 2px
}

#skip-link:focus-visible {
    outline: 2px solid transparent;
    top: 2px;
    offset-block-start: 2px
}

main {
    flex: 1
}

main:focus {
    outline: none
}

main:target {
    outline: none
}

.content-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-xl-3xl) calc(1rem + 1vw)
}

.section-head .section-supporting-text {
    text-align: center;
    max-width: 768px;
    margin: 0 auto var(--space-l-2xl)
}

.section-foot {
    margin-top: var(--space-l-2xl);
    margin-block-start: var(--space-l-2xl)
}

.section-foot .section-supporting-text {
    text-align: center;
    font-size: var(--step--1);
    max-width: 768px;
    margin: 0 auto
}

.section-title {
    margin-bottom: 1rem;
    margin-block-end: 1rem
}

.section-supporting-text {
    font-size: var(--step-1)
}

hr {
    border: none;
    border-top: 1px solid var(--divider-color);
    border-block-start: 1px solid var(--divider-color);
    background: none;
    height: 0;
    margin: 2rem 0
}

code,
pre {
    font-family: var(--mono-font)
}

code {
    color: var(--link-color)
}

pre code {
    color: unset
}

p:empty {
    display: none;
    margin: 0
}

.c-icon {
    color: var(--icon-color);
    flex: none;
    transition: all .2s linear
}

@media(-ms-high-contrast: active) {
    .c-icon {
        color: windowText
    }
}

@media(forced-colors: active) {
    .c-icon {
        color: canvasText
    }
}

table {
    width: 100%;
    margin: 2.5rem 0;
    border-collapse: collapse;
    border: 1px solid var(--divider-color)
}

table td {
    padding: .25rem .5rem;
    border: 1px solid var(--divider-color)
}

table th {
    background-color: var(--lightest-background-color);
    padding: .25rem .5rem
}

.c-btn .c-icon:hover,
button .c-icon:hover,
a .c-icon:hover {
    color: var(--link-color)
}

a {
    color: var(--link-color);
    transition: color .1s linear
}

.side-header a {
    color: inherit;
    text-decoration: none
}

svg {
    flex: none;
    transition: color .1s linear
}

p {
    margin: 0 0 1.5em
}

:matches(nav, .posts-collection) p {
    margin-bottom: .75em;
    margin-block-end: .75em
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

ul,
ol {
    margin-top: 0;
    margin-block-start: 0
}

ul li,
ol li {
    margin: 0 0 .75em
}

.person__bio ul,
.person__bio ol {
    padding-left: 1.5rem;
    padding-inline-start: 1.5rem
}

.docs-main ul,
.post-main ul,
.docs-main ol,
.post-main ol {
    margin: 1rem 0
}

ul[role=list] {
    list-style: none;
    margin: 0;
    padding: 0
}

ul[role=list] li {
    margin: 0
}

ol {
    list-style: decimal
}

ol li::marker {
    color: var(--link-color)
}

p:empty {
    margin: 0;
    display: none
}

figure {
    margin-bottom: 4rem;
    margin-block-end: 4rem
}

figure img {
    margin-bottom: 1rem;
    margin-block-end: 1rem
}

figure figcaption {
    color: var(--grey)
}

img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto
}

nav ol,
nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.video {
    width: 90%;
    max-width: 1400px;
    margin: 2em auto
}

.video iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto
}