CSS-Tricks·5yYou want enabling CSS selectors, not disabling ones
An enabling selector is what I call a selector that does a job without disabling the particular rule. Let's say we have list items and we want to add the margin to every one except the last one. First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element.
CSS-Tricks·5y“We had 90% unused CSS because everybody was afraid to touch the old stuff”
At PayPal, 90% of CSS was unused because people were afraid to touch it. That’s one of the reasons I sometimes like component-based-styling solutions. Because nobody is afraid of the styles anymore — they are tightly coupled to what they are styling. I’m excited that “scoped styles” are making a bit of a comeback in standards discussions.
CSS-Tricks·5yBuilding a Cool Front End Thing Generator
Animated CSS Gradient Generator is a tool for creating animated background gradients in pure CSS. This article is a basic Create Next App project. We are going to create a React component to describe an animated gradient. We want to provide these settings as data throughout our little app using a higher-order component, context/SettingsContext.
CSS-Tricks·5yStay alert
Chrome broke the web by disabling alert() and confirm() from cross-origin iframes. Users of CodePen, the widely-used code-sharing site, discovered that they were unable to use these functions in their projects. In the ensuing chaos the change was rolled back until 2022. It's a story about unloved APIs, and who owns the future of the web.
CSS-Tricks·5yNative JavaScript Routing?
Routing is a key piece of every web application. At its heart, routing involves taking a URL, applying some pattern matching or other app-specific logic to it, and then, usually, displaying web content based on the result. We can update the URL in JavaScript. We’ve got the APIs pushState and replaceState. That’s literally what “Single Page App” (SPA) means.
CSS-Tricks·5y"Disambiguating Tailwind"
The way you use some particular technologies can be super different from how someone else does, to the point they share little resemblance. I appreciated this bit of nuance from a post on Viget’s blog. There could be a whole article written about the many flavours of Tailwind, but broadly speaking those flavours are: 1. Stock tailwind, ie. no changes to the configuration, 2. Tailwind that heavily relies on @apply in CSS files but still follows BEM or some other component organization, 3. tailwind UI, and 4. heavily customizing Tailwind.