Crafting a Minimal and Predictable CSS Boilerplate
When starting a new web project, getting your CSS up and running quickly is essential. One way to achieve this is by using a CSS boilerplate – a set of unoriginal and unspecific CSS rules designed for inherent use in web projects. In this article, we’ll explore the must-haves of a modern CSS boilerplate, aiming to create something minimal, predictable, and easy to maintain.
Resisting the Urge to Reset
Many popular CSS boilerplates tend to be overzealous, resetting every CSS property known to exist. However, this approach can be counterproductive. Instead, let’s focus on creating a boilerplate that works in harmony with web browsers.
Essential CSS Rules
Here are some essential CSS rules to include in your boilerplate:
Don’t Reset Margins
Web browsers apply margins to certain HTML elements for legitimate reasons, such as ensuring readability and accessibility. Avoid resetting these margins, as it can lead to unnecessary redefinitions later on.
Reset the Box Model
The box model is a fundamental aspect of CSS layout. To make it more logical, use the following rule:
css
*, *::before, *::after {
box-sizing: border-box;
}
This ensures that the width of an element includes its padding and border.
Force Images to Behave
By default, images are inline elements, which can lead to unwanted spaces underneath them. Fix this by applying the following rule:
css
img {
display: block;
max-width: 100%;
}
Enhance Link Underlines
Improve the aesthetic of link underlines by making them thicker and more spaced out:
css
a {
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
Change the Root Font Size
If you prefer using rem units, change the root font size to 62.5% to make conversions easier:
css
:root {
font-size: 62.5%;
}
Disable Text Inflation Algorithm
Prevent web browsers from inflating font sizes on mobile devices by applying the following rule:
css
:root {
text-size-adjust: none;
}
Enable Smooth Scrolling
Improve the user experience by enabling smooth scrolling:
css
html {
scroll-behavior: smooth;
}
Rethink Focus Styles
Use the :focus-visible pseudo-class to create a less aggressive approach to styling focused elements:
css
:focus-visible {
outline: none;
}
Provide Interactive Elements with a Cursor
Add a pointer cursor to interactive elements that don’t already have one:
css
button, [role="button"] {
cursor: pointer;
}
By incorporating these essential CSS rules into your boilerplate, you’ll create a solid foundation for your web projects. Remember to review and update your boilerplate regularly to ensure it remains minimal, predictable, and easy to maintain.