CSS + JS Hacks We’re Fine With

Episode Summary

Executive Summary: Scott and Wes discuss common web-dev “hacks” that often feel wrong at first but are widely accepted, including negative margins, parseInt radix omission, centered absolute positioning, function argument reassignment, custom HTML tags, button type defaults, CSS triangles, no-opener links, and inline styles. They emphasize understanding why each pattern works before using it.

Main Topics: Accepted CSS hacks: They defend techniques like negative margins, centering absolute elements with transform, border-based triangles, and selective use of inline styles as practical, often appropriate solutions. JavaScript lint-rule exceptions: They question strict rules like always passing a radix to parseInt and never overwriting function arguments, arguing these are often over-enforced in modern codebases. Custom/unknown HTML elements: Wes is surprised to learn non-standard HTML tags are valid and behave like divs with a class-equivalent name, though he still prefers explicit components for clarity. Button default behavior: They discuss the common rule to always set button type, acknowledging it prevents accidental form submissions but can feel unnecessary outside forms. Security and legacy browser concerns: The episode revisits rel=noopener for target=_blank links, noting the issue mainly mattered for older browsers and is less relevant in modern ones. Developer judgment over dogma: The hosts argue that lint rules and best practices should be understood contextually; developers should learn the rationale and then decide whether to keep or relax rules.

Key Arguments: Negative margins are valid because they affect document flow intentionally, unlike relative positioning which only visually offsets an element. Passing a radix to parseInt is often unnecessary in modern usage because parseInt can infer common cases like 0x and base 10 correctly. Overwriting function arguments can be problematic for immutability and clarity, but in simple transformations it may be practical. Non-standard HTML elements are technically acceptable and equivalent to unknown elements styled like divs, though components may be cleaner. A button without type only becomes dangerous inside forms; outside forms, type="button" can feel redundant. Border tricks for triangles remain a legitimate, simple CSS technique despite being a workaround. rel="noopener" concerns were largely tied to older browser behavior, so the rule is less universally necessary now. Inline styles are still useful in tightly scoped, one-off cases, especially in component-based workflows.

Data Points: Sponsor trial length: 2 months free - Sentry offer with coupon code tasty treat Sponsor trial length: 30-day free trial - FreshBooks signup offer Button default behavior condition: inside a form - A button without type defaults to submit when placed in a form CSS triangle construction: 4 borders - Triangle formed by setting three borders transparent and one visible CSS triangle geometry: 10px by 10px square - Example used to explain how border triangles are formed CSS triangle geometry: 5 pixels - Example border inset used to describe triangle formation

Pivotal Quotes: "What are things in web dev that you feel are wrong or hacky when starting out, but are actually totally accepted to do, i.e. negative margins in CSS?" — Toby from Switzerland: Listener question that inspired the episode "X accordion is no worse than div class accordion in every mechanical sense" — Wes Boss: Explaining why custom/unknown HTML tags can be valid "I think it's almost better to go very aggressive with your rules, turn everything on. And as you hit stuff, you can read us to, oh, why do, why would somebody even want this rule on?" — Scott Tolinski: Advice on using lint rules as learning tools

Implications: Treat “best practices” as context-dependent, not absolute. Developers should understand the mechanics behind patterns, use lint rules thoughtfully, and keep pragmatic exceptions when they improve clarity or workflow.