We renamed a set of CSS classes, and the scope was clearly stated: only the ones starting with a particular prefix.<\/p>\n
Afterward, three components had lost their styles. None of them was on the rename list.<\/p>\n
The name we changed was the first part of three other names.<\/p>\n
Find-and-replace sees characters, not meaning. It has no idea that Because the result was valid<\/strong>.<\/p>\n The renamed stylesheet was syntactically correct. It parsed, loaded and applied. It just applied to something else, or to nothing.<\/p>\n No compiler, linter or syntax check has an opinion about that. Only a human eye can catch it, and only if it already knows which page to look at.<\/strong><\/p>\n \u2460 Always anchor the match.<\/strong> A class name has to be followed by a quote, a space or a curly brace, not by any character at all.<\/p>\n \u2461 Do a dry run first.<\/strong> Print every match with its surrounding context, read through it, and only then write the change. It costs thirty seconds and saves you a visual bug you’d never trace back.<\/p>\n Design class names as namespaces and this kind of collision can’t happen.<\/p>\n \u2b50 A utility name should either stand entirely on its own or end in a way that can’t be mistaken for a prefix. Looking hierarchical and being recognizable as a hierarchy by a machine are two different things.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" One global rename quietly stripped the styles from three components nobody had touched. Every automated check stayed green.<\/p>\n","protected":false},"author":1,"featured_media":1016,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[29],"tags":[],"class_list":["post-2154","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-notes-en-us"],"yoast_head":"\n.mz-card<\/code> and .mz-card-meta<\/code> are two different things. To it, the second is just the first with a few more letters.<\/p>\nWhy every check was green<\/h2>\n
Two habits<\/h2>\n
A lesson about naming<\/h2>\n