CSS

Last updated on Oct 26, 2022

Here are my notes on CSS. You will find tips, tricks, and some good other resources (videos, sites and more). Suggestions are welcome!

Debugging in css

Putting lines or shades in elements helps you to debug issues in CSS, for example, lines:

* {
  box-sizing: border-box;
  outline: 1px solid limegreen !important;
}

And shades

* {
  box-sizing: border-box;
  background: rgb(0 100 0 / 0.05) !important;
}

source: The console.log() of css

Tips on CSS

If you are learning CSS, it’s better to learn plain CSS first. I know, there are many better ways and shortcuts like Tailwind and Bootstrap, but CSS remains king as any processor translate to plain CSS language. So, if you have problems with a CSS framework, you won’t be able to fix the if you don’t know CSS.

Having said that, after you know the meaning of some lines, it’s cool to use a framework, which is the bread and butter of your daily work on the subject.

Other random tips I found interesting

Firefox dev tools are orders of magnitude better than Chrome dev tools when it comes to CSS. Take advantage of that.

Replace `@media` queries for `clamp()`

For a good responsive design, you usually do @media queries, like this:

article {
  width: 50%;
}
@media only screen and (max-width: 600px) {
  article {
    width: 200px;
  }
}
@media only screen and (max-width: 1200px) {
  article {
    width: 800px;
  }
}

But if you intend to do that for every piece of CSS code, you would shoot yourself in the foot.

Instead, do this:

article {
  width: clamp(200px, 50%, 600px);
}

… which corresponds to minimum, preferred and max

source: 10 CSS Pro Tips - Code this, NOT that!

Flexbox vs Grid

Good video comparisons here:

If you want to have a link to skip to the main content, you can do this on the html:

<body>
  <header>
    ...
    <a class="skip-link" href="#main-content">Skip to main content</a>
    <main id="main-content">...</main>
  </header>
</body>

and in the CSS

// the outline
// :not selector is for excluding the skip-link class
:not(.skip-link):focus {
  outline: 5px solid red;
}

.skip-link {
  position: fixed;
  text-align: center;
  background-color: #333;
  color: white;
  padding: 0.5rem;
  translate: 0 -100%; // hides the link by default
  transition: translate 150ms ease-in-out; // toggles the animation
}

.skip-link:focus {
  translate: 0;
}

source: Web Dev Simplified - Why Does Nearly Every Site Have This “Invisible Unclickable“ Link?

this post comes from github, view it here

CSS