Some of this advice was reasonable in 2014 and has expired. Some of it was never right. All of it still turns up in the first page of search results.
This is the single most damaging piece of CSS advice in circulation. Keyboard users navigate by focus ring; removing it without a replacement makes an interface unusable for them and fails WCAG. If the default ring is ugly, replace it: :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }. :focus-visible shows the ring for keyboard navigation and hides it for mouse clicks, which is the behaviour people actually wanted.
A user who has raised their browser's default font size gets ignored entirely when you size text in px. Use rem for type and spacing so the interface scales with that setting. px is correct for things that genuinely should not scale — hairline borders, a 1px rule — and wrong for body text.
It works exactly once. The second !important starts an escalation that ends with !important on every rule and a stylesheet nobody can override deliberately. The modern answer is @layer: declare @layer reset, base, components, utilities; once and a later layer wins regardless of selector specificity. The old answer — reduce nesting and stop writing four-selector rules — still works too.
Convenient arithmetic, real cost: it overrides the user's chosen base font size, which is the accessibility setting rem exists to respect. If you want easier maths, use a CSS custom property for your spacing scale instead of rescaling the root.
Most prefixes have been unnecessary for years, and stale ones actively cause bugs — a lingering -webkit- property can win over the standard one and pin you to old behaviour. Check the feature, use the standard property, and let a build step add prefixes only where your browser targets require them.
Float was a workaround for a language that had no layout system. It now has two. Flexbox for one dimension, grid for two. Clearfix hacks, negative margins and equal-height column tricks are all solutions to problems that no longer exist. float retains exactly one legitimate use: wrapping text around an image.
On mobile, 100vh is taller than the visible area when the browser's address bar is shown, so your content is cut off and the page scrolls unexpectedly. Use 100dvh (dynamic viewport height) with a 100vh fallback for older browsers. svh and lvh exist for when you want the smallest or largest possible viewport explicitly.
It blocks users who need to magnify text. Modern browsers ignore it in many cases anyway. If pinch-zoom breaks your layout, the layout is the bug.
Advice inherited from early Sass. It produces selectors like .page .content .card .header h3, which are fragile, specific, and break the moment markup moves. Keep selectors flat and single-class; native CSS nesting is convenient for media queries and pseudo-classes, not for reproducing the DOM tree.
A framework you use 5% of is unused bytes on every page load and a set of conventions you now have to work around. Modern CSS handles the layouts frameworks were built for — grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)) is a responsive card grid in one line, with no dependency and no build step.