Skip to content

Instantly share code, notes, and snippets.

@lushiyun

lushiyun/css-resets.css

Last active December 15, 2022 14:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lushiyun/2204db7dfbd4ce1c7ab0e4e00d4397e7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lushiyun/2204db7dfbd4ce1c7ab0e4e00d4397e7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lushiyun revised this gist Dec 15, 2022. No changes.
  2. lushiyun renamed this gist Dec 15, 2022. 1 changed file with 0 additions and 0 deletions.
    0 CSS resets → css-resets.css
    View file
    File renamed without changes.
  3. lushiyun created this gist Dec 9, 2022.
    84 changes: 84 additions & 0 deletions CSS resets
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    /*
    1. Use a more-intuitive box-sizing model.
    */

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

    /*
    2. Remove default margin
    */

    * {
    margin: 0;
    padding: 0;
    }

    /*
    3. Allow percentage-based heights in the application
    */

    html,
    body {
    height: 100%;
    }

    /*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
    */

    body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    }

    /*
    6. Improve media defaults
    */

    img,
    picture,
    video,
    canvas,
    svg {
    display: block;
    max-width: 100%;
    }

    /*
    7. Remove built-in form typography styles
    */

    input,
    button,
    textarea,
    select {
    font: inherit;
    }

    /*
    8. Avoid text overflows
    */

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

    /*
    9. Create a root stacking context
    */

    #root {
    isolation: isolate;
    }