When creating web pages or web applications you work with CSS anyways. Usually you will style all elements because you need to work around the client-side CSS definitions. So why not go all in and unstyle all elements first, so you don’t need to work around any client-side CSS definitions? (What you’re intentionally or naively doing anyways)
body,
body *,
body ::before,
body ::after {
all: unset;
font-family: sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
The “Cleansing Fire” CSS Reset addresses all elements (including before and after pseudo elements) within the body element of a website, including the body element itself. Using the universal selector alone does not address the pseudoelements but addresses all elements, including those that are not meant to be styled, like <title> for example.
The most relevant definition is all: unset that unsets all unsettable non-inherited styles of all of the addressed elements, causing them to default to being displayed as inline with default font size and no colors set. This could be enough and gives a good base. But usually some other attributes are commonly set in a CSS reset definition.
By setting font-family: sans-serif all elements use a non serif font. What font it is, depends on the client settings. On Windows it’s usually Arial, on Linux-based setups it’s likely DejaVu Sans. If you have a webfont you want to use, define it before the reset and then use it’s name as usual.
box-sizing: border-box makes all boxes using the size as limit. So when you define with 200px on an element and then decide it needs a padding and a border, the “outer size” will not grow but will stay at 200px (or whatever size you used). The “inner size” will shrink accordingly. This results in a more consistent behavior when setting sizes and positioning elements.
With margin: 0 and padding: 0 you define that all margins and paddings are removed. This should be addressed with the all: unset definition, it’s set just to be sure. It’s a cleansing fire after all :)
When removing all style definitions from the objects, some objects do not work normally, like tables or lists. To restore the minimum base functionality, the following styles can be used.
/* Base elements */
body { display: block; }
a { cursor: pointer; }
img, video, canvas { overflow: clip; overflow-clip-margin: content-box; }
/* Tables */
table { display: table; }
th, td { display: table-cell; }
tr { display: table-row; }
thead, tbody, tfoot { display: table-row-group; }
/* Lists */
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li { display: list-item; }
Here are some more default CSS values that can be set. If you find yourself restoring most of those values you might not really need the “Cleansing Fire” CSS Reset.