Css Architecture

Creating custom component libraries for multiple products or applications can be challenging, particularly for companies that need to maintain two or more different design systems. The Three Layer UI Component Architecture is an approach for maintaining reusable components we can use as building blocks for multiple design systems...

Years of writing and maintaining CSS code and remarks by Mark Dalgleish and Adam Wathan, along the same line, lead me to conclude that the spacing between HTML elements should be determined by their parent element in almost all cases.

Tailwind CSS is a divisive issue in the web development world: some love it, others love to hate it. This article is about one specific feature of Tailwind CSS: its antifragility...

Again and yet again, we hear and read about the problems of CSS. And there are some pitfalls you can fall into, mostly because of the global nature of CSS. But I argue that we solved those problems now multiple times...

After trying to go all-in with utility classes a few times, I decided that, for me, this is not the right approach. But one thing irks me and makes me think twice if I'm not perhaps just being stubborn...

In the following screenshot, you can see a popular pattern for landing pages: repeating sections of an image on the one side and text on the other side where the image reaches the edge of the screen...

Many people, including me, are very skeptical about the utility-first approach of Tailwind CSS and other similar CSS frameworks like Tachyons. But I think it is essential to be open-minded about new ideas and techniques, especially if many people like it...

Tailwind is a CSS framework that I never used extensively, but I always found it interesting enough to keep it on my radar and occasionally play around with it. Today we explore how we can use Tailwind CSS with Vue.js. In this article, we identify potential pitfalls when using utility-first CSS frameworks and how to avoid them. Most importantly, we find out how to use Vue.js functional components to create abstractions for repeating patterns like cards and headlines...

Tailwind CSS is one of the rising stars in the CSS framework world. It's especially popular in the Laravel and Vue.js community. In this article, we learn how to set up Tailwind CSS to work with a Vue CLI powered application...

Recently I started thinking about magic numbers. Until this point I haven't given much thought to what the term “magic number“ actually means in the context of CSS. I thought about it as basically all numbers in my CSS. The logical solution was to use variables for everything. But having read some articles on this topic and after further thinking about it, I realised that not every number in your CSS code is inevitably a magic one...