NoCSS Framework

Style your HTML based on structure, not classes

NoCSS is a revolutionary CSS framework that uses intelligent contextual selectors to automatically style your HTML. Write semantic markup and let the framework handle the rest.

Philosophy

🎯 The Problem

Traditional CSS frameworks force you to clutter your HTML with utility classes:

<button class="btn btn-primary btn-lg flex items-center gap-2 px-6 py-3 rounded-lg shadow-md hover:shadow-lg">
  <svg class="w-5 h-5">...</svg>
  Click me
</button>

✨ Our Solution

NoCSS uses modern CSS selectors to detect structure and context:

<button>
  <svg>...</svg>
  Click me
</button>

The framework automatically detects the icon and applies proper spacing, sizing, and styling.

🔧 How It Works

Contextual Selectors

NoCSS uses the :has() selector to detect parent-child relationships:

/* Buttons with icons get automatic spacing */
button:has(svg) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

Position-Based Styling

Element styling changes based on position in the DOM:

/* First button = primary style */
button {
  background: var(--color-primary);
}

/* Second+ buttons = secondary style */
button:nth-of-type(n+2) {
  background: var(--color-secondary);
}

Sibling Combinators

Related elements are styled based on their relationships:

/* Labels followed by inputs get spacing */
label + input {
  margin-top: var(--space-2);
}

Semantic Attributes

We use ARIA and data attributes instead of classes:

<a href="#" aria-current="page">Active Link</a>
<pre data-lang="javascript"><code>...</code></pre>
<div role="alert" data-type="success">Success!</div>

📐 Design Principles

  • Mobile-First: All styles are responsive by default
  • Semantic HTML: Use the right element for the job
  • Intelligent Detection: The framework adapts to your structure
  • Zero Classes: No utility classes needed in markup
  • Accessible: Built-in ARIA support and keyboard navigation

⚖️ Trade-offs & Limitations

NoCSS is powerful but isn't for every project:

  • Structure Matters: HTML order affects styling
  • Browser Support: Requires modern browsers (Chrome 105+, Firefox 121+)
  • Specificity: Structural selectors can be harder to override
  • Learning Curve: Requires understanding how selectors work
  • Best For: Content-driven sites, dashboards, documentation
  • Not Ideal For: Complex single-page apps needing precise control

Examples & Demos

Explore real-world examples showcasing NoCSS capabilities.

📦 Components Library

Comprehensive showcase of all NoCSS components: navigation, forms, buttons, cards, tabs, modals, and more.

🎨 Syntax Highlighting

Code examples with automatic syntax highlighting for HTML, CSS, JavaScript, and mixed content.

📝 Contact Form

A fully-styled contact form demonstrating intelligent form field detection and validation styling.

🚀 Landing Page

Complete landing page template with hero section, features grid, and call-to-action elements.

📊 Dashboard

Admin dashboard layout with sidebar navigation, stats cards, tables, and activity feed.

See It In Action

Here are some quick examples demonstrating NoCSS's automatic styling.

Simple Form

No classes required - just semantic HTML:

Position-Based Buttons

Button styles automatically change based on position:

Buttons with icons get automatic spacing:

Getting Started

Installation

Include NoCSS in your HTML:

<link rel="stylesheet" href="dist/nocss.css">
<script src="dist/nocss.js" defer></script>

Usage

Write semantic HTML and let NoCSS do the rest:

<main>
  <header>
    <h1>Welcome</h1>
    <p>This is automatically styled!</p>
  </header>

  <section>
    <article>
      <h2>Card Title</h2>
      <p>Card content...</p>
    </article>
  </section>
</main>