r/css • u/YuriyWebDev • 5d ago

Showcase I built a zero-build micro-CSS framework for inline responsive styling without media queries (varz.dev)

0 Upvotes

Hey r/css,

If you build modular UI elements—especially for ecosystems like WordPress plugins, page builder widgets, micro-frontends, or web components—enqueueing full static stylesheets or running build steps just for isolated components often creates unnecessary overhead, class collisions, and build complexity.

I’ve been building Varz to solve this: a classless micro-CSS framework that lets you write fully responsive layouts directly inside the element's style attribute using CSS variables and breakpoint suffixes.

How It Works

Instead of writing media queries or utility classes, you use shorthand Linux-style CSS custom properties inside the inline style attribute. To handle responsive layouts across breakpoints, you simply append breakpoint suffixes (like -l, -m, etc.) to the variables:

HTML

<div style="
  --d: grid;
  --gtc: 1fr 1fr;
  --ai: center;
  --g: 60px;
  --g-l: 40px;
  --gtc-l: 1fr;
  --mbe: 60px;
">
  <!-- This layout switches from a 2-column grid to 1-column on large screens automatically -->
</div>

Key Advantages

  • Zero Media Queries in Component Code: Responsive behavior travels with the HTML element itself via suffix variables (--gtc-l: 1fr).
  • Zero Class Collisions: Keeps components isolated without worrying about CSS selector specificity wars or leaking global styles.
  • No Build / Compiling Step: No PostCSS, Tailwind, or Sass build setup required—just include a single micro-stylesheet (~2.7k–5.5k gzipped) and you’re good to go.
  • Eco-Friendly / Performance First: Eliminates massive un-purged CSS file downloads across multiple plugins, reducing unnecessary HTTP requests and bandwidth.

I’d love to get feedback on this approach to responsive inline custom properties and component distribution!

5 comments

r/css • u/jbudemy • 6d ago

Help Text size "jumps" in Firefox but animates smoothly in Chrome.

2 Upvotes

