What CSS tip do you want to share with others?

Regardless how you do CSS, I strongly recommend considering vertical and horizontal "rhythm" (the distance between stuff) as something to apply as utility classes directly to HTML.

All too often CSS starts to get unmaintainable as people try to teach a previously standalone component how to position itself relative to its surroundings in a growing range of situations.

I like this one:

ul {
  counter-reset: counter;
}

li:before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

to increment each item you add to a ul list automatically and it also supports nested lists.

and this one

.breadcrumb a:first-child::before {
    content: " » ";
}
.breadcrumb a::after {
    content: " /";
}
.breadcrumb a:last-child::after {
    content: "";
}

to easily create breadcrumb navigation

I like

html {
  scroll-behavior: smooth;
}

beacause it can save you some lines of JS.

Also, some times I happen to need to center-align an absolute element with:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

CSS Counters and object-fit can be very handy under specific circumstances

The same goes for

&::before {
      content: attr(data-attribute);
}

(Here is a practical example). On that note, I love the potential uses of ::before and ::after pseudoelements in general.

pointer-events: none;

allows you to click through an element.

visibility:hidden;

combined with something like opacity: 0; allows you to hide an element avoiding display: none;, which allows you to apply CSS effects.

input[type="checkbox"]:checked + label {
  // Do something
}

allows you to style the label of an checkbox only when it is checked. Combine it with the ::before pseudoelement and you can have some nice, js-free effects.

Hi @adrianmarkperea !

I think you should def check the clamp() function, so you don't need to use min(max({MIN_SIZE}, 4vw), {MAX_SIZE}) but just clamp({MIN_SIZE}, 4vw, {MAX_SIZE}) 😉

h1 {
    /* font-size: clamp(MIN_SIZE, 4vw, MAX_SIZE)}; */
    font-size: clamp(2rem, 4vw, 4rem);
}

h1 {
    /* font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE}); */
    font-size: min(max(2rem, 4vw), 4rem);
}

It has the same browser support, too.
MDN Reference

I don't use it all the time, but this one comes in handy when you need something to go full width but you're confined by a container it's already in. For example, an article where you want full width images, but fixed width content.

.breakout {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }

This is a really cool tip! I’ve always struggled with font sizes and what they should roughly be on desktop and mobile but this would help with that as I won’t need to worry about changing them.

The adjacent paragraphs snippet is cleaner than the solution I currently use. I select the last paragraph child to set a different margin.

Also, in case using position: absolute destroys your layout, an alternative would be negative margins. I use this for micro-adjustments, too!

Thanks for sharing!

Hey, great discussion idea! 🏆

Center one or more items within a container horizontally and vertically:

display: grid;
place-content: center;

Details and more centering options >

My other favorite is responsive equal-width columns that break to row layout below a minimum width:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));

See it in practice >
Read about how it works >

My best friend,
margin: 0 auto;

This is gonna be helpful to me and other devs too who are tired of using media quiries to change font sizes. Thanks!

love using object-fit: cover; when appropriate. I work a lot with image grids and random crops (thanks editors!) so we gotta make sure it looks decent across the board

Using rem instead of em or px to handle different responsive behaviour on different screens, setting font-size on html root element:

html {
  // with 100% 1rem === 16px
  font-size: 100%;
}

p {
  font-size: 1rem;
}

@media screen and (max-width: 600px) {
  html {
    // at 90% 1rem equals to (16px/100 * 90) = 14.4px
    // our p element will have font-size: 14.4px
    font-size: 90%;
  }
}

Remove some stupid quirks in mobile browsers, particularly iOS Safari.

* {
  -webkit-tap-highlight-color: transparent:
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

html {
-webkit-tap-highlight-color: transparent;
}

This is useful to remove default blue square when tapping object on mobile.

One of my favourite css rule is the following, to make sure images never grow outside their parent element. Simple but very effective in my day to day work. :)

img {
    display: block;
    max-width: 100%;
    height: auto;
}