daikikoharaのブックマーク - はてなブックマーク

An Interactive Guide to CSS Grid

IntroductionCSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts. It's also surprisingly complex. It took me quite a while to truly become comforta ble with CSS Grid! In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamental

daikikohara 2023/11/23

css
grid

リンク

Color Formats in CSS

CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and see which option will serve us best. Keep reading.

daikikohara 2022/11/30

css

リンク

Delightful React File/Directory Structure

IntroductionReact is famously unopinionated when it comes to file/directory structure. How should you structure the files and directories in your applications? Well, there is no one “right” way, but I've tried lots of different approaches in the 7+ years I've been using React, and I've iterated my way to a solution I'm really happy with. In this blog post, I'll share the structure I use across all

daikikohara 2022/03/15

リンク

Demystifying styled-components

When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w

daikikohara 2021/06/23

リンク

The styled-components Happy Path

The styled-components Happy PathMy personal suite of “best practices” For a few years now, my #1 favourite tool for managing CSS in React apps has been 💅 styled-components. It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React! It shares something else in common with React: developers often disli