IDE Features Guide

Detailed guide for all 12 features provided by the VS Code extension. Maximize your coding productivity.

👁

Hover CSS Preview

Hover over a class to see the full CSS output

✏

Real-time Autocomplete

Validates 300+ classes and arbitrary values in real-time inside class attributes

🎨

Color Preview

Inline color swatches and picker for 13 prefixes

⚠

Diagnostics & Conflict Detection

Invalid classes, similar suggestions, context-aware property conflicts

🔧

Quick Fix

Auto-correct typos, delete invalid classes, fix token violations

🔄

CSS → Class Conversion

Convert CSS declarations to Atomic classes

📋

Class Sorting

Auto-sort classes by semantic order

⭐

Design Tokens

Project color/spacing/font tokens appear first in autocomplete

🔒

Strict Mode

Warns on non-token values and suggests closest token

🔗

CSS Variable Autocomplete

Scans project :root variables for autocomplete suggestions

🗑

Unused Class Detection

Detects classes in CSS not used in HTML

📄

Inline CSS Hints

Shows CSS property hints at end of class attributes

Keyboard Shortcuts

Frequently used commands and shortcuts.

Command	Shortcut	Description
Search Class	`Ctrl+Shift+A`	Search classes by CSS property name
Update All	`Ctrl+Alt+A`	Scan all files and batch-generate CSS
CSS → Class	`Ctrl+Shift+C`	Convert CSS to Atomic classes
Sort Classes	`Ctrl+Alt+S`	Sort classes semantically
Detect Unused	`Command Palette`	Detect unused classes

1. Hover CSS Preview

Hover over a class to see the complete CSS rule including media queries, pseudo-classes, and relation selectors.

➤

Shows complete CSS rule (selector + properties)

➤

Structure decomposition — media, state, property, value with icons

➤

Hover on class keyword to see combined CSS of all classes

➤

Shorthand override detection (p20px + pl10px → padding-left override notice)

Example

Hover over each class in the code below.

<!-- Hover over any class to see full CSS output -->
<div class="df jcc aic gap2rem p2rem bg0A0A12 br12px sm-fdc">
  <p class="fs16px c71717A lh1-7 hover-cFFFFFF">Text</p>
</div>

<!-- Hover over 'class' keyword to see combined CSS -->
<!--        ↑ shows all classes' CSS combined -->

Tailwind comparison: Tailwind shows only one CSS line, but Atomic CSS provides structure decomposition + full preview + override detection all together.

Shorthand Override Detection

Shows override relationships for shorthand properties like padding, margin.

<!-- Shorthand override detection -->
<div class="p20px pl10px">
  <!-- Hover shows:
    padding-top: 20px
    padding-right: 20px
    padding-bottom: 20px
    padding-left: 10px  ← overridden by pl10px
  -->
</div>

2. Real-time Autocomplete

Type inside class attributes for autocomplete. Provides static list, prefix guides, dynamic validation, context recommendations, and duplicate prevention.

Feature	Description
Fixed Classes (300+)	Complete list of classes without units like df, jcc, aic
Prefix Guides	Shows usage and examples when typing prefixes like w, h, p, m, bg
Dynamic Completion	Parses arbitrary values like gap37px in real-time with CSS preview
Context Recommendations	After df → flex-related classes (jcc, aic, fdc) boosted to top
Duplicate Prevention	Already-used classes are excluded from suggestions

Supported Attributes

Autocomplete triggers inside these attributes.

<!-- Triggers in all these attribute types -->
<div class="...">         <!-- HTML class -->
<div className="...">     <!-- React JSX -->
<div :class="'...'">      <!-- Vue binding -->

Context-based Recommendations

Analyzes already-entered classes and boosts related ones to the top.

<!-- After typing "df", flex-related classes are boosted -->
<div class="df |">
  <!-- Top suggestions: jcc, jcsb, aic, fdc, fww, gap... -->

<!-- Already used class won't appear again -->
<div class="df jcc |">
  <!-- jcc is excluded from suggestions -->

