More About CSS?

At first, modern CSS reset was nothing more than doing a "ctrl+a, ctrl+c" on a browser page, then pasting the copied HTML into a text file in order to save the element structure. Then if you were really, really hardcore, you would have saved each default.css from each browser release and carefully analyzed which settings change and which stayed the same. This would be very inefficient with the release of browser-specific hacks and other methods to try and fix one element's style across all browsers.

An example of this is the default margin and padding settings that differ between almost every browser on almost all elements. Because of this, a lot of developers threw away the idea of default styling and immediately applied their own custom CSS to all elements. Of course, this also has the effect of choosing a look for your element using your own CSS, and pasting the same element code onto another web page will not yield a consistent look. But I digress.

CSS, or cascading style sheets on the other hand, is a method of applying specific style changes to web pages. It was introduced in 1997, and it focused upon style and structure. A picture of the modern browser was not in the minds of the creators of CSS, but rather print media. This will have an effect on the work later on because it leads to a lot of browser inconsistencies and unusual default settings for elements.

So say for instance you’re trying to build a website! You have a great plan and some people from the neighborhood have expressed interest in making use of the internet! But where to start? Well, the best place is with all the hidden default styling provided by the browser itself. But first, a little history.

2. Benefits of Using a CSS Reset

First and foremost, this is the benefit that is usually stated by reset advocates. The idea is that if you build on top of a reset, you can be sure that your design is consistent across all browsers that you need to support.

Since your design has a baseline starting point on all browsers, when you're careful to use the same CSS for the same structural purpose throughout the design, you should see a more consistent rendering in terms of spacing, positioning, text size, etc. While this definitely can save some debug time with regards to odd layout and margin issues, it's not necessarily foolproof. It could be quite difficult to get "the same CSS for the same structural purpose" to work cross-browser, and even if you buy into that, it's not to say that your design will look the same on old versions of browsers that you're trying to support—as those old browsers don't necessarily have a correct implementation of CSS.

However, every bit helps, and this is a valid point with regards to seeking consistency in your designs across the multitude of browsers out there.

When starting a new CSS-based project, it's often tempting to zero out the browser's default styles, remove some of the common non-semantic styling that most browsers apply, and clean everything up with a fresh and clean design. Not having all the headaches and conflicts, and avoiding the compatibility problems that can occur when building on top of browser defaults is a valid reset advocate's approach.

2. Advantages of Using a CSS Reset

Advantages of Using a CSS Reset

1. Introduction The first ever offering of a CSS reset file, to the best of my knowledge, came out of a discussion on the web development forum I once observed. The goal of the file was identical to the reset styles posted above, but it began with the universal selector. After many debates and arguments, it was finally clarified, and this is now the most commonly known form of CSS reset.

The advantage here, rather than using a pre-made CSS reset file, is that you can see specifically which styles are being reset, and you can very easily delete the reset styles if you find that you have problems in the future. This can save loading time if you're wanting a quick solution.

In its simplest form, a CSS reset is a set of CSS rules that removes all the styling provided by the user agent's default styles. This is often used as a starting point when creating your own CSS. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body tag, which is why it doesn't show up unless you set it. Usually margins are not set on the p and h1 elements in the browser's default stylesheet, so I felt the need to add them in.

1.1. Overview of CSS Reset
The reason they look like that is because the default stylesheet that the browser applies has certain rendering rules for HTML elements. These default styles are quite different from how most web developers want their site to look. IE 7 is quite close to how most developers want it, so only one or two CSS hacks are needed to help fall in line with how the W3C wants the standards to be. So, mostly, the CSS Reset is for people who want to make their sites look the same in all browsers to save debugging time tweaking the site.

Every web designer's goal is to avoid the problems related to inconsistent appearance between web browsers. The aim of using a CSS Reset (or CSS Normalization) is to reduce inconsistencies across browsers. By including a CSS Reset in your CSS style sheet, you can have more consistency in the default style rendering of current browsers. Things like IE 7 have some weird margins and misalignment of the text and form elements, as well as the much-dreaded large padding on the ul. For example, if you create a simple CSS-only menu without any margins and padding, and test it in each browser, you will see that they all look slightly different.

1.2. Purpose of CSS Reset
Resetting an element's CSS to a clean slate is a more solid approach. By utilizing a CSS Reset, designers can start afresh and avoid accidentally incorporating browser inconsistencies into their designs.

Many web developers appreciate the simplicity of using default browser styles as a solid foundation to build their unique designs on. This allows for a platform where designers know how different elements will render. However, this approach is riddled with well-documented browser inconsistencies and this is something that creates a lot of avoidable work for no added value.

Normalize.css is a customizable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between Normalize and CSS resets and detailed our findings in a succinct blog post.

A CSS Reset (or "Reset CSS") is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In essence, it's like a 'nuclear' option, it erases all styling and reverts the elements to a consistent base state. This is useful because while it is often only a few lines of code, it saves a lot of time in the long run and ensures you improve cross-browser consistency.

Erasing properties and default browser styles is a crucial aspect of making elements appear the same cross-browser. There are a variety of ways to do this, some serve to reduce browser anomalies and improve consistency, others require more work but are ultimately more thorough.

/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
The meaning of this rule is quite obvious, so I will explain it briefly: I am making all elements and pseudo-elements use border-box for sizing instead of the default content-box. Since we are now more concerned with giving browsers the ability to handle flexible layouts that involve fluid type and space, this no longer holds as much value as it used to. However, there are few projects that don’t have any explicit sizing somewhere; therefore, it remains relevant in resets.

html{
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

The reason for that is, Mobile Safari bumps up the default font-size when you move a website from portrait to landscape. This only happens on phones — it does not do it on iPad. Safari has done this for a long time as a way to make non-mobile optimized websites more readable. While undoubtedly useful during a time when literally zero websites were optimized for mobile devices, it’s far less helpful now.

You can control this font-size inflation with the -webkit-text-size-adjust property. You can set this property to a percentage of your choice (the maximum text size increase), ‘auto’ (default behavior which enlarges the text) or none (which prevents text from zooming in). Setting it to 100% will be equivalent to ‘none’.

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
}

Above I am removing all the margins instead of sides in the older reset


/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

The above is basically a feature where when you remove a list styling, the semantics for voiceover will also be removed. Removing the list styling default will need to removed as it serves as a little reward

/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}

The above is a line height that gets inherited. A min height like a 100vh helps alot especially when you going to set a decorative element. Also, svh unit is said to be much better than dvh, but vh actually takes the cup

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}

Definitely comes in handy when using the line-height, as it is equally handy to have a shorter line-height for both buttons and heading. also helps fonts not clash.

* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}

The text wraps on heading helps give a good look to the headings

`
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}

`
The rule above is to help the text decoration not interfere with ascenders and descenders. From the currentColor, helps text inherit color too.

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em
}

If the textarea is used the rule that becomes a lot handy, elements are used for multiple lines of texts

/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}

scroll-margin actually adds a space above an element after it has been anchored