I've been doing this webdev things too long. Many of these "old" examples are news to me.
Modern CSS Code Snippets: Stop writing CSS like it's 2015
131–140 of 318 posts
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#132Earlier quoted context omitted.
Yeah. There is no need to obfuscate your code, just use Tailwind.
Obfuscate? I can learn tailwind and use it in dozens of projects. I can use tailwind in my project and onboard dozens of developers immediately. I can learn your CSS conventions and use them in exactly one project.
Why can you use CSS conventions in only one project?
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#133Earlier quoted context omitted.
Wherever you want to be. Tailwind works for your team? Go for it. Inline CSS for your solo project? By all means. Still stuck on SASS? It'll keep working just fine. All in on modern CSS? More power to ya!
Missed opportunity to turn this into a poem
Go for it if Tailwind works for your team.
Inline CSS for your solo project? Chase your dream.
Still stuck on SASS? It'll work just fine.
All in on modern CSS? Go ahead and shine.Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#134Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#135Earlier quoted context omitted.
I was recently doing some very specific web scraping of some very public very static documents. About 25% of them use a soup of divs with hashes for class names. Not a or or in sight. I am fine with the idea of what tailwind does but like at least using semantic tags where appropriate could be a thing.
I do sympathise as someone who has to scrape content from time to time, but that doesn't sound like a problem for the author of the content or something that impacts their intended user.
that's a problem for accessibility too
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#136Earlier quoted context omitted.
Tailwind is not what you're describing.
Isn’t that what utility classes are? Shorthand for inline styles? Not saying it’s good/bad, but it feels like that’s the use case
It's much more than that because it can make use of CSS pseudo selectors like hover, which is not possible with inline styles.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#137Earlier quoted context omitted.
You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.
Cognitive load of looking at 12 open files trying to understand what’s happening. Well, in fairness some of those 12 are the same file because we have one part for the default CSS and then one for the media query that’s 900 lines further down the file.
Css modules gets away from the larger sins of the massive global css files.
If modules had existed much earlier it probably would’ve gotten rid of most of the awfulness.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#138Earlier quoted context omitted.
> most of those creative examples are in the 40-50% browsers support range. Not if you filter the examples. Click "widely available".
First widely available one I saw was this: https://modern-css.com/staggered-animations-without-nth-chil... That would actually fix some ugly CSS I have. The demo works. Neat. Except... the demo doesn't use either the old syntax or the new syntax. The browser support is wrong (Firefox doesn't support it, the site says Firefox 16+; it says Chrome 43+ but in reality it's much newer: Chrome 148+). It says "Since 2018" bu…
Also one of the features that I want -- scrollbar-gutter: stable -- is shown everywhere as being stable for many Safari versions, but when I try it it just didn't work. ¯\_(ツ)_/¯
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#139My top list of recent CSS improvements: 1) Nested selectors. 2) :has(...). 3) :is(...), before you had to write :not(:not(...)). 4) :where(...), similar to :is(...), but the selector weight inside :where becomes 0. Useful when you need deep/complex selectors without increasing the selector weight.
big +1 on #1.
As a tip - most LLMs are unaware it exists due to either knowledge cutoff or not having enough training data for it.
As a recommendation, include some examples of it in your AGENTS.md. Here's what I use:
--------------------------------------
## CSS nesting (required) When writing CSS (including component `css()` strings and `soci-frontend/soci.css`), *use modern CSS nesting* where it improves readability and reduces repetition.
- Prefer nesting with the `&` selector for pseudo-classes / pseudo-elements and compound selectors. - Avoid duplicating the parent selector when nesting can express it once. - Reference: [MDN `&` nesting selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/S...)
### Quick reference
#### Pseudo-classes / no-whitespace attachment
```css .button { color: var(--text);
&:hover {
color: var(--text-secondary);
}#### Pseudo-elements
```css .fade { position: relative;
&::after {
content: '';
position: absolute;
inset: 0;
}#### Descendant nesting (whitespace implied)
```css .card { padding: 12px;
.title {
font-weight: 600;
}#### “Reverse context” (`.featured .card`) using `&`
```css .card { .featured & { border-color: var(--brand-color); } }
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#140My top list of recent CSS improvements: 1) Nested selectors. 2) :has(...). 3) :is(...), before you had to write :not(:not(...)). 4) :where(...), similar to :is(...), but the selector weight inside :where becomes 0. Useful when you need deep/complex selectors without increasing the selector weight.
Mine is text-box: trim. Twenty years of trying to explain to graphic designers why it’s next to impossible possible to get the top of a capital letter to a box, I feel free like a bird.