Overview
Find and list non-compliant style classes and IDs in Chrome DevTools Console.
Designed for architects and developers who prefer a straightforward approach to CSS naming conventions. This extension is perfect for those committed to creating clean, readable, and scalable stylesheets without compromise. Simply open the Developer Console with the F12 key and click on the extension icon. Instantly, any non-compliant CSS classes and IDs are revealed as a JavaScript array. You can copy this array to facilitate further automation, such as linting processes. Acceptable Patterns: - Lowercase with Hyphens: Ensures a seamless blend, like `mat-mdc-input-element`. - Double Hyphens for Variants: Distinctively marks variants, for instance, `mdc-button--raised`. - Double Underscores for Sub-elements: Defines elements within a block, e.g., `mdc-button__ripple`. - Compound Variants: Allows for detailed specification of variants, such as `mdc-floating-label--float-above`. Unacceptable Patterns: - CamelCase: Use btn-wrapper instead of btnWrapper. - Capital Letters at Start: Opt for a lowercase start instead of BtnWrapper or Btn-wrapper. - Mixed Separators: Prefer mdc-button__label to mdc_button-label. - Repeated Separators: Use mdc-button instead of mdc--button or mdc__button. Enhance your workflow and ensure your stylesheets are easily navigable, upholding the highest coding standards. Additional Note: This Style Checker is utilized during the development phase to detect inconsistent class and ID names within your project when you're running your projects locally or are in development mode. Production apps undergo "minifying" and "uglifying" processes, resulting in CSS styles that naturally won't adhere to naming conventions. This extension is crafted by developers for developers, aiming to streamline and ensure consistency in coding practices before deployment.
Details
- Version1.0
- UpdatedMarch 18, 2024
- Size12.85KiB
- LanguagesEnglish
- Developer
Email
webia1.github@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
