Reading Time: 14 minutesEvery once in a while someone asks specifically about how to manage CSS performance for a website. What if there’s a lot of components? What if there’s a lot of animations? What if there’s a lot of just CSS?
Category: CSS
WARNING!
Below you are about to see some CSS tips, tricks, hacks – some clever, some stupid. These are not guaranteed to work in every browser, nor do I care if they do. You’ll probably want to look at these in a webkit browser such as Chrome, Safari, Android, or Amazon Silk. I’ll apologize for how these look in Internet Explorer, if you apologize for using it to begin with.
CSS Hyphens, Words, Syllables, and Languages
Reading Time: 6 minutesThere’s a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps.
But if you use it, you’re going to need to make sure you’re also correctly identifying the language. And to understand why that matters, we need to talk about words and syllables.
Better selecting with a better :nth-child()
Reading Time: 3 minutesSo the :nth-child structural pseudo class is mighty handy already since it lets you select based on mathematical rules. But to my surprise, it got handier and no one told me. Which makes me think no one told you, either: … Continue reading
CSS Nesting, the :is() pseudo-class, and a guide to panicking about Sass
Reading Time: 24 minutesThis is a blog post I’ve been meaning to write for like two years but haven’t, because it is a complex topic that’s a kind of modern-day Ouroboros where you don’t really know where to start but at no point … Continue reading
Cyclomatic Complexity in CSS
Reading Time: 8 minutesThere’s a seldom-discussed concept in web software development called cyclomatic complexity which is a metric used to indicate how complex a program or unit of code is. It’s not discussed very often because, well, it’s really not exciting. You can … Continue reading
CSS: How to target an exact amount of classes
Reading Time: 3 minutesCSS continues to offer new ways to select things in ways we never could’ve imagined in the past (especially for an old timer like me). Today I want to focus on a possible (but not always probable) use-case: I have … Continue reading
Introducing the Form Baseline
Reading Time: 3 minutesSo a good while back I released this CSS utility / NPM Package called typography-baseline. It was a handy way to kickstart complex web projects because it set base typographic styles. Then I needed something for tables. And then I … Continue reading
Introducing the Table Baseline
Reading Time: 3 minutesSo a while back I released this CSS tool / NPM Package called typography-baseline.css. It was a pretty handy way to kickstart projects because it set some baseline styles to all my typography. More recently, I’ve come into some situations … Continue reading
Snippets: Debugging CSS
Reading Time: 3 minutesI have a very handy, very small CSS Snippet that I use to debug CSS whenever the browser starts starts misbehaving. I figure I’d share with you, in case you, too, needed such a snippet.
What is CSS Specificity, and how does it work?
Reading Time: 8 minutes
Folks who are brand new to web development, particularly front-end, might hear the term “Specificity” or “CSS Specificity” and when they look it up the answer can seem daunting and confusing.
I want to break it down in very simple, very non-technical terms so that someone brand-new to the world of front-end can understand what it is