698: Why is AI Bad at CSS, Monofonts, and Safari Dev Tools

What It Covers

Chris and Dave explore why AI tools struggle with CSS layout despite improving at other coding tasks, discuss the technical limitations of LLMs understanding selectors and the DOM, debate whether AI will replace front-end or back-end developers, and examine Safari's developer tools usability compared to Chrome's implementation.

Key Questions Answered

• •AI CSS Limitations: LLMs default to React and Tailwind for complex projects because they work at the abstraction layer rather than understanding how CSS selectors connect to HTML through the DOM. This architectural limitation makes CSS particularly difficult compared to deterministic back-end code, though Chrome dev tools MCP integration now allows AI to inspect browsers directly and measure overflow issues.
• •Developer Empowerment Direction: Front-end developers gain more from AI assistance with back-end tasks than vice versa because back-end code is more deterministic and has clearer examples. Security risks are higher on the back end, but the technical execution is more straightforward for LLMs to handle, making full-stack development more accessible to front-end specialists than UI work is to back-end developers.
• •AI Output Reality Check: Despite claims of increased productivity, domain name registrations remain flat, iOS app releases show no growth, and GitHub activity is stagnant. The missing software renaissance suggests people generate prototypes quickly but abandon them before launch because fast execution removes the commitment that comes from investing significant time and resources into building something manually.
• •Monospace Font Implementation: Using monospace fonts like Cascadia Mono for entire websites including body copy creates developer identity expression, though typography experts argue these fonts are optimized for code readability rather than paragraph text. The approach works as a visual signal to fellow developers who read monospace daily, functioning as an intentional design choice rather than traditional typographic practice.
• •Safari DevTools Usability Gap: Safari's developer tools use confusing iconography like the computer icon for disable settings and cramped typography that feels more like iOS Xcode primitives than web-focused design. Developers should document specific pain points in blog posts rather than vague complaints, providing the Safari team with concrete artifacts to address systematic usability issues compared to Chrome's implementation.