OR 

Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem)

This is a real worry these days. I‘ve heard it from lots of lots of developers. The years tick by on their projects, and all they ever seem to do is add to their CSS, never remove. It‘s not just a feeling, I‘ve talked with companies before that track hard data on this. Over five years of tracking the size of their stylesheet, and all it‘s ever done is tick upwards in size. This could be considered problematic for several

favicon of http://css-tricks.com

The 1,000 Podcasting Setup

I figure between (as I write) the 267 episodes of ShopTalk, 134 episodes of CodePen Radio, 154 video screencasts (and many hundreds more as part of the different series), and all my guest podcast apperances, I‘m edging on 1,000 things I‘ve voice-recorded for public consumption. 98% of that was with the Rode Podcaster, the same exact microphone I documented using in 2008. I figured it was about time for an upgrade, as I plan to contin

favicon of http://css-tricks.com

A Pretty Good SVG Icon System

I‘ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant. I‘ve also often advocated for a SVG icon system that is based on symbols (an "SVG sprite") and the use element for placing them. I‘ve changed my mind a little. I don‘t think that is a bad way to go, really, but there

favicon of http://css-tricks.com

Creating a Design System Process with UXPin

There‘s never a better time to work in software. Developers and designers are among the most desired people on the market. Companies all over the world seem to have a never-ending thirst for software experts. In 2003 the U.S. Bureau of Labor Statistics estimated the number of software engineers working in the US to be 677,900 people. In 2016, this number increased over 5 to 3,870,000. At the same time, design teams grew faster than software

favicon of http://css-tricks.com

Server-Side React Rendering

React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React sever-side? Suppose you‘ve built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren‘t showing up on Google and don‘t look good when posted to Facebook. Seems solvable, right?

favicon of http://css-tricks.com

How the minmax() Function Works

Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we‘ve been experimenting with lately. What‘s especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts. Direct Link to Article Permalink How the minmax() Function Works is a po

favicon of http://css-tricks.com

Handling Long and Unexpected Content in CSS

When we write CSS, sometimes we forget about some edge cases in the designs. For example, when the content is longer than we expected and we didn‘t account for that possibility, our design could break. We can‘t guarantee that our CSS will always work as expected, but at least we can reduce that by testing different types of content. When you code CSS, you‘re writing abstract rules to take unknown content and organize it in an un

favicon of http://css-tricks.com

Naming Things is Only Getting Harder

I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment. They‘re not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows. What caught me was the fact that I can name these lines. It‘s not a requirement (you can use numbers), but the ability to name the grid lines is something we can do here. In fact,

favicon of http://css-tricks.com

Reactive UI‘s with VanillaJS Part 2: Class Based Components

In Part 1, I went over various functional-style techniques for cleanly rendering HTML given some JavaScript data. We broke our UI up into component functions, each of which returned a chunk of markup as a function of some data. We then composed these into views that could be reconstructed from new data by making a single function call. This is the bonus round. In this post, the aim will be to get as close as possible to full-blown, class-based

favicon of http://css-tricks.com

Using Mixins in Vue.js

It‘s a common situation: you have two components that are pretty similar, they share the same basic functionality, but there‘s enough that‘s different about each of them that you come to a crossroads: do I split this component into two different components? Or do I keep one component, but create enough variance with props that I can alter each one? Neither of these solutions is perfect: if you split it into two components, you

favicon of http://css-tricks.com

Free Guide to Using cPanel & WordPress

Managed WordPress hosting is a great choice if you need a hosting solution that‘s optimized for WordPress. But it‘s only for WordPress. What if you need more? What if you need email hosting? What if you need to run other software alongside WordPress? What if you need more control than what managed WordPress hosting allows, but without the complexity of a VPS? There‘s an easy solution: host everything in one place, and manage it

favicon of http://css-tricks.com

Connect: behind the front-end experience

Some fantastic behind-the-scenes stuff about Stripe‘s design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques. Using CSS grid for their iconic background stripes Using 3D cubes for aesthetic flair Using reduced motion media queries to accommodate that preference Using the Web Animation API for event-triggered keyframe-like animations in JavaScript Plus one I‘d never seen before: Connect&lsqu

favicon of http://css-tricks.com

What Does a Well-Documented CSS Codebase Look Like?

In the front-end community, there is a lot of attention related to documenting JavaScript. That‘s not so much the case with CSS. Often times I feel like lost when I join a project with minimal or no CSS documentation. Even though CSS is relatively easy to write, it can be quite hard to maintain. The specificity, the global scope of everything, and the lack of guidance can easily lead to inconsistency, code duplication, and over-complication

favicon of http://css-tricks.com

Introduction to Webpack: Entry, Output, Loaders, and Plugins

Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. Webpack has gained popularity in the last years because of its power and scalability, but some developers found its configuration process confusing and hard to adopt. We‘ll go step by step from an empty configuration file to a simpl

favicon of http://css-tricks.com