This article presents a personal CSS reset/base created by the author, which goes beyond simply resetting browser styles to include utilities for every project. The author emphasizes that the approach is opinionated and reflects their personal preferences.

Here are the main ideas and functionalities of the CSS reset/base:

• Resets Margins, Paddings, and Borders: The CSS reset removes margins, paddings, and borders from most HTML elements. This is based on Meyer's CSS Reset, but with modifications to exclude deprecated or unused elements.

• Typography:

  • The base sets the font-size of the html element to 62.5%, and then uses rem units.

  • It resets font-family, font-size, and line-height on every element to inherit from its parent, aiming to style elements differently from the default paragraph styles.

  • Link colors are set to inherit the body text color.

• Layout and Box Sizing:

  • HTML5 elements are set to display: block;.

  • box-sizing is set to border-box for all elements, including pseudo-elements, to make layout predictable.

• Resets Specific Element Styles:

  • Styles for tables, lists, images, and blockquotes are reset to remove default browser styling.

    • For example, tables have border-collapse and border-spacing set to 0.

    • Lists have their list-style set to none.

    • Images and videos have a max-width of 100%.

• Attributes and States:

  • Elements with the hidden attribute are set to display: none !important;.

  • Disabled elements get a cursor: not-allowed style.

  • The :focus:not(:focus-visible) selector removes the outline when the browser determines it isn't needed.

• Screen Reader Only Utility: A .sr-only class is added to visually hide elements while keeping them accessible to screen readers.

The author includes this CSS reset/base in every project, which is a personal preference, and is sharing it to show the way they work. They invite others to share their own approaches to CSS resets/bases.