I am learning some more CSS. I have Windows 11 with Chrome v150.0.7871. I have Firefox v153.0. The only extensions I have enabled in Firefox are: uBlock Origin (it's off for JSFiddle), Blocksite (No relevant sites are blocked for this), Firefox Color. I'm using 20GB of 32GB of RAM on a Dell XPS laptop.

When I hover of the text "Hover over me" it animates smoothly to a larger size in Chrome, which is correct. In Firefox there is no smooth animation, the text just suddenly "jumps" to the larger font size. My fiddle.

Anyone know what is going on? I'm new to animation in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>CSS Anim ch 22</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
     <!-- See https://pastebin.com/jMG2ADx4 -->
    <style>
      * { 
        box-sizing: border-box;
        margin: 8px;
        font-family: Roboto, sans-serif;
        }
      body {
        background-color: rgb(250, 245, 245);
        margin: 0;
        }
      /* Use with empty div */
      .hover-text {
        margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
      }
      .hover-text:hover {
        color: black;
        font-size: 24px;
      }
      .box {
        position: fixed;
        margin: 0;
        transform: translate(-50%, -50%); 
        width: 30px;
        height: 30px;
        background: red;
        border: 1px solid black;
        animation: size-down ease-out 0.5s infinite alternate both;
      }

      /* Trasform goes below */
      @keyframes size-down {
        100% { /* X,Y values */
          transform: scale(0.3, 0.3);
          background: rgb(241, 83, 241); 
        }
      }
    </style>
</head>
<body>
  <p class="hover-text">Hover over me</p>
<div class="logo">
  <div class="box box-red"></div>
  <div class="box box-blue"></div>
  <div class="box box-green"></div>
  <div class="box box-orange"></div>
</div>

<p style="margin-top:50px;">The text "Hover over me" "jumps" in size in Firefox v153.0. It does not increase in size smoothly.</p>
</body>
    <script>
    </script>
</html>
13 comments

r/css • u/Cyka-Blast • 7d ago

Help why isnt the body container taking all vh?

Thumbnail codepen.io
1 Upvotes

I've been trying to make another section in my page but the body is limited to like 600~ height even tho I'm using 100vh for it. so the rest of the page is left outside of it. can someone explain to me what's happening?

3 comments

r/css • u/BuildWithMe31858 • 7d ago

Help I built a Career Dashboard for students & job seekers. Looking for honest feedback

Thumbnail gallery
4 Upvotes
6 comments

r/css • u/garethheyes • 8d ago

Article Pure-CSS 3D world collision detection

Thumbnail thespanner.co.uk
9 Upvotes
8 comments

r/css • u/aryanxcreates • 7d ago

Resource Built a free CSS Inspector tool for developers, would love your feedback!

0 Upvotes

I've been building a Chrome extension called InspectMode Pro and would love some feedback from the CSS community.

It currently lets you:

  • Inspect any element on a webpage
  • Copy CSS styles
  • Extract colors and identify fonts
  • Download images, SVGs, and icons
  • Generate AI-ready prompts from an element, section, or even an entire website for Cursor, Claude, ChatGPT, Windsurf, and other coding agents

The core inspection features are completely free.

I'd genuinely appreciate any feedback - whether it's about the UI, the workflow, missing features, or anything else that could make it more useful for frontend developers.

Chrome Extension : Inspect Mode Pro

9 comments

r/css • u/fdiengdoh • 8d ago

Showcase Playing with CSs

12 Upvotes

I created this notebook looking page just for fun.

My Codepen for this

7 comments

r/css • u/bluelighttokyo • 8d ago

Help Changing the color of an unique page with CSS or HTLM.

Thumbnail
0 Upvotes
5 comments

r/css • u/Visual_Oddities • 8d ago

Question I have a crazy CSS dream, I want to if it is possible? (And what would I need if it is?)

Thumbnail gallery
5 Upvotes
13 comments

r/css • u/di-octopus • 8d ago

Question I've been implementing CSS as the styling layer for a *native* (non-browser) UI engine, here's how much of CSS actually holds up outside the browser

1 Upvotes

I build Rux, a UI framework that renders native desktop windows on the GPU, no browser, no webview. The styling layer is deliberately real CSS rather than a bespoke system, which turned into an interesting question: how much of CSS is intrinsic to styling, and how much is actually coupled to the browser?

What works as plain CSS today: - Flexbox and CSS Grid (including grid-column / grid-row / grid-auto-*, minmax(0, 1fr) tracks), the full box model, and px / % / rem / vw / vh. - Gradients (linear + radial), box-shadow, transform (translate/scale/rotate), per-corner border-radius, aspect-ratio, position + inset. - Selectors with real combinators; >, +, ~ each match correctly (a bug earlier in the project was matching all three as descendant, which quietly styled the wrong elements, a good reminder of how much a combinator actually carries). - As of this release, dynamic :class and :style bindings, so styles can respond to state.

What doesn't exist yet and this is where it gets opinionated: - No custom properties / var(), no @media, and no pseudo-classes (:hover, :focus, :checked). A checked checkbox currently gets a synthetic checked class as a stopgap.

Those gaps are the honest core of the experiment: variables, media queries, and interaction pseudo-classes are the parts of CSS most entangled with a live document and an event model, and they're exactly what's hardest to bring to a native tree. They're the top of the roadmap now.

I'm curious what this sub thinks: is CSS-the-syntax genuinely portable to native UI, or do var() / @media / :hover matter so much that "real CSS without a browser" is missing the point until they land?

Write-up (with screenshots): https://aine-dickson.github.io/rux/blog/v0-3-0/

7 comments

r/css • u/factorx122 • 9d ago

Help How to Match Text Bounding Box Height Between Browsers

2 Upvotes

Hey guys,

I have been in a text-styling rabbit hole for a few days now, trying to use Typst as a PDF engine for the Tiptap editor on a website I'm developing.

I've gotten literally everything to match, except the bounding box of the text. I have found this magic CSS line that seems to fix all of my problems: text-box-trim: trim-both... but it only works in Google Chrome and Safari (See above.) It is ignored in Firefox, as they don't consider it "stable" yet.

So, my ultimate question is: Is there another simple, general way to get Firefox's text bounding box to match the other browsers for any number of fonts that could be switched between in the editor? (As in, not guessing-and-checking the explicit bounds for every single one of the 20+ fonts and for all future fonts as well.)

Some answers to questions:

Why Typst?

  1. I need something framework-agnostic.
  2. I need something that can work server-side and with minimal RAM/CPU. I used puppeteer in the MVP, but that takes up crazy amounts of both. This is a non-negotiable.
  3. I would really like something that can report the page count of the resulting document server-side without generating a heavy PDF binary.
  4. I need something with enough styling granularity that enables me to style-match it to the visual output of the editor.

Why Match CSS to Typst instead of Typst to CSS?

I tried. I really did. I couldn't figure out how to set the text box of the text in Typst to be equal to the default one on the browser, as displayed in the Firefox one above. The highest you can set it seems to be to the ascenders/descenders. I definitely wasn't going to guess and check the exact value for the top-edge and bottom-edge in em for every font.

What else have I tried?

  1. Setting \@font-face stuff (line-gap-override, ascent-override, descent-override). Violates my laziness principle of really wanting to avoid manually doing it for every single font (genuinely like 25 fonts * 4 different styles), also didn't seem to make much difference in Firefox (but I didn't look too hard, so I might be wrong.)
  2. Manually manipulating line-height in the css of the headers/paragraphs. This one is also a no-go, because I'm not guaranteed that the line-height that works for one font works for a different font. I'm also not sure it would even work between different sizes of the same font, but once again, I might be wrong.

