CSS

CSS selectors are globally scoped by default, meaning a class intended for one element can inadvertently affect others far removed in the document tree, causing 'CSS hell' in large-scale projects.

Email client CSS support is antiquated with very few styling possibilities available. This creates a major disconnect from modern web CSS and requires developers to use outdated techniques.

Adding Tailwind to legacy projects with existing CSS can cause style conflicts and break existing functionality. Tailwind's style reset and generic class names (e.g., `.hidden`) can override existing CSS logic unintentionally.

Setting one CSS property often has unintended consequences across a dozen other properties due to cascading rules and default values the developer never explicitly set. This makes CSS hard to reason about and requires trial-and-error debugging.

Tailwind's `@apply` directive only works within Tailwind and is not part of the CSS standard. CSS files written for Tailwind are fundamentally incompatible with other CSS frameworks and tooling, creating a one-way dependency that prevents migration.

Developers frequently forget the `container-type` declaration when implementing container queries, and the interaction between container queries and cascade layers creates complex debugging scenarios. Incorrect implementation can cause performance issues despite the feature's general benefits.

Large, unoptimized CSS files cause reflows and sluggish UIs on high-traffic sites. Browser reflow operations on every interactive change degrade performance, particularly on older devices.

Managing CSS files and file organization is cited as the biggest pain point for developers. Stylesheets often become giant, unmaintainable piles of spaghetti code without proper architectural patterns.

Default browser form elements are limited and aesthetically poor, forcing developers to build custom versions. This introduces accessibility complexity that is already difficult to manage without developers further overwriting defaults.

HTML5 applications tend to load slowly, especially on older devices, mobile connections, and when using graphics-intensive features. Developers must constantly optimize code, minimize assets, and leverage caching strategies, but performance remains a persistent challenge.

Tauri forces backend developers to learn HTML, CSS, and JavaScript, and vice versa. There are no native UI components—the entire interface relies on web technologies. This creates a barrier for teams specialized in desktop or backend development and requires hiring full-stack developers or extensive training.

Developers using Tailwind are abstracting away core CSS knowledge (Flexbox, Grid, positioning). Junior developers can use Tailwind classes but don't understand the underlying CSS properties, creating a generation gap in web platform fundamentals.

Figma lacks native z-axis and 3D transforms that CSS has supported for years. Designers need paid plugins or third-party workarounds just to visualize basic 3D rotations that developers can implement with a single CSS line.

Developers pile HTML into pages without proper structure, then struggle when CSS cannot fix poor document architecture. Effective CSS layout depends on developers first understanding how to structure HTML semantically and logically.

Safari's CSS feature support lags behind other major browsers, creating platform-specific compatibility issues and forcing developers to write Safari-specific workarounds.

HTML5 files (HTML, CSS, JavaScript) are cached and rendered on the user's system, making them easily accessible and viewable by anyone. HTML5 encryption cannot work because browsers cannot execute encrypted content, forcing developers to use code minification and obfuscation as incomplete solutions.

CSS files become excessively large, causing slow page load times and reduced application performance.

Developers find Flexbox challenging to learn and struggle to retain the details without daily practice. The mental model requires repeated exposure to solidify understanding.

Using CSS `@import` rules creates additional sequential HTTP requests and render-blocking behavior that delays page rendering. Each imported file is fetched sequentially rather than in parallel, degrading frontend performance.

Seemingly minor design adjustments often trigger extensive changes in the codebase, particularly when dealing with tightly coupled CSS or JavaScript frameworks.

When @property rules receive invalid values, they fail silently and revert to the `initial-value` without clear debugging information, making it difficult to diagnose registration and animation issues.

Developers still rely on preprocessors like Sass, Less, and PostCSS for mixins and advanced functionality, despite repeated requests for native CSS support. This perpetuates tool dependencies and learning curves.

CSS's declarative paradigm with implicit conditional logic (selectors, cascade, variables, media queries) produces unpredictable outcomes. Unlike JavaScript or C++, CSS control flow is invisible and relies on the browser resolving conflicting constraints.

