The CSS Reset
I’ve found that with web development there is a huge number of different things that I would have no idea were even possible (or best practice) without explicitly being told so. I think this is especially true with CSS — there are seemingly endless possibilities of declarations and values, many of which have only very niche applications, but some are certainly relevant to any project. A concept that I only recently came across is called a CSS reset.
The merits of a CSS reset are certainly up for debate, but the reason for taking this concept into practice is essentially to reduce inconsistencies of appearance for the site across different browsers. These days, the abovementioned inconsistencies may be less frequent than in the past, yet a CSS reset is still a great way to update any unwanted default behaviors from the very beginning, ensuring a less painful process of applying various CSS declarations across different elements and classes.
As far as I can tell, there are really no hard and fast rules that one must follow when creating this reset — some strongly-opinionated developers prefer to write there own complex resets, whereas others prefer to keep things simple. At the bottom of the post I’ve included a link to a file that is called “The Meyer Reset.” This was a css reset that became popular in the mid-2000s, and a quick look shows that there is a fair amount of detail and declarations for a large number of elements. If I were using this reset, I would be sure to just include this as a separate CSS file, and write my own rules on a separate stylesheet. However, another more simple option would be something like this:
This option would be just a few lines to add to the top of an already existing stylesheet, and for me, would probably be the way I would lean towards doing things. My preference would be to not have to import one more CSS file, and I don’t mind adding additional rules later for things missed by the reset so I would lean towards option two — but it’s definitely comes down to preference. The main issue across browsers is differences of a few pixels for default margin/padding, and this simple four line snippet will likely take care of most issues.
I think with CSS that most people, myself included, are looking for ways to spend less time on CSS, and by writing some go-to “boilerplate” CSS to include with every project, we can reduce the time spent with some of the details that seem small, but definitely shouldn’t be overlooked!
