New CSS Class Prefix Selector Feature
A new feature announced to simplify CSS for web developers.
1A New CSS Feature
A new CSS feature has been added to the Selectors Level 5 specification draft. The .prefix-* syntax will make it easier to select all classes starting with a prefix. This provides a more readable alternative to current [class^='prefix'] and [class*=' prefix'] selectors. The feature was announced by Bramus from the Chrome team and was originally proposed by Lea Verou in 2024.
2Limitations of Current Solutions
Current substring selectors are both verbose and can cause performance issues. The new .prefix-* solution will be particularly useful for components with many similar classes (buttons, cards etc.). Tests have shown that current solutions slow down browsers' CSS matching engines. This innovation aims to address these performance concerns.
3Ergonomics and Readability
The new syntax significantly simplifies CSS writing. Instead of repeatedly defining padding for each button variation like .btn-primary, .btn-secondary, developers can use .btn-*. This will especially ease code maintenance in large-scale projects. The improvement is compared to recent shorthand versions of color functions in CSS.
4Compatibility and Implementation
The new feature is designed to be backward compatible. Old substring selectors will continue to work. However, developers are advised to use @supports selector(.prefix-*) checks until browser support becomes widespread. Full cross-browser implementation is expected to take some time.
5Limitations and Details
The new selector will only work with dash-separated class prefixes. Variations like .prefix* or .prefix_* won't be supported. According to the specification draft, this selector will have the same specificity (0,1,0) as a normal class selector, maintaining consistency with existing CSS structures.
6Community Reactions
The developer community has mixed reactions to this feature. Some argue it's unnecessary as current solutions are sufficient, while others support the ergonomic improvement. Developers like Brian Kardell suggest performance optimizations could be applied to existing selectors instead of introducing new syntax.
7Future Potential
How the feature will interact with nested CSS syntax remains an open question. Usage like .prefix { -* { /* ... */ } } might become possible. There's also potential for selecting web components. These developments could shape the future direction of CSS and its capabilities.
8Importance for Web Developers
This innovation will provide significant convenience for developers managing large CSS codebases, reducing code repetition and lowering maintenance costs. However, adoption may remain limited until widespread browser support is achieved. Developers will need to consider alternative solutions during this transition period.
Original article: CSS-Tricks — CSS'de Yeni Sınıf Öneki Seçici Özelliği