TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Modern CSS for Dynamic Component-Based Architecture

179 pointsby Twixesalmost 2 years ago

5 comments

Guest71022almost 2 years ago
Comprehensive article.<p>I’ve long given up trying to keep up with everything added to the spec since about `display: flex`. There’s just too much stuff, and the shoehorning of features into a syntax&#x2F;spec from 1996 doesn’t appear to me to be a sustainable long term strategy to facilitate increasingly complex web applications.<p>Maybe it’s been considered, but some use of namespaces and modules in the syntax could at least help developers opt into specific CSS modules and let other developers know what magic they can expect to find in the stylesheet.<p>``` @use grid @use container @use layer<p>@layer layout { .layout-grid { --layout-grid-min: 30ch; --layout-grid-gap: 3vw;<p><pre><code> display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr) ); gap: var(--layout-grid-gap); }</code></pre> }<p>@layer layout { :is(.layout-grid, .flex-layout-grid) &gt; * { container: var(--grid-item-container, grid-item) &#x2F; inline-size; } }<p>```
评论 #36377672 未加载
评论 #36377002 未加载
评论 #36376297 未加载
评论 #36376371 未加载
评论 #36382356 未加载
chrisweeklyalmost 2 years ago
Good resource, w&#x2F; useful examples, from a &quot;here&#x27;s how to start incorporating some of the new stuff&quot; angle. For more of a &quot;building things from first principles&quot; foundation, I continue to recommend <a href="https:&#x2F;&#x2F;every-layout.dev" rel="nofollow noreferrer">https:&#x2F;&#x2F;every-layout.dev</a>.
armchairhackeralmost 2 years ago
2 questions:<p>- Is there a modern version of the CSS Zen Garden? <a href="https:&#x2F;&#x2F;www.csszengarden.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.csszengarden.com&#x2F;</a> is very old<p>- From people who know CSS better than I do, do these features make TailwindCSS less useful &#x2F; necessary? Though I&#x27;m sure much of the answer is &quot;TailwindCSS is a different paradigm&quot; since it&#x27;s basically inline styles, and CSS is basically non-inline styles.
评论 #36378057 未加载
评论 #36376731 未加载
la_fayettealmost 2 years ago
Oh wow, i wasn&#x27;t aware of nesting support in native css, with variables and nesting, there seems to be no real reason for using sass anymore...
评论 #36377678 未加载
yxrealmost 2 years ago
Sometimes I think I know everything that I need to know about web dev, but then I read something like this and learn about new features that I didn&#x27;t know of.<p>I hope they think about deprecating some features or slowing down on adding features. Letting developers rely on transpilers is great way to keep the core language simple while letting people do anything they want.
评论 #36377279 未加载