No, Utility Classes Aren't the Same As Inline Styles
The article argues against the common misconception that utility-first CSS classes are equivalent to inline styles, explaining their fundamental differences and capabilities.
Sarah Dayan is a front-end web developer behind Frontstuff, writing about Vue.js, utility-first CSS, testing, state machines, and performance-focused UI development with a strong eye for design and typography.
17 articles from this blog
The article argues against the common misconception that utility-first CSS classes are equivalent to inline styles, explaining their fundamental differences and capabilities.
Explains how to implement state machines in Vue.js applications using the XState library to manage complex UI state logic declaratively.
A tutorial on applying Test-Driven Development (TDD) principles to build and test a Vue.js component, using a color picker as an example.
A tutorial on unit testing a Vue.js component using Vue Test Utils and Jest, covering setup, best practices, and test implementation.
A developer explains how to use PurgeCSS to remove 250KB of unused CSS from a Tailwind CSS project, improving performance.
Compares chaining vs. extending CSS classes for modular CSS, discussing pros, cons, and maintainability in scalable projects.
A tutorial on building a shopping cart component using Vue.js and integrating the Dinero.js library for robust monetary calculations.
Explains common pitfalls when handling monetary values in JavaScript and introduces best practices and patterns for accurate financial calculations.
A guide to setting up a modern JavaScript open source project, covering dependency management, coding style tools, and automation.
A guide to creating multi-colored SVG icon systems using CSS variables, comparing them to icon fonts and explaining setup and styling.
An article defending utility-first CSS, comparing it to software design patterns and functional programming, and addressing common criticisms.
A hands-on tutorial for building a real-world star rating component using Vue.js, covering core concepts and practical setup.
A guide on using Sass maps to programmatically generate utility classes for colors, improving maintainability and scalability in CSS.
Explains Hungarian notation, a naming convention using prefixes to improve code readability and maintainability in JavaScript and CSS.
A guide to building a reusable JavaScript validator service to clean up data validation logic and adhere to DRY and SRP principles.
Explains a cleaner, more maintainable alternative to long chains of OR comparisons in JavaScript using arrays and indexOf.
Explains why targeting HTML tags directly in CSS is problematic for maintainability and scalability, advocating for using classes instead.