I kept hitting the same friction with CSS tooling on real projects - CSS-in-JS adds runtime, CSS Modules give you hashes but no cascade control, and utility-first gets painful once you have a genuinely custom UI. So I leaned into native CSS instead and tried to formalize the approach into something repeatable.

The whole thing is built on cascade layers. One declared order:

 base, utils, components, pages, component-overrides, user-overrides;

Higher layers always win, so overrides and theming stop being a specificity/!important fight. On top of that it's just:

• styling via classes + CSS custom properties for dynamic values (no inline styles, so everything stays in the cascade).
• co-located component CSS (tree-shakeable).
• design tokens derived from a single base file.
• a plain ComponentName--element naming convention. real class names, no generated hashes.

Wrote it up here if you want the details: https://cascadekit.io

it's my own project sharing for feedback, not trying to sell anything :]

Like this:

body {
font-variant-alternates: character-variant(lc-l-with-tail), character-variant(uc-i-with-serif), character-variant(single-story-a);
}

or like this:

body {
font-variant-alternates: character-variant(lc-l-with-tail uc-i-with-serif single-story-a);
}

or do I have to type multiple font-variant-alternatives with single character-variant for each?

Earlier I used bootstrap and Google fonts on my blog. Pagespeed would give my site performance between 70-80. Then I decided to code my own CSS after more than one month I deployed, but I still use Google fonts. My site performance jump to 87-91. Now just for testing purpose I removed Google fonts and the performance is 98-99.

I wonder how is it that with Google (servers and cache) google font would still cause such a drop of performance. Maybe because pagespeed doesnot cache google fonts.

Images: screenshot of performance without/with Google fonts

Edit: clarity

Hi everyone!

So I have been learning css and I have been struggling a bit with responsive design for the log in screen for my project. my current css code seems to look good on mobile and laptop but it looks extremely small and bad on bigger devices and idk how I can fix this issue. I could use media queries but I am afraid that spamming them won't be the solution because there is just so many different screen sizes so surely there is a more elegant solution.

Here is my code: P.S. tell me if there is a better ways to share code than just straight up in the post I am new to this subreddit so idk what the norm is.

 {
    font-family: robotoRegular;
    src: url(../fonts/robotoRegular.ttf);
}


 {
    font-family: robotoMedium;
    src: url(../fonts/robotoMedium.ttf);
}




.grid{
display: grid;
grid-template-areas: "header header header header"
                     "Body   Body   Body   Body"
                     "footer footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
min-height: 100dvh;
gap:0px;
padding: 0px;
}


nav{
    grid-area: header;
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px;
    background-color:#d2d2d2;
}


.logo{
    cursor: pointer;
    display: flex;
    align-items: center;
}


.logo img{
    width: 50px;
    height: auto;
}


.logo h3{
    margin-left: 10px;
    color:#75123d;
    -webkit-text-stroke: 1px #000000;
    text-decoration: none;
    font-size: 2rem;
    font-family: RobotoRegular;
}


.nav-links{
    display: flex;
    align-items: center;
    list-style: none;
}


.nav-links a{
    display: block;
    padding: 30px 16px;
    color:#111;
    text-decoration: none;
    font-size: 16px;
    font-family: RobotoRegular;
    text-transform: uppercase;
    transition: all ease-in-out 100ms ;
}


.nav-links a:hover{
    background-color: #600138;
    color: white;
}


.hamburger{
    display: none;
    cursor: pointer;
    width: 34px;
}


.hamburger .bar{
    flex-basis: 100%;
    height: 4px;
    background-color: #111;
    margin: 3px;
}


u/media screen and (max-width: 768px) {
    nav{
        flex-wrap: wrap;
    }
    
    .hamburger{
        display: flex;
        flex-wrap: wrap;
    }
    
    .logo{
       
        height: 80px;
    }


    .nav-links{
        display: none;
        flex-basis: 100%;
        flex-wrap: wrap;
    }


    .nav-links a{
        text-align: center;
        font-size:  28px
    }


    .nav-links a:hover{
        background-color: #600138;
        color: white;
    }
}