3. Color Preview

Shows inline color swatches next to color classes in class attributes, with color picker to change colors.

Supported Prefixes (13)

Prefix	CSS	Example
`c`	color	`cFF0000`
`bg`	background-color	`bg6366F1`
`bc`	border-color	`bcDDDDDD`
`btc`	border-top-color	`btcFF0000`
`brc`	border-right-color	`brc333333`
`bbc`	border-bottom-color	`bbc000000`
`blc`	border-left-color	`blc6366F1`
`olc`	outline-color	`olc38BDF8`
`tdc`	text-decoration-color	`tdcEF4444`
`acc`	accent-color	`acc6366F1`
`cc`	caret-color	`ccFFFFFF`
`fill`	fill	`fillFF0000`
`stroke`	stroke	`stroke333333`

Colors are also detected in hover and media query combinations. Border shorthands are supported too.

<!-- HEX colors show inline swatches -->
<div class="bg6366F1 cFFFFFF bc333333">

<!-- RGBA colors also supported -->
<div class="bg0-0-0-50 c255-255-255-80">

<!-- Works with pseudo-classes and media queries -->
<div class="hover-bgFF0000 sm-bg333333">

<!-- Border shorthand colors -->
<div class="b2pxsolid6366F1">

Color Picker: Click the swatch to open the VS Code color picker. When you change a color, the class name updates automatically.

4. Diagnostics & Conflict Detection

Detects invalid classes and property conflicts in real-time.

⚠

Invalid class detection: Yellow underline on unparseable classes

🔍

Similar class suggestions: Suggests most similar classes based on Levenshtein edit distance

✓

Context-aware conflict detection: Warns when same property is duplicated in same media/pseudo-class. hover-bg and base-bg are not conflicts

<!-- Invalid class: yellow underline + suggestion -->
<div class="df jc gap2rem">
  <!--           ↑↑
    "jc" is invalid
    Suggestion: jcc, jcsb, jcfs, jcfe, jcsa, jcse
  -->
</div>

<!-- Conflict detection (same media+pseudo) -->
<div class="w100px w200px">
  <!--  ⚠ conflict: both target width in same context -->
</div>

<!-- Different context = no conflict -->
<div class="w100px sm-w200px">
  <!--  ✓ OK: different media queries -->
</div>

Shorthand exception: Shorthand + longhand combinations like p20px pl10px are intentional overrides and are not flagged as conflicts.

5. Quick Fix

Press Ctrl+. to apply auto-fixes for diagnostics.

Action	Description
Change to similar class	Auto-correct typos like dff → df, jc → jcc
Delete invalid class	Cleanly removes unrecognized classes including whitespace
Change to token value	In strict mode, suggests closest allowed token value

<!-- Before: "jc" has yellow underline -->
<div class="df jc aic">

<!-- Ctrl+. on "jc" shows: -->
<!--   → Replace with "jcc"  (auto-correct) -->
<!--   → Replace with "jcsb" (similar) -->
<!--   → Delete "jc"         (remove) -->

<!-- After applying fix: -->
<div class="df jcc aic">

6. CSS → Class Conversion

Press Ctrl+Shift+C to open an input box. Enter CSS declarations and they'll be converted to Atomic classes.

CSS Input

display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 16px;
background-color: #6366F1;
color: #FFFFFF;
border-radius: 8px;
font-weight: 700;
margin-top: -10px;

Conversion Result

df jcc aic gap2rem p16px bg6366F1 cFFFFFF br8px fw700 neg-mt10px

Supports all 13 color properties, font-weight, z-index(neg-), opacity, order, RGBA, and all special values. Results are copied to clipboard or inserted at selection.

7. Class Sorting

Press Ctrl+Alt+S to auto-sort classes by semantic order. Sort selection only or entire file.

Sort Order

1.display2.flex/grid3.Size4.Spacing5.position6.Typography7.Color/Visual8.Other9.pseudo10.responsive

Before

<div class="p2rem bg6366F1 df
  cFFFFFF jcc br8px mt2rem
  aic gap16px hover-bg818CF8">

