Initial CSS Setup for a Web Project

It’s essential to globally set box-sizing: border-box; for all elements and pseudo-classes. This will make the browser include border and padding when calculating the size of elements, simplifying layout work without affecting external components, as the default value is rarely used nowadays.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Next, set dimensions for body and remove the default margins.

margin and padding come with default values in various browsers, so it’s better to set them to zero immediately.
height: 100dvh; – this dynamic height accounts for mobile browser panels.
width: 100%; – using percentages here is important, as vw can break the layout when a vertical scroll appears. Setting width and height is also crucial for the correct positioning of absolute elements.

body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  width: 100%;
}

If your framework hasn’t set it by default, make sure to include an HTML meta tag for viewport width settings.

<meta name="viewport" content="width=device-width, initial-scale=1" />

If you’re using Nuxt, also set default dimensions for the main wrapper block:

#__nuxt {
  height: 100%;
  width: 100%;
}

I also recommend removing default padding and styles for lists, as you’ll likely remove them in most cases.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Similarly, remove styles from links, as they often need customization:

a {
  text-decoration: none;
  color: inherit;
}

It’s possible to carefully remove the default outline. This is beneficial since it varies across browsers, but it’s important to consider accessibility. If you remove it, make sure to provide a substitute for focus indicators:

*:focus {
  outline: none;
}

CSS Debugging

A common scenario is when your design breaks, creating unexpected scrollbars, making it hard to pinpoint the issue. This CSS property can be a quick visual aid (leave it commented in your code):

*,
*::before,
*::after {
  background: rgb(0 100 0 / 0.1);
}

The overflow-x: clip property can also help fix layout issues. I recommend setting it on the body or main wrapper.

Media Mixins

To avoid memorizing screen sizes, you can create SCSS mixins:

$max-width-tablet: 1024px;
$max-width-mobile: 768px;

@mixin desktop {
  @media only screen and (min-width: $max-width-tablet + 1) {
    @content;
  }
}

@mixin tablet {
  @media only screen and (min-width: $max-width-mobile + 1) and (max-width: $max-width-tablet) {
    @content;
  }
}

@mixin mobile {
  @media only screen and (max-width: $max-width-mobile) {
    @content;
  }
}

Avoid creating too many sizes! Usually, three breakpoints are enough. CSS is still code and needs maintenance, so only add what’s necessary.

@use "mixins/media";

@include media.desktop {
  padding: 0;
}

CSS Properties. Dark/Light Themes

Personal tip: store all project CSS properties in CSS variables.

Instead of SCSS/LESS variables, use CSS properties at the :root level.

:root {
  --font-size: 10px;
  --font-size-small: 14px;
  --font-size-header-nav: 25px;

  --color-text: #dcddde;
  --color-text-secondary: #dcddde;
  --color-primary: #ae0000;

  --color-background: #171717;
  --color-background-secondary: #222;

  --color-scroll: #6c6c6c;
  --color-border: #6c6c6c;

  --indent-base: 1rem;

  --z-index-backdrop: 100;
  --z-index-global: 99999;

  --border-base: 1px solid var(--color-border);

  &.light {
    --color-background: #fff;
    --color-text: #333;
  }
}

This approach keeps the project in a single design code, allows for quick redesigns, and even lets the community easily create their own custom styles through browser extensions, like Chrome Extensions.

A few tips for CSS properties:

• Start names with the CSS property type. This improves navigation for developers.
• The second part of the name should be abstract (e.g., avoid color-blue), which allows flexibility in redesigns.
• When using light and dark themes, set dark theme properties first to reduce eye strain for users.
• CSS properties cannot be used in media queries as attributes.
• Use pixels for the HTML font size, but rem for all other sizes.
• Spacing related to text (inputs, headers, etc.) should have separate rem properties to ease redesign adjustments.