Modern Help Guide

Selector Studio App

Selector Studio is a modern frontend utility app that automatically generates clean, scalable and semantic HTML selector names. The app helps developers quickly create professional IDs, CSS classes, and JavaScript hook selectors for websites, UI systems and reusable frontend components.

← Back To Help Index

How The App Works

The application is divided into category tabs located in the left sidebar. Each tab contains a specialised selector generator for different HTML structures.

Select a generator category from the sidebar.
Enter a descriptive purpose for the element.
Select the HTML or UI element type.
Click the Generate button.
The app instantly creates structured selector names.
Use the copy buttons to copy selectors into your project.

Generated Output Types

Suggested ID

Creates unique semantic IDs for page sections.

#hero-banner-header

Suggested Class

Creates reusable BEM-inspired class names.

.hero-banner__header

JavaScript Hook

Creates dedicated JS utility selectors.

.js-hero-banner-header

Generator Categories

Generator	Purpose	Examples
Semantic Elements	Generates selectors for semantic HTML5 sections such as headers, navigation areas and footers.	header, nav, article, footer
Div & Layout	Creates naming conventions for layout wrappers, containers, grids and flex sections.	product-grid, page-wrapper
Inputs & Forms	Generates semantic names for forms, labels, buttons and validation controls.	login-form, email-input
Text & Headings	Creates selectors for typography blocks, headings, descriptions and content sections.	pricing-heading, intro-description
Images & Links	Generates descriptive names for images, galleries and anchor links.	team-avatar, gallery-thumbnail
Lists & Tables	Builds scalable naming systems for menus, data tables and item lists.	order-history-table

Input Sanitisation System

The app automatically cleans and standardises all user input before generating selectors.

Converts all text to lowercase.
Removes invalid symbols and special characters.
Replaces spaces with hyphens.
Prevents duplicate hyphens.
Creates production-safe naming conventions.

"Hero Banner!" → hero-banner

Copy Button System

Every generated selector includes a dedicated copy button using the Clipboard API.

Click the Copy button beside a selector.
The selector is copied directly to the clipboard.
The button temporarily changes to “Copied”.
If copying fails, the button displays “Failed”.

This feature speeds up frontend workflows and eliminates manual typing mistakes.

Responsive Design Features

The app is fully responsive and adapts automatically to desktops, tablets and mobile devices.

Screen Size	Behaviour
Desktop	Sidebar and workspace appear side-by-side using a grid layout.
Tablet	Sidebar stacks above the workspace for improved usability.
Mobile	Reduced spacing and flexible layouts improve readability on small screens.

The interface uses CSS Grid, Flexbox and media queries for responsive behaviour.

Frontend Technologies Used

HTML5

Provides semantic structure and accessibility-friendly layouts.

CSS3

Powers gradients, glassmorphism panels, responsive grids and modern UI styling.

Strict JavaScript

Handles tab switching, selector generation, clipboard copying and dynamic rendering.

Best Use Cases

Frontend development workflows
Component-based UI systems
Semantic HTML architecture
Design system naming conventions
CSS framework projects
JavaScript DOM targeting
Large-scale scalable applications