TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Relearn CSS layout

985 点作者 aarohmankad将近 6 年前

18 条评论

sktrdie将近 6 年前
To me an evident thing in UI development is that separating stylesheet from layout isn&#x27;t really a thing anymore and the benefits of this separation aren&#x27;t really that clear.<p>Things like SwiftUI and React are showing that declarative UIs can be built by tying the style to the layout and allow for much better accessibility, tooling, overall thinking of how UIs work.<p>So to me CSS feels a bit outdated since big companies are definitely moving away from this separation. How does HN feel about this?
评论 #20198840 未加载
评论 #20198988 未加载
评论 #20199281 未加载
评论 #20198361 未加载
评论 #20198989 未加载
评论 #20198708 未加载
评论 #20199177 未加载
评论 #20201620 未加载
评论 #20198921 未加载
评论 #20198841 未加载
评论 #20199071 未加载
评论 #20200395 未加载
评论 #20198775 未加载
ctidd将近 6 年前
I&#x27;ve written a series of very similar articles, and seeing as some of the ones in this site don&#x27;t seem to be available yet, and otherwise as another point of view, they may be of interest to anyone looking at this: <a href="https:&#x2F;&#x2F;ctidd.com&#x2F;2017&#x2F;css-ui-patterns&#x2F;content" rel="nofollow">https:&#x2F;&#x2F;ctidd.com&#x2F;2017&#x2F;css-ui-patterns&#x2F;content</a>
aarohmankad将近 6 年前
Saw this awesome project on Lobsters. I went ahead and ported these components to generalized, composable Styled Components. There&#x27;s also an npm package at `every-layout`.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;aarohmankad&#x2F;every-layout" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;aarohmankad&#x2F;every-layout</a>
评论 #20200694 未加载
vedantroy将近 6 年前
Out of curiosity, why doesn&#x27;t the stack layout use flexbox? It seems like flexbox is the perfect fit for such a layout.
评论 #20197028 未加载
评论 #20196524 未加载
评论 #20199099 未加载
评论 #20202442 未加载
评论 #20196741 未加载
评论 #20198788 未加载
razvandh将近 6 年前
started reading some of the ideas and got put-off almost immediately. &#x27;margin-top&#x27;? the owl-selector? Really? Why do we keep making our life more difficult than it should be? CSS is such a beautiful and interesting tool, yet we still decide to misuse it in trying to be too smart.<p>( margin-top: you start dealing with parents inheriting the margin - which is an old quirk of CSS - it&#x27;s a side-effect you need to control, so the usage of margin-top should always be avoided and margin-bottom should be the preferred solution owl selector: performance implications - it&#x27;s fairly bad from a performance POV to use it. Also, we live in a world where we have control over how the layout is generated, we should avoid using generic selectors Source: I&#x27;ve been doing frontend and focused on CSS for over 10 years )
评论 #20201376 未加载
gary__将近 6 年前
This is great.<p>I would prefer that browser compatability is mentioned, for my own purposes that would be IE11.<p>Perhaps set a baseline of what browsers are considered in the intro and then highlight deviance as it occurs.
评论 #20197635 未加载
评论 #20197527 未加载
meerita将近 6 年前
To me this way to CSS development is outdated. I will never program like this anymore. I only do functional&#x2F;utilitarian CSS.
评论 #20198140 未加载
评论 #20199853 未加载
评论 #20198144 未加载
评论 #20198133 未加载
评论 #20198341 未加载
deanclatworthy将近 6 年前
Having been doing full-stack for over 15 years now, I have never seen the owl selector before. It&#x27;s almost a perfect solution to a problem I regularly have.<p>A quick google didn&#x27;t reveal any browser support for it though. Anyone got a resource for that? I can see that the adjacent selector is supported on 98% of global browsers, but I would not be surprised if there were some issues combining it with * + <i>
评论 #20205158 未加载
have_faith将近 6 年前
The knowledge contained in the articles is very good but I got the feeling that it was written for an audience that already undertands the problems being solved. The Stack for instance is written in a language that only really makes sense if you&#x27;ve spent a lot of time with CSS and contains some extraneous paragraphs. I only mention this as the problems and solutions being explored are very valuable to learn but I think it could be written simpler and more succinctly so that meaning isn&#x27;t lost for new-comers.<p>I&#x27;d be happy to contribute if it was open to suggestions.
评论 #20197648 未加载
评论 #20197263 未加载
miki123211将近 6 年前
This website is one of the accessiblest things (for screen readers) out there. I have never seen alt text for layout images. This is well beyond amazing.
sam0x17将近 6 年前
Uh huh, what about &quot;the vertically centered div&quot; and the ever important &quot;span vertically centered within the parent&quot;
victor106将近 6 年前
What’s the best resource (book, videos etc.,) to learn css these days?
评论 #20197729 未加载
评论 #20198659 未加载
评论 #20197651 未加载
评论 #20197555 未加载
评论 #20218540 未加载
评论 #20198048 未加载
评论 #20206640 未加载
评论 #20198804 未加载
Theodores将近 6 年前
There is more than way to do all of these layouts. I don&#x27;t have time to learn all of them, I just want my content to look great on all devices. I also want to stick to the specifications of HTML as it applies to all the browsers that do HTML5 - so no Internet Explorer. Sticking to the specs means no hacks and the likelihood that someone can make sense of my code in ten years time and not think &#x27;why did they do this?&#x27;.<p>For this reason I will be sticking with CSS Grid. CSS Grid is supported in all HTML5 browsers, so that means everything except the depreciated Internet Explorer.<p>To get my CSS Grid versions to work I will also be using CSS Variables defined in media queries to make things responsive. I don&#x27;t need to have lots of fixed breakpoints as I use fonts that scale in such a way that lines don&#x27;t get too long to read on really big screens.<p>For the CSS variables I have fallbacks which are the desktop defaults. So although &#x27;mobile first&#x27; I can get a deluxe mobile experience but code for desktop in the first instance.<p>With pseudo classes I can add icons, usually Unicode symbols or SVG, SVG defined in CSS variables.<p>Since I can do this with CSS Grid and only have Internet Explorer be &#x27;of concern&#x27;, I can write HTML5 with no superfluous markup. That means no div, span or even class attributes. I have got out of the mindset of using container wrappers for content and just putting neat content where it needs to go using CSS Grid.<p>You could look at my HTML and think I had just swapped the div for article, aside and section. Or for figure. Or for main, header and footer. But that is not the case, I find that if I am using the right elements and pay attention to the structure of my content it just naturally styles itself with CSS Grid, no additional markup needed.<p>Also not needed are clever things with calc. If I find myself doing that then it is a sign that I have got it wrong and that there is a simpler solution I have overlooked. I also rarely use pixels. It is ems or viewer units all the way, again no need to think of what a pixel actually is.<p>I find that writing HTML and styling it without the hacks makes my code pretty alien compared to how the rest of the world is doing it. Anyone can make stuff complicated for reasons of backward compatibility, keeping it concise and simple is a different craft.<p>For the above reasons I am disappointed by these layout modules, a lot of work has gone into it but at times we need to question what we take for granted. Everything is a div. I look at the examples and see that if, e.g., the image is put in a figure and given a figcaption then the structure is there for it to effortlessly be given layout with CSS Grid, no container elements needed.<p>At some stage we need to stop looking at content as placeholder examples and stop using generic containers.
评论 #20197586 未加载
评论 #20197399 未加载
sheriffderek将近 6 年前
&quot;Web browsers helpfully apply default CSS styles...&quot; Totally disagree with the idea that this is &#x27;helpful.&#x27; Pretty site though. I think there&#x27;s some good stuff here - but it&#x27;s not how I&#x27;d teach it. Side-note: I love how wappalyzer says &#x27;zero technologies detected.&#x27; That&#x27;s rad. &quot;Each layout in Every Layout is intrinsically responsive.&quot; Everything is intrinsically responsive before you force it not to be. Big respect for tackling this though. Lots of good stuff and just a bit of maybe not great stuff.
PyroLagus将近 6 年前
I&#x27;m not sure if the creators will read this, but on <a href="https:&#x2F;&#x2F;every-layout.dev&#x2F;rudiments&#x2F;axioms&#x2F;" rel="nofollow">https:&#x2F;&#x2F;every-layout.dev&#x2F;rudiments&#x2F;axioms&#x2F;</a><p>&gt; At the time of conceiving the axiom, you make not have pictured this specific visual effect.<p>I&#x27;m pretty sure it should be &quot;may&quot; instead of &quot;make&quot;.
sergiotapia将近 6 年前
&gt;<a href="https:&#x2F;&#x2F;every-layout.dev&#x2F;layouts&#x2F;cluster&#x2F;" rel="nofollow">https:&#x2F;&#x2F;every-layout.dev&#x2F;layouts&#x2F;cluster&#x2F;</a><p>&gt;The Cluster layout is available in the full version of Every Layout, which is still in production. All of the currently available layouts are marked &quot;read now&quot; in the index page.<p>where is production? I can&#x27;t find it
评论 #20197362 未加载
codedokode将近 6 年前
Poor quality articles. They use flexbox and provide no fallback for older browsers. They could use at least non-responsive layout for desktop resolution for older browsers. Probably the reason why they didn&#x27;t do it is lack of knowledge of CSS.
评论 #20196409 未加载
评论 #20196696 未加载
评论 #20196494 未加载
评论 #20198807 未加载
评论 #20196843 未加载
codedokode将近 6 年前
The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this.<p>Rem units can cause issues in long term. For example, imagine if a sidebar widget is coded using rems. When later the main font size is changed, margins within widget will change its size, although the font size in it is fixed and didn&#x27;t change. There are cases when rem is useful and there are cases when it is not, but the author doesn&#x27;t give a choice and doesn&#x27;t explain it. He just uses his authority to push his personal preferences to frontend developers who tend to copy the code from tutorials without much thinking.<p>I recommend using pixels for projects that are going to be maintained and developed in the long term.
评论 #20196879 未加载
评论 #20196771 未加载
评论 #20196784 未加载
评论 #20196815 未加载
评论 #20197269 未加载
评论 #20196820 未加载