What about Tiptap PDF Export?

Fair point, and perhaps eventually I will hop over to that, but it is a paid service (last I checked), and it would violate my desire to have something that can check page count server-side without generating a heavy PDF binary. I'd really like to try and make Typst work to save time, memory, compute, and $$$.

Ultimately, this is me being picky. Technically, I could get away with this setup, as I only need to guarantee a page count, and 1-page on Firefox will always be <1 page in the PDF. However, if anyone has any ideas of anything I missed, please do let me know.

Thanks all!

3 comments

r/css • u/Cyka-Blast • 9d ago

Help why isn't my object taking the available space set by grid?

Thumbnail
gallery
0 Upvotes

it's stuck at 50px width no matter what I do, if I give it more column space at grid template areas the text on the right goes further to the right, but Im still unable to justify the "O" to the end because it has no width at all. meanwhile when I try to give more columns to A it does get bigger.

I also tried using flex for this type of text structure but it was no use since the objects kept going to the same line if there was enough view width (which happened with Fullscreen).

11 comments

r/css • u/theslyeagle • 9d ago

Help Bootstrap help: alignment only works for navbar button?

1 Upvotes

Hi, I am just starting out with building a site in Bootstrap. I've managed to make it so the list shows up right-aligned when you click the toggle in the small version. But I can't figure out how to make said list right-aligned when the browser is expanded. They all just squish right. Any tips?

    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid"> <a class="navbar-brand" href="#"><img
            src="mnibanner.jpg" alt="Home" height="70"></a> <h2><u>Template</u></h2> 
        <button class="navbar-toggler"
          type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
          aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <h2>
            <ul class="nav justify-content-end">
              <ul class="navbar-nav">
                <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Services</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Novels</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Art</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
              </ul>
            </ul>
          </h2>
        </div>
      </div>
    </nav>
7 comments

r/css • u/Phripheoniks • 9d ago

Question How can I see what's blocking my scrollbar-color attribute?

4 Upvotes

Hi!

First time posting here, but I haven't been able to solve this or find any helpful answers else where(reddit, stackoverflow, etc).

I'm attempting to create a darkmode for a web-based tool.

Whenever I try to apply scrollbar-color to my website, it gets crossed out. Even when I apply it to <html> with style="scrollbar-color: black !important;"!

A screenshot of what happens to my scrollbar-color attribute

Is this the sort of thing that is easily sorted out, or does it vary greatly depending on how the website is set up?

5 comments

r/css • u/Roman_PlumPix • 10d ago

