Skip to content
loading...

What Default CSS Styles Do You Apply To Every Project?

twitter logo github logo ใƒป1 min read  

Something that I think about and work on a lot is writing better CSS. Trial and error and reading have led me to adopting practices like declaring box-sizing: border-box on sites
to simplify any box-model related code I write, or setting the height and width on pages to 100vw/vh to ensure a concrete value that scales with device width. But I'm curious what the DEV community has to say about this: what are the most integral CSS properties that you add to every project?

twitter logo DISCUSS (4)
markdown guide
 

Setting max-width to 100% on images is good, it helps make websites responsive.

Also setting some default transitions on common elements can be useful. I like to set a transition for color, background-color and border on links, buttons, submit buttons.

Using something like normalize.css is good too. (github.com/necolas/normalize.css)

 

These are smart changes I definitely did not think about before! I've wondered about normalize as of late; I write in Gatsby a lot, and I've noticed their default
styles have gotten a lot more comprehensive, like they're added their own version of normalize. But even before that, it seemed like I didn't run into any odd cross-browser behavior on sites I was working on. I suppose it also matters how far back you need to go in terms of compatibility?

 
html {
    box-sizing: border-box;
    font-size: 100%;
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
 
Classic DEV Post from Jun 18 '19

Discussing the launch of Libra, "A new global currency"

A thread to talk about the launch of Libra

Michael Caveney profile image
I am a largely self-taught dev from the greater Boston area. The technologies I'm most excited to work with these days are React, Gatsby, and Apollo.