man I can't wait to not need LESS/SCSS anymore. the less I need to compile/transpile before handing stuff off to the browser, the better in my book.
I’m looking forward to the day when we can get back to no compiling/transpiling web development.
WebKit Supports Nested CSS
61–70 of 183 posts
Re: WebKit Supports Nested CSS
#62Is there a PostCSS or similar plugin which enforces this nesting syntax (& required for element selectors) so we can be ready for when this is widely adopted?
PostCSS has supported CSS nesting for many years now. The nesting standard has changed pretty minimally over the years and the PostCSS team has done an excellent job keeping up One of the main reasons I never used CRA for my miniprojects was because the first thing I always wanted to do was set PostCSS up with nested CSS support which was a pain to do in CRA
I’m familiar with PostCSS nesting, but I don’t think it requires ampersands (&) for nested element selectors: `.class { p { ... }}` works. I’m having trouble finding a canonical name for the standard flavor of nesting, otherwise I’d be looking for a GitHub issue.
Re: WebKit Supports Nested CSS
#63man I can't wait to not need LESS/SCSS anymore. the less I need to compile/transpile before handing stuff off to the browser, the better in my book.
I’m looking forward to the day when we can get back to no compiling/transpiling web development.
I'm afraid TypeScript support in browsers is very far away, if it ever happens.
Re: WebKit Supports Nested CSS
#64Nested rules is just a syntax sugar. In Sciter, 10 years ago, I came up with style sets: @set Main { :root { ... } // root element that has this set applied .bar { ... } article { ... } :root > article { ... } } main { style-set: Main; } // main element with the set applied This solution solves two problems: 1. Modular/componentized style definition - same goal as in nesting styles, but without introduction of new sy…
If syntactic sugar was really just sugar, JS would have sticked to callback functions, and we’d still be inventing abstractions to make our lives easier.
Syntactic sugar, sometimes, is the promise of sunnier mornings and that matters.
Re: WebKit Supports Nested CSS
#65Maybe I am an outlier... but I really don't like nested style documents like those founds with SASS, LESS, PostCSS. When the number of nested selectors becomes too great it can become very difficult to reason about. I would never use this without some kind of lint rule enforcing a maximum depth of selector nesting. I agree with the other commenters ITT taking the position flat CSS looks cleaner than nested documents.
> When the number of nested selectors becomes too great it can become very difficult to reason about.
This is a sign you need to decompose whatever design you are working on into smaller components. If you’re trying to write styles for a whole page at once, you’ll see this problem, but if you are working on small components, it’s very rare.
Re: WebKit Supports Nested CSS
#66Nested rules is just a syntax sugar. In Sciter, 10 years ago, I came up with style sets: @set Main { :root { ... } // root element that has this set applied .bar { ... } article { ... } :root > article { ... } } main { style-set: Main; } // main element with the set applied This solution solves two problems: 1. Modular/componentized style definition - same goal as in nesting styles, but without introduction of new sy…
If syntactic sugar was really just sugar, JS would have sticked to callback functions, and we’d still be inventing abstractions to make our lives easier. Syntactic sugar, sometimes, is the promise of sunnier mornings and that matters.
"For a Linux user, you can already build such a system yourself quite trivially by getting an FTP account, mounting it locally with curlftpfs, and then using SVN or CVS on the mounted filesystem. From Windows or Mac, this FTP account could be accessed through built-in software."
Re: WebKit Supports Nested CSS
#67Sanity has prevailed! Great work from the WebKit team, leading the way here. Not to mention great solve on the `color: blue` fiasco. Balances an edge-case compromise nicely, and leaves it open to future improvements. Bravo.
Re: WebKit Supports Nested CSS
#68Earlier quoted context omitted.
I remember the main argument against this is that you can always enforce this with a linter and either way it's not a slower parser, maybe slightly more complex. Personally I do agree and I like the explicitness of always having the &
Yeah that's fair and I admit don't actually know anything about the parsing implications. I guess really I'm just looking for an excuse to convince my coworkers to adopt this practice without coming off like I'm bikeshedding haha
I think you could argue for the clarity (code is read more than written) and consistency (why do I need this here and not in other places?)
Re: WebKit Supports Nested CSS
#69https://caniuse.com/css-nesting So it's the latest chrome, Safari technical preview, and edge behind a flag. No disposition from Firefox yet afaict.
Chrome dev. The latest stable version is 110
Re: WebKit Supports Nested CSS
#70Maybe I am an outlier... but I really don't like nested style documents like those founds with SASS, LESS, PostCSS. When the number of nested selectors becomes too great it can become very difficult to reason about. I would never use this without some kind of lint rule enforcing a maximum depth of selector nesting. I agree with the other commenters ITT taking the position flat CSS looks cleaner than nested documents.
When the number of nested selectors becomes too great it can become very difficult to reason about.
When any complexity becomes too much it makes it harder to reason about. The solution is to avoid complexity; you can do that while using a small number of nested selectors.