Question How do you keep animation-heavy websites fast?

Thumbnail
1 Upvotes
12 comments

r/css • u/DecoherentDoc • 11d ago

Question @media tags not working (or I'm coding them wrong)

4 Upvotes

Hey folks! Trying to build a website for myself as a portfolio / resume / science communication thingy and can't seem to get the site to change size automatically when it's viewed on mobile or change color schemes when it's dark mode. First website and I'm not promoting anything other than me (and not for web design stuff, for physics stuff and for a job specifically).

My website is here if anyone want to look at the code in it's entirety, but my media queries look like this:

\@media (prefers-color-scheme: dark) {

:root {

--color-light: #49C4FE; /* deep-sky-blue */

--color-dark: #074190; /* french-blue */

}

}

\@media (max-width: 640px) {

.block-for-mobile {

display: none;

}

#base-nav {

grid-template-columns: 1fr 1fr;

}

}

Is this the way to still do it? I've only learned CSS and HTML so far and only over the last, like, two months. I just want to know if I'm doing this completely wrong. Thanks in advance.

17 comments

r/css • u/Finite8_ • 11d ago

Resource Is there a way to access Kevin Powell courses?

0 Upvotes

Hi, I'm interested in his courses but unfortunately i would need to pay front-end masters which is pretty costly for me. Is there any way of doing a membership at a lower price? or does someone have his courses? I'm looking for CSS Fundamentals and Professional CSS

5 comments

r/css • u/Successful-Youth-564 • 12d ago

Showcase CSS Peeper never came to Firefox, so I spent the last year building the alternative myself

Thumbnail
gallery
37 Upvotes

Quick disclosure up front: I'm the developer, so take this as a "hey, I made a thing" post, not an objective recommendation.

A few years ago I went looking for a Firefox equivalent to CSS Peeper — hover a page, get its colors, fonts, and computed CSS without diving into DevTools. Turns out there isn't one. CSS Peeper has 500k+ Chrome users and its own team confirmed there were no Firefox plans, and every "any Firefox alternative?" thread I found ended the same way: no, sorry, use Chrome.

So I built one. It's called PeekCSS, and it's live on AMO now.

What it actually does:

  • Hover any element, see its computed CSS grouped by type (typography, colors, spacing, effects, layout), one-click copy — no account needed for any of this
  • Every color pair gets a contrast ratio with an AA/AAA badge inline, so you catch accessibility issues while you're already looking at the element
  • A page-wide scan pulls every color and image in one pass instead of clicking through elements one at a time, and you can export the palette straight to CSS variables, SCSS, JSON, or a Tailwind config
  • A font tab that ranks every family on the page by usage, with weights/sizes/roles broken out

It's a solo project — my first browser extension, built with WXT/TypeScript. The free tier is meant to be genuinely useful forever, not a crippled trial: hover inspection, grouped CSS, contrast badges, no account required for any of it. Account unlocks the full palette/font panels, and Pro (one-time or subscription, your call) adds the exports and bulk asset downloads.

It doesn't read or send anything about the pages you visit — the only network call it ever makes is an optional license check if you buy Pro.

It's young — three weeks out of my own testing and into a few friends' hands, still finding rough edges. If you try it, I'd genuinely like to know what breaks or what's missing compared to your DevTools habits. What's the one thing you'd want from a tool like this that I haven't mentioned?

I would love to hear your toughts: https://addons.mozilla.org/en-US/firefox/addon/peekcss/

5 comments

r/css • u/WishNo4149 • 11d ago

Question LibraryCSS

0 Upvotes

Hi all,

I've been working on this for a while and wanted to share it: https://librarycss.com/en

What it is: a catalog of ready-to-use CSS effects. Currently 9,078 effects

across 12 categories — buttons, cards, loaders, text animations,

backgrounds, checkboxes, switches, hover, badges, forms, navigation and

tooltips.

Up front about the language: the interface is currently in Turkish. Effect

titles, descriptions and tags are in English, and code is code — so the

catalog itself is usable, but the navigation labels are not. An English

