Why are dashes preferred for CSS selectors / HTML attributes?

Following the naming conventions

In the broader world of coding practices and URL segments, the love for dashes remains undiminished. They promise a uniform layout in the code, and their standardized use, pioneered by historical usage and bigger influencers like Google's SEO guidelines, further validate their prominence.

A nod to historical bias

When traversing the course of history, you'll stumble upon the point when dashes in CSS and HTML became deep-rooted due to earlier CSS versions’ tantrums. The usage of underscores came with the inconvenience of needing to be escaped, making the code less readable. Therefore, the technical community embraced dashes, keeping the ball of backwards compatibility and maintainability rolling.

Balancing semantic and design

Accessibility is at the heart of design. It emphasizes the importance of textual breaks in attributes and selectors, indispensable for screen readers and assistive technologies. Sweating over semantic clarity pays off, and using dashes in kebab-case ensures the conveyed information remains meaningful and easily digestible.

Bowing down to SEO guidelines

Search engines have a soft spot for dashes. Google's algorithm treats hyphens as spaces, transforming dash-separated phrases in URLs into something meaningful for SEO rankings. These best practices indirectly encourage developers to use dashes in their classes and IDs to maintain consistency with URL conventions.

Making coding efficient

Typing dashes is faster and consistently smoother compared to underscores. The experience of tabbing through code is noticeably more fluid. Less fiddling with the shift key significantly improves the working rhythm for developers over time. Awfully tempting, right?

Ensuring syntactic harmony

Brushing off syntax ambiguity is crucial. In JavaScript, an underscore could potentially masquerade as a private member, while dashes skirt around confusion with subtraction operations. Let's hear it for dashes, maintaining syntactic harmony across different languages.

Respecting syntactic norms

Just like every language has its quirks, developers must respect each language's conventions. In CSS, that means adhering to lowercase-hyphenated syntax for uniformity and to lighten the cognitive load for developers knee-deep in code.

Sticking to community guidelines

Community norms create a coding road less bumpy. Aligning with the established conventions, like using dashes, ensures code consistency while offering an intuitive developer experience.