There is a 'canyon' between aesthetically-driven CSS written by designers and code-maintainable CSS written by developers, resulting in brute-force implementations that ignore CSS's strengths.

Developers continue to write JavaScript for functionality that modern CSS now handles natively, such as container queries, the `:has()` selector, scroll-linked animations, and view transitions. This creates unnecessary complexity and hurts performance.

New features like container queries and cascade layers add layers of complexity but don't fully resolve underlying declarative paradigm problems. Features like cascade layers don't eliminate unintended override risks in complex applications.

The abundance of CSS frameworks can reduce development time but creates a risk that developers may not understand CSS fundamentals, leading to over-reliance on frameworks and difficulty working without them.

Z-index rules scattered across stylesheets without clear relationships lead to escalating values (e.g., z-index: 999999). 52% of designers experience z-index-related issues regularly, making layering logic impossible to reason about.

While responsive design is necessary to accommodate different screen sizes, its successful implementation remains challenging. Developers must balance complexity and functionality across diverse device types and screen resolutions.

CSS lacks tooling comparable to TypeScript for catching errors at compile-time. There is no good static analysis, making typos and invalid properties undetectable until runtime.

Global styles cannot be easily applied inside web components due to shadow DOM encapsulation, creating friction when trying to apply consistent design systems.

Complex projects require custom CSS alongside Tailwind utilities and @apply overrides, creating a hybrid CSS architecture. This defeats the purpose of using Tailwind and introduces maintenance complexity from multiple paradigms coexisting.

CSS historically lacked native variables, forcing developers to repeat colors and style values throughout multiple files, violating the DRY principle and creating maintenance burden.

SVG elements are difficult to customize and style with CSS, despite being incredibly useful and commonplace. 18% of respondents noted difficulties with SVG styling, indicating a widespread usability concern.

HTML5 applications depend on CSS, JavaScript, and WebRTC, each with its own developer tooling, implementation approaches, challenges, and security issues. Managing this complexity requires expertise across multiple technologies.

Even after extensive use, developers struggle with complex grid configurations. Grid is powerful but unintuitive, requiring significant learning and trial-and-error to use effectively.

The three animation composition modes (`replace`, `add`, `accumulate`) produce subtly different results that are easy to misunderstand, leading to unexpected animation behavior and debugging difficulty.

Common tasks like centering elements require trial-and-error approaches. Layout bugs are notoriously difficult to debug due to the implicit logic of CSS's declarative model.

Creating animations synchronized with audio in HTML5 requires significantly more effort than it did in Flash. There are very few tools available to help with audio-animation sync, making this a tedious and time-consuming task.

CSS has a confusing, scattered API with inconsistent naming conventions across properties and rules, making it difficult to remember and predict behavior.

The 100vh unit does not account for mobile browser chrome (address bar, nav bars), causing layout overflow and poor mobile UX.

Developers struggle to effectively use CSS framework templates like Foundation. While frameworks are designed to simplify development, developers find them difficult to apply and work with in practice.

Developers must write browser-specific prefixes and hacks to handle inconsistent CSS rendering behavior across different browsers, particularly for advanced features.

HTML5 supports multiple audio and video formats, requiring developers to provide files in different formats to support various devices. Developers must also create multiple versions of videos at different quality levels to adapt to different internet connection speeds.

AI-assisted CSS generation tools produce generic 'AI slop' outputs lacking creative spark, potentially homogenizing the web and reducing design quality and uniqueness.

IDE tooling does not provide auto-completion for CSS variables across different modules, components, and applications, making variable discovery and reference difficult.

CSS is evolving rapidly with new features introduced constantly, making it difficult for developers to keep up with learning curve and adoption timelines.

Plain CSS requires developers to make consistent naming decisions (e.g., .btn vs .button, .card-header vs .header-card), creating maintenance burden and consistency challenges across projects and teams.

CSS has many features with complex or counter-intuitive syntax that developers struggle to remember, increasing cognitive load and requiring frequent reference checks.