Fresh Article

How Well Do You Know CSS Layout?

The difference between a CSS good experience and a long frustrating one is oftentimes a matter of a few small details. CSS is indeed nuanced. One of the most common areas where I see struggles is layout. Personally, I like to study patterns. I notice that I tend to use a small group of patterns to solve the majority of my layout problems. This article is about those CSS patterns I use to get myself through layout challenges. It is … Read article

Link

CSS doesn’t suck

I'm not so protective of CSS that I'm above hearing it criticized, but I'm certainly in agreement here. CSS does not suck. I love how the post is framed to hype up current CSS features the way features of other languages and tools are hyped:

Imagine if a tech dude walked on stage at a conference and said the following:

“This declarative language will gracefully continue on failure, allow you to write global and scoped code, and it will work

Read article
user avatar
Shared by
Chris Coyier
Link

In Defense of Utility-First CSS

A rather full-throated argument (or rather, response to arguments against) utility (atomic) CSS from Sarah Dayan. I wondered recently if redesigns were potentially a weakness of these types of systems (an awful lot of tearing down classes) which Sarah acknowledges and recommends more abstraction to help.

I also wonder about workflow. I sort of demand working in an environment which offers style injection, so working with CSS feels smooth. I also worry that having to change HTML every time … Read article

user avatar
Shared by
Chris Coyier
Article

Using React Portals to Render Children Outside the DOM Hierarchy

Say we need to render a child element into a React application. Easy right? That child is mounted to the nearest DOM element and rendered inside of it as a result.

render() {
  return (
    <div>
      // Child to render inside of the div
    </div>
  );
}

But! What if we want to render that child outside of the div somewhere else? That could be tricky because it breaks the convention that a component needs to render as a new … Read article

Article

Design v17

We rolled out a new site design on January 1! This is the 17th version of CSS-Tricks if you can believe that. The versions tend to evolve a decent amount beyond the initial launch, but we archive screenshots on this design history page. Like I said in our 2018 thank you post:

This is easily the most time, effort, and money that's gone into a redesign since the big v10 design. There are a lot of aesthetic changes,

Read article
Link

The Ethics of Web Performance

Tim Kadlec on the issues surrounding poor web performance and why it’s so important for us to care about making our sites as fast as possible:

Poor performance can, and does, lead to exclusion. This point is extremely well documented by now, but warrants repeating. Sites that use an excess of resources, whether on the network or on the device, don’t just cause slow experiences, but can leave entire groups of people out.

There is a growing gap between what

Read article
user avatar
Shared by
Robin Rendle
Article

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be.… Read article

Keep browsing in the archives

Monthly Mixup

Snippet

A Complete Guide to Grid

Article

Twenty Years as a Freelance Web Developer: Wisdom Gained and Lessons Learned

Snippet

Smooth Scrolling

Monthly Sponsor
Thanks, monday!
monday logo
icon-link icon-logo-star icon-search icon-star