Item logo image for Non-compliant Style Finder

Non-compliant Style Finder

ExtensionDeveloper Tools14 users
Item media 2 (screenshot) for Non-compliant Style Finder
Item media 1 (screenshot) for Non-compliant Style Finder
Item media 2 (screenshot) for Non-compliant Style Finder
Item media 1 (screenshot) for Non-compliant Style Finder
Item media 1 (screenshot) for Non-compliant Style Finder
Item media 2 (screenshot) for Non-compliant Style Finder

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.

0 out of 5No ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    1.0
  • Updated
    March 18, 2024
  • Size
    12.85KiB
  • Languages
    English
  • Developer
    Email
    webia1.github@gmail.com
  • Non-trader
    This 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

The developer has disclosed that it will not collect or use your data.

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

Related

Hex Code Finder

5.0(5)

Install Hex Code Finder as color eyedropper tool online with RGB, HEX code color picker from image and CMYK color picker.

Copy CSS Selector

5.0(3)

A tool to select, copy and save CSS selectors from web pages for better team collaboration and AI automation.

Color Finder

4.6(10)

Install Color Finder with eyedropper tool to activate color identifier online with RGB and HEX code finder from screen.

[Experiment] Edit and Resend: Ajax Request Debugger in Chrome DevTools

4.3(3)

Enhance Chrome DevTools with a new tab. Edit and resend fetch() / XHR requests. Efficiently debug or test your web applications.

DesignPicker - Color Picker & Font Detector

5.0(6)

A smart developer tool that supports color picking and font detecting, making develop design easier.

Tab Organizer: Productivity Tool

3.4(21)

Tab manager and productivity tool for Chrome. Group tabs by domain and rules, save tabs, restore tabs, sort tabs, customize colors.

Perplexity AI

4.7(43)

Find information with the help of the perplexity ai chrome extension and easily switch from perplexity.ai to another search engine.

Element Selectors

4.8(4)

Chrome extension to find element selectors

Web Component DevTools

4.3(9)

Developer tooling for Web Components and Web Component Libraries

BarrierBreak A11yInspect - The Only Accessibility Extension You Need!

5.0(12)

Detects failures, identifies issues to validate & highlights code. Making Accessibility Testing Simple.

Color Finder

2.1(32)

Install color finder Chrome extension & detect RGB & HEX color codes with ease. Best Color Identifier for Chrome.

React code finder

5.0(5)

Chrome extension for React Developer

Hex Code Finder

5.0(5)

Install Hex Code Finder as color eyedropper tool online with RGB, HEX code color picker from image and CMYK color picker.

Copy CSS Selector

5.0(3)

A tool to select, copy and save CSS selectors from web pages for better team collaboration and AI automation.

Color Finder

4.6(10)

Install Color Finder with eyedropper tool to activate color identifier online with RGB and HEX code finder from screen.

[Experiment] Edit and Resend: Ajax Request Debugger in Chrome DevTools

4.3(3)

Enhance Chrome DevTools with a new tab. Edit and resend fetch() / XHR requests. Efficiently debug or test your web applications.

DesignPicker - Color Picker & Font Detector

5.0(6)

A smart developer tool that supports color picking and font detecting, making develop design easier.

Tab Organizer: Productivity Tool

3.4(21)

Tab manager and productivity tool for Chrome. Group tabs by domain and rules, save tabs, restore tabs, sort tabs, customize colors.

Perplexity AI

4.7(43)

Find information with the help of the perplexity ai chrome extension and easily switch from perplexity.ai to another search engine.

Element Selectors

4.8(4)

Chrome extension to find element selectors

Google apps