After

<div class="df jcc aic gap16px
  p2rem mt2rem br8px
  bg6366F1 cFFFFFF
  hover-bg818CF8">

8. Design Tokens

Define tokens in .atomic.json and they appear first with ★ mark in autocomplete. Without tokens, everything works 100% the same as before.

Token Configuration

Define in the tokens section of .atomic.json.

.atomic.json

{
    "tokens": {
        "colors": {
            "primary": "6366F1",
            "danger": "EF4444",
            "text": "333333"
        },
        "spacing": [4, 8, 12, 16, 20, 24, 32, 40, 48],
        "fontSize": [12, 14, 16, 18, 20, 24, 32],
        "borderRadius": [4, 8, 12, 16, 50],
        "fontWeight": [400, 500, 600, 700]
    },
    "strict": false
}

Property	Type	Description
`colors`	Object	Color palette (name: 6-digit HEX)
`spacing`	Array<number>	Spacing values (px, multiples of 4 recommended)
`fontSize`	Array<number>	Font sizes (px)
`borderRadius`	Array<number>	Border radius (px)
`fontWeight`	Array<number>	Font weight (100~900)

Backward compatible: Without tokens defined, all features work identically as before. Tokens are a pure convenience feature. See the Design Tokens Guide for details.

9. Strict Mode

When strict mode is enabled, warnings are shown when using values not defined in tokens.

strict: true — Team Mode

Warning underline for non-token values + Quick Fix suggesting closest token value

{
    "tokens": { ... },
    "strict": true
}

strict: false — Free Mode (default)

Tokens appear at top of autocomplete, but any value can be used freely

{
    "tokens": { ... },
    "strict": false
}

<!-- With strict: true and spacing tokens [4, 8, 12, 16, 20, 24, 32] -->

<!-- ✓ Token value — no warning -->
<div class="gap16px p2rem mt2-4rem">

<!-- ⚠ Non-token value — warning + Quick Fix -->
<div class="gap15px p17px mt2-3rem">
<!--  gap15px: closest token → gap16px
      p17px: closest token → p16px
      mt2-3rem: closest token → mt2-4rem -->

Recommendation: Use strict: false for personal projects, and strict: true for team projects where design consistency matters.

10. CSS Variable Autocomplete

Automatically scans :root variables from project CSS/SCSS files, suggesting actual variable names when typing bg--.

styles.css

:root {
    --primary: #6366F1;
    --surface: #111118;
    --text: #FAFAFA;
    --border: #1E1E2E;
    --accent: #38BDF8;
}

Type bg--, c--, etc. to see project variable names in autocomplete.

<!-- Type "bg--" to see variable suggestions from your project -->
<div class="bg--surface c--text b1pxsolid--border">
  <h1 class="c--primary">Title</h1>
  <a class="c--accent hover-c--primary">Link</a>
</div>

The source file name and original value of variables are also shown, making it easy to identify each variable.

11. Unused Class Detection

Detects classes generated in atomic.css that are not used in HTML.

1Run "Atomic CSS: Detect Unused Classes" from Command Palette

2Compares atomic.css with HTML files

3Shows faded underline on unused classes (Unnecessary tag)

Unused classes appear with a faded indicator (Unnecessary), and removing them can reduce CSS file size.

12. Inline CSS Hints

Shows CSS property names in small gray text at the end of class attributes, so you can see what each class does at a glance without hovering.

<!-- In the editor, decorations appear at the end of class attributes -->

<div class="df jcc aic">
<!-- ↑ shows: /* display | justify-content | align-items */  -->

<div class="bg6366F1 cFFFFFF p2rem br8px">
<!-- ↑ shows: /* background-color | color | padding | border-radius */  -->

<div class="w100p maxw120rem mxa">
<!-- ↑ shows: /* width | max-width | margin-left | margin-right */  -->

Shows up to 6 properties, and beyond that abbreviates with +N.

Installation Guide Quick Start Naming Convention CSS Variables