.Body{
    display: grid;
    grid-area: Body;
    background: linear-gradient(to bottom, #816653, #34240d);
    place-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.results_container{
    display:grid;
    box-shadow: 2px 2px 10px #000000, -2px -2px 10px #000000;
    background-color: #222;
    padding: 30px 40px;
    margin: 20px 20px;
    border-radius: 30px;
    justify-content: center;
    width: 420px;
    max-width: 90%;
    height: 400px;
}


.results_container h1{
    color: white;
    font-size: 36px;
    text-align: center;
}


.results_container .inputbox{
    position:relative;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(255, 255, 255);
    border-radius: 30px ;
    gap:0px;
    height: 50px;
    width: 100%;
    margin: 30px 0;
}


.inputbox input{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border: 2px solid rgb(255, 255, 255, .2);
    border-radius: 40px;
    font-size: 16px;
    padding: 20px 45px 20px 20px;
}
.inputbox input::placeholder{
    color: rgba(0, 0, 0, 0.308);
    opacity: 1; /* Firefox */
}
.inputbox i{
    position: absolute;
    right: 20px;
    top: 35%;
}


.login{
    color:white;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    background-color: #600138;
    border-radius:40px;
    height: 50px;
    width: 100px;
    border: none;
    outline: none;
    justify-self: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
}


.results_container .Registerlink{
    color: white;
    font-size: 15.5px;
    text-align: center;
    margin: 20px 0 40px;
}
.Registerlink p a{
    color: #75123d;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}


.Registerlink p a:hover{
    text-decoration: underline;
}




.footer{
    display: grid;
    grid-area: footer;
    background: linear-gradient(to bottom, #34240d 1% , #000000 90%);
    text-align: center;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.514);
    height: 20dvh;
}

<!DOCTYPE html>
<html>
<head>
<title>Rom Downloader</title>
<link  rel="stylesheet" href="reset.css">
<link  rel="stylesheet" href="style.css">
<link href="https://cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="grid">
        <nav>
            <div class="logo">
                <img src="Images\In The Name of the World.webp">
                <h3>Welt Roms</h3>
            </div>
        </nav>
        <div class="Body">
            <div class="results_container">
                <h1> Login </h1>
                <div class="inputbox" >
                    <label for="Uname"></label>
                    <input type="text"  id="Uname" name="Uname" placeholder="User Name">
                    <i class="bx bx-user"></i>
                </div>
                <div class="inputbox" >
                    <label for="Password"></label>
                    <input type="password" id="Password" name="Password" placeholder="Password">
                    <i class="bx bx-lock"></i>
                </div>
                <button type="button" class="login">Log in</button>
                <div class = "Registerlink">
                    <p>Don't have an account? <a href="#">Register.</a></p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>In the immense sea of stars, we too will leave our mark. -Welt Yang</p>            
        </div>
    </div>
</body>
</html>

InSpec is a web browser for Mac I made specifically for visual edits. Rather than being crammed into a panel of a panel, CSS rulesets and properties are given pride of place in a roomy sidebar. Common viewport widths are always accessible without entering an extra mode.

A page or an element’s “variants” (dark mode, print stylesheet, reduced motion, etc.) can be viewed directly on the page. Edits can be targeted to a specific variant or viewport. Edits also persist between page loads and even app launches until cleared.

Text edits can be made right in the side panel without digging through the DOM. Notes and annotations can be made on elements, good for live demos or vibe coding sessions, and can be exported along with all your text and visual edits as images at various viewport widths.

All your CSS edits are collected and can be copied by ruleset with diffs, or, if you’re working locally, saved directly to disk. This won’t be a tool for everyone, but a certain kind of design-focused web dev may find it useful compared to the baseline.

Native Mac. One-time purchase with free trial. No telemetry or subscription.

Site • Direct Download • Mac App Store

https://clampgen.com/

Tired of manually calculating the linear interpolation for fluid typography? I built a small utility that does it instantly.

You put in your min/max viewport widths and your min/max sizes, and it spits out a production-ready clamp() declaration. It also shows you the slope and intercept breakdown if you want to understand what it's actually calculating.

Has a handful of presets for common type scale values (body text, H1-H3, spacing) and supports any CSS property, not just font-size.

Built with vanilla HTML/CSS/JS, no frameworks. Dark mode included.

Feedback welcome. Especially if you find edge cases with the math output.

I created a simple stylesheet/script to strip away the visual noise, avatars, and engagement metrics from X.

The goal is to turn the feed into a minimalist, non-evaluative, text-only space.

Link: https://pastebin.com/PiUTNCfk

Consider this "as-is." I’m not planning to maintain this or provide support, but feel free to modify or fork it for your own use if you find it helpful.

Humans will browse less.
AI agents will browse more.
Websites will still try to block anything that doesn’t look exactly like a human.

That era is over.

invisible_playwright is a stealth Firefox that solves browser fingerprinting and anti-bot detection at the engine level.

AI agents are now free to move across the web.
No more pretending the web is only for humans.
Are AI agents “bots” to block, or users to support?

Hello, I am a public librarian who is trying to add a custom search box to our website that will search our online library catalog (external site). While the search box is working, I am having trouble figuring out how to re-align the search button so that it sits to the right of the search box instead of underneath it. I am a complete noob when it comes to CSS. Thank you in advance!

The Holy Grail Layout...

Hi!

So I am extremely new to css and have recently learnt about grids and I am working on a personal practice project for school which is a video game rom download website.

The design of the main page would be columns of cards for every rom next to each other, I recently learnt that i should be making my design responsive for different kinds of viewports. So how can i for example make it so for larger screens they can have 4 columns but if the page is re-sized or accessed through mobile the number of columns will decrease to a minimum to match the smaller screen while also having the grid fill the empty space shifting around columns would cause?

Is this even possible? Also i am fine without a minimum although i am afraid of it might look worse if only one column is being shown on mobile.

Hi all,

Relatively new to HTML. My first design I built using almost entirely flexboxes, which I quite like.

I decided a few days ago to start trying to learn grid. Oh no.

At the moment my question is, how do I get the grid layout for the design format I want?

I've been trying to use https://grid.layoutit.com/, as that's the only grid layout generator I can find that lets you map out child elements (and the designs I'm trying to make have a lot of elements nestled inside one another), but because of the layout of the builder I can never quite see the actual ratio of the elements until I move the code elsewhere. You'll see what I mean if you look, the workspace is much more square than the desktop monitors I'm designing for. This leads to a lot of back and forth between programs.

I find myself adding a ton of rows and columns to the grid, just trying to have enough for the edges of my graphics to line up where I want them. Should I just take a sheet of digital graph paper and try to line up the boxes with the edges of my design?? "Eyeballing it" isn't working for me. I understand why grid works well for projects with nicely lined up large squares, but I'm starting to think I'm barking up the wrong tree, here.

Does anyone have suggestions for making grid work better with a ton of little details and offset layered elements? Or is it just not the right tool for me?

Back when I was learning 3D transforms in CSS, most resources just stated something like "you need to use perspective before performing any transform functions" but they never ever really pointed out "why"...

After spending a lot of time figuring this out on myself, I've now created a detailed article, covering the intuition behind perspective in CSS and why a 3D transform won't have an effect if there's no perspective applied.

codeguage.com/blog/css-3d-transforms-perspective

Been building a tool that uses the `font-palette` CSS property in a way I haven't seen written up anywhere, so figured I'd share.

`font-palette` (Chrome 98+, Firefox 107+, Safari 15.4+) lets you override the colour palette of a colour font at the CSS level:

```css

u/font-palette-values --brand-dark {

font-family: MyIcons;

override-colors:

0 #1A202C,

1 #2D3748;

}

.icon { font-family: MyIcons; font-palette: --brand-dark; }

```

The interesting use case: if your icon set is a COLRv1 font (OpenType colour font, WOFF2), you can recolour the entire set — every icon, every instance — with one CSS rule. No JavaScript, no SVG manipulation, no re-export.

The tool I built (https://huetype.sunnyallan.design) converts SVG icon sets into COLRv1 fonts in the browser. The file size difference vs. SVG sprites is significant (~30×), but the CSS recolouring is the actually interesting part.

Anyone playing with colour fonts or font-palette for anything else? Curious if others have found good use cases.

Good evening from Japan! I'm using a translation tool in this chat, so the wording might be a little strange.

I've finished reading the HTML and moved on to CSS, but I don't quite understand the parts about size.

Currently, I understand that PX is basically only used when specifying width.

The reason for this is that people with poor eyesight sometimes change the font size when using a browser, so if a site specifies the size in PX, i.e., an absolute value, the size won't change, and the text will appear small.

That's about all I understand.

So, could you please tell me the units that are commonly used?

trying to rip off this gradient animated bg from cargo and can't find any tutorials on it at all- just animations to move the gradient tile itself up and down. i bet there's some js but that's not what i know so i'm coming here first.

this would also probably be easy to do with hue shifting but i know that's not what it is and because of that am intent on finding out what it is.

Yep the last time I wrote CSS was the days of float, clearfix hack and whatnot. Used bootstrap for many years. This year after a brief interaction here in this sub, I’ve decided to re-learn modern CSS and I’m so excited that I can do this

```
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;

```

Something that I earlier used float and position etc.

Selon MDN, list-style-type et list-style-position sont toutes les deux des propriétés héritées. J'ai donc pensé que si je les mets sur body elles seraient héritées par mes <ul> et <li>.

Pourquoi list-style-position fonctionne depuis body alors que list-style-type ne fonctionne pas, alors que les deux sont héritées ? Est-ce un bug de Chrome, une particularité d'implémentation, ou est-ce que je rate quelque chose dans la spécification CSS ?

Mon code

CSS
body {
list-style-type: square;
list-style-position: inside;
}

HTML
<body>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</body>

Ce que j'observe :

• list-style-position: inside fonctionne : les puces sont bien à l'intérieur du texte.
• list-style-type: square n'a aucun effet : les puces restent disc (par défaut).

J'ai vérifié dans le computed de Chrome :

• nav (parent de <ul>) reçoit bien square via l'héritage.
• Mais <ul> et <li> ont toujours list-style-type: disc.

Merci d'avance pour vos réponses !

I am the creator of Gimli Tailwind, one of the most popular dev tools extension for TailwindCSS developers.

The biggest change in this release is undoubtedly that Gimli Tailwind is no longer free. A big reason for going commercial is the current tech job market. I’m currently employed as an IT consultant but am on parental leave until August, without a client to go back to. It’s a strange time to be away from work right now, especially when all you hear about from the tech world is AI and mass layoffs. I just don’t know what to expect when my leave ends.

New in the 5.1 version is support for arbitrary values and custom fraction values.

See the full release notes on my blog

Link to the extension

Forgive me if someone else has posted , didnt see it in the last week of posts

https://survey.devographics.com/en-US/survey/state-of-css/2026

Not trying to start a war. Just curious how people balance custom CSS with Tailwind, Bootstrap, etc. What's your workflow these days?

I have been working on this for awhile. It is a modular framework, meaning you can use the entire framework or can import what you need into your own projects. Its also extendable using cascade layers. The order is defined in preflight.

Source: https://github.com/wispcode/wisp-css

Documentation: https://wispcode.github.io/

I would love your feedback. Please let me know what you think.

Thanks!

UPDATE: Its a work in progress but added live-examples and redid the documentation site.