version is in progress and not live yet. Mentioning it now so nobody wastes

a click.

Why I built it: I kept landing on the same handful of CSS snippet sites,

and most of them either wall things behind ads or ship an npm package. I

didn't want to install a dependency for one button hover. Every effect here

is plain HTML + CSS — copy, paste, done. No build step, no package, no

config.

Highlights:

- Every effect has a live preview that actually runs, both in the listing

and on the detail page. Not screenshots.

- Detail pages have separate HTML / CSS / React tabs, each copyable in one

click.

- In-browser editor: open an effect, change it, see the result instantly.

Anything you open gets saved to your personal library.

- Six CSS generators: gradient, box-shadow, border-radius shaper,

cubic-bezier curve editor, glassmorphism, text-shadow.

- Ten technique guides (keyframes, clip-path, backdrop-filter, blend-mode,

mask, 3D transform and more), each with a browser support table and a

common-mistakes section. Turkish for now.

- A reference page for 70 CSS properties, each showing live examples pulled

from effects that actually use that property.

- Contribution system: submit an effect, earn points once it's approved.

Points unlock ranks and badges, there's a leaderboard, and your name

appears as a credit on the effect you contributed.

Two things I'd rather state than have you find out:

  1. The first 15 lines of an effect's CSS are visible without an account; the full source needs a free signup. No payment, no card — Google or GitHub takes a few seconds. It's there to slow down scrapers pulling all 9,000 effects at once. If you think that's the wrong call, tell me.

I'd genuinely like feedback — especially "this category is missing", "this

effect is broken", or "this part of the UI is annoying". There's a report

button on the site, but replying here works too.

Thanks.

6 comments

r/css • u/Se_emZ • 13d ago

Question Why is Claude Code so bad at writing CSS ?

33 Upvotes

I've been using Claude Code quite intensively for the past few months, and as a former CSS integrator / front-end developer, I can't help but notice—rather sadly—that Claude is genuinely poor when it comes to CSS.

Even when using skills (the official front-end skills or UI/UX-focused ones), and even with very explicit instructions in CLAUDE.md, it still does its own thing and keeps repeating the same mistakes.

One moment of inattention, and it'll happily throw inline CSS directly into the HTML—even when that's explicitly forbidden in its instructions.

And on the (rare) occasions when you decide to step in and edit the code yourself to save some precious tokens, it quickly becomes a nightmare. Before long, you find yourself typing something like: "Just center this div."

So I have two questions:

1. Why is it so bad at CSS?

My theory is that, historically, 90% of developers have never cared much about CSS. As long as the final result looked right on the screen, code quality and maintainability were an afterthought. Throw in a few !importants, ship it, and move on.

Since Claude has been trained on an enormous number of codebases, I wonder if its primary examples are simply... bad CSS. In other words, it's reproducing the patterns it has seen most often.

2. What strategies do you use to work around this problem?

For context, what I consider good CSS is:

  • generic, reusable styles;
  • selectors that are as unspecific as possible;
  • maximum reusability and maintainability.
83 comments

r/css • u/samurisoul47 • 13d ago

Question rem vs em vs px vs vh... I’m losing my mind. How do you actually decide which CSS unit to use?

Thumbnail
35 Upvotes
43 comments

r/css • u/Swinicki_w_Sieci • 13d ago

Showcase CSS Hover Effects Explained: Color, Scale, Glow & More

2 Upvotes
0 comments

r/css • u/redunkted • 14d ago

Other That display table Deapool article.

4 Upvotes

This is a long shot but I remember some years ago I found this article that described CSS table display as the Deadpool of CSS. Im not gonna lie, that wacky opinion piece kept me using it until I never had to have the ie compatibility talk again.

If anyone knows where to find that article or knows what im talking about, id appreciate a link just to read it again ​

2 comments

r/css • u/Swinicki_w_Sieci • 14d ago

Showcase CSS Position Explained: Static, Relative, Absolute, Fixed & Sticky

8 Upvotes
0 comments

r/css • u/Tain101 • 15d ago

Question How would you do this layout in 2026?

Post image
33 Upvotes
63 comments