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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Ask HN: Front-end “design patterns”?

144 点作者 blawa大约 10 年前
Hello HN, Are there any treatments of the topic of web front-end software design? I&#x27;m looking for something similar to &quot;Design Patterns&quot; (http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Design_Patterns) but for web front-end HTML&#x2F;CSS.<p>I&#x27;ve read Duckett&#x27;s book (Amazon bestseller) and its just syntax. Also, I&#x27;ve read the Atomic CSS design and BEM methodologies, and while those come close to what I want, I&#x27;m looking for a more detailed treatment. To give an obvious example of what I&#x27;m looking for- I would say, use margins to separate multiple instances of same components (among other uses). I wonder if there are books that deal with similar, but non-obvious topics.

21 条评论

meesterdude大约 10 年前
Its not as rigid as software design patterns, and I think that&#x27;s by design.<p>I&#x27;ll try to share some tips - hopefully this is the kinda thing you&#x27;re after - i recognize some of it might not be on topic.<p>* use html partials to reduce complexity<p>* think about cachability and rendering needs - sometimes a simple display feature can have huge ramifications on code required and complexity<p>* semantic markup is optional, but definetly helps break up a sea of divs, and is good for people who use screen readers<p>* decouple your HTML from your CSS - if something is to be blue or big, it should be from the CSS, not because it has a &quot;big&quot; or &#x27;blue&quot; class. (see: csszengarden.com)<p>* scss &amp; co are really useful, but be careful to not go overboard.<p>* don&#x27;t assume what fonts your users have - linux, mac, win all differ. if unsure, check all 3 platforms rendering<p>* load JS at the bottom of the page to prevent render blocking (vs. in the head)<p>* always test browser size reflow &amp; zoom rendering<p>* always test css,html, js validations<p>* test design in grayscale&#x2F;color blindness simulations<p>* be aware of browser compatibility and vendor prefixing needs - its not cookie cutter.<p>* flexbox is new on the block, but it&#x27;s dreamy to work with and is great for layout (shoutout to flexboxin5.com for helping me)<p>* code comments, such as those that highlight return values, or why something is X, are hugely helpful<p>* check for unused CSS - there are a number of scripts&#x2F;browser extensions&#x2F;sites that can tell you what CSS is never used, and help you remove it.<p>* same for JS - make sure you still need &#x2F; use it all<p>* html&#x2F;css is rarely (for me) polished at first pass. Iteration is instrumental at arriving to clean, maintainable code.
评论 #9164907 未加载
评论 #9164497 未加载
TheAceOfHearts大约 10 年前
Along the same line... Any good resources on building maintainable applications with user interfaces? It doesn&#x27;t have to be web applications, it can be a book focused on building desktop or mobile applications. I&#x27;m more interested in the patterns the follow, as well as what and how they focus on testing.<p>I&#x27;ve found TDD pretty much impossible when you&#x27;re building a user interface. Even when I test my components (recently using react, prior to that using angular), it&#x27;s hard to know <i>what</i> I should be testing for. Testing the component&#x27;s logic is a given, and usually very straightforward. But how in depth should my DOM structure validation be? Should I check that certain classes and IDs are set correctly and leave it at that? Should I verify the DOM structure of the component? I&#x27;ve found this extremely difficult because you&#x27;ll often find yourself adding or removing classes to restyle components, or you&#x27;ll find yourself rewriting the HTML to fit better with a redesign of some sort.<p>Along this same line, what about e2e tests? I test core user interactions (e.g. user can create foo) with e2e tests, and edge-cases with unit tests. These tests will be clicking around and sending keys to inputs and eventually reach some state that confirms that the action was successful. Among all the states that were traversed, how many things will you validate (e.g. check that the link the user clicks is in a list, check that in the final state he can view all of foo&#x27;s information)? And how in depth? (e.g. checking that #foo contains all of foo&#x27;s information, or checking that #foo contains .bar, .baz, .qux, and that each contains part of foo&#x27;s information)<p>I&#x27;ve figured out some patterns and guidelines over time, but some of these tests tend to feel brittle or useless.
评论 #9164084 未加载
评论 #9163267 未加载
评论 #9163220 未加载
评论 #9163730 未加载
评论 #9167931 未加载
applecore大约 10 年前
The most important idea is testing the user experience according to the following five &quot;laws&quot; of human-computer interaction:<p>1. Fitt&#x27;s Law (of movement to a target area): <a href="https://en.wikipedia.org/wiki/Fitts%27s_law" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Fitts%27s_law</a><p>2. Steering Law (of movement through a tunnel): <a href="https://en.wikipedia.org/wiki/Steering_law" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Steering_law</a><p>3. Hick&#x27;s Law (of choices and decision time): <a href="https://en.wikipedia.org/wiki/Hick%27s_law" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Hick%27s_law</a><p>4. Miller&#x27;s Law (of working memory): <a href="https://en.wikipedia.org/wiki/Miller%27s_law" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Miller%27s_law</a><p>5. Power Law (of practice and reaction time): <a href="https://en.wikipedia.org/wiki/Power_law_of_practice" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Power_law_of_practice</a>
评论 #9164241 未加载
评论 #9163387 未加载
评论 #9166412 未加载
philipwalton大约 10 年前
This topic interests me as well, and I&#x27;ve written about many of these ideas in the past. They&#x27;re not necessarily analogous to the GoF design patterns, but I think they&#x27;re similar in spirit. I hope you find them helpful.<p>CSS Architecture <a href="http://philipwalton.com/articles/css-architecture/" rel="nofollow">http:&#x2F;&#x2F;philipwalton.com&#x2F;articles&#x2F;css-architecture&#x2F;</a><p>Side Effects in CSS <a href="http://philipwalton.com/articles/side-effects-in-css/" rel="nofollow">http:&#x2F;&#x2F;philipwalton.com&#x2F;articles&#x2F;side-effects-in-css&#x2F;</a><p>Decoupling Your HTML, CSS, and JavaScript <a href="http://philipwalton.com/articles/decoupling-html-css-and-javascript/" rel="nofollow">http:&#x2F;&#x2F;philipwalton.com&#x2F;articles&#x2F;decoupling-html-css-and-jav...</a>
评论 #9164297 未加载
评论 #9170185 未加载
评论 #9164501 未加载
state大约 10 年前
I strongly believe that in order to do good interaction work you really just need to understand typography well. That might not be a popular viewpoint around here, but I encourage you to consider some of these references.<p>I recommend Josef Muller-Brockmann&#x27;s Grid Systems in Graphic Design: <a href="http://www.amazon.com/Grid-Systems-Graphic-Design-Communication/dp/3721201450" rel="nofollow">http:&#x2F;&#x2F;www.amazon.com&#x2F;Grid-Systems-Graphic-Design-Communicat...</a> or Emil Ruder&#x27;s Typographie: <a href="http://www.amazon.com/Typographie-Manual-Design-Emil-Ruder/dp/3721200438" rel="nofollow">http:&#x2F;&#x2F;www.amazon.com&#x2F;Typographie-Manual-Design-Emil-Ruder&#x2F;d...</a>.<p>There are many, many other good resources but those are important primary sources. So is The Elements of Typographic Style, by Robert Bringhurst: <a href="http://www.amazon.com/gp/product/0881792128/ref=pd_lpo_sbs_dp_ss_3?pf_rd_p=1944687762&amp;pf_rd_s=lpo-top-stripe-1&amp;pf_rd_t=201&amp;pf_rd_i=3721200438&amp;pf_rd_m=ATVPDKIKX0DER&amp;pf_rd_r=038MRVMFF37KXY94ER2F" rel="nofollow">http:&#x2F;&#x2F;www.amazon.com&#x2F;gp&#x2F;product&#x2F;0881792128&#x2F;ref=pd_lpo_sbs_d...</a>.
评论 #9162998 未加载
评论 #9164507 未加载
naugtur大约 10 年前
It looks like I&#x27;m first here. Check out Addy Osmani&#x27;s book first <a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="nofollow">http:&#x2F;&#x2F;www.addyosmani.com&#x2F;resources&#x2F;essentialjsdesignpattern...</a>
BerislavLopac大约 10 年前
You can always rely on Martin Fowler: <a href="http://martinfowler.com/eaaDev/uiArchs.html" rel="nofollow">http:&#x2F;&#x2F;martinfowler.com&#x2F;eaaDev&#x2F;uiArchs.html</a>
e12e大约 10 年前
Not quite what you&#x27;re after, but I went a short talk[1] on constraint&#x27;s based GUI programming, with some examples from Adobe -- as best I can tell the examples were related to Adobe&#x27;s &quot;Adam and Eve&quot;: <a href="http://stlab.adobe.com/group__asl__overview.html" rel="nofollow">http:&#x2F;&#x2F;stlab.adobe.com&#x2F;group__asl__overview.html</a><p>The talk focused on things like a (sane) way to model widget interactions in complex UIs, in a way that reduced the complexity by ignoring invalid combinations (stuff like height in pixels being updated, when height in percent is adjusted, without having a rats nests of event listeners across all widgets).<p>Other than that, I&#x27;m afraid I can&#x27;t really think of anything other than the original MVC-stuff by Reenskaug, and his new DCI-stuff (search [1] for Reenskaug). Things have certainly evolved&#x2F;changed, but generally it seems to be about splitting out layout, and handling events in a sane way.<p>[1] Jaakko Järvi, Texas A&amp;M;: &quot;Avoiding faulty user interfaces&quot; <a href="http://bldl.ii.uib.no/2014/seminars-2014.html" rel="nofollow">http:&#x2F;&#x2F;bldl.ii.uib.no&#x2F;2014&#x2F;seminars-2014.html</a><p>Also (linked): <a href="http://bldl.ii.uib.no/2014/14v-bldl_hiday-JaakkoJarvi-avoiding_faulty_user_interfaces.pdf" rel="nofollow">http:&#x2F;&#x2F;bldl.ii.uib.no&#x2F;2014&#x2F;14v-bldl_hiday-JaakkoJarvi-avoidi...</a>
akvlad大约 10 年前
For CSS architecture I thought SMACSS [<a href="https://smacss.com/" rel="nofollow">https:&#x2F;&#x2F;smacss.com&#x2F;</a>] by Jonathan Snook has really good design patterns that have been proven to be good throughout his many projects.
评论 #9164111 未加载
vonnik大约 10 年前
O&#x27;Reilly has a book called &quot;Designing Interfaces: Patterns for Effective Interaction Design&quot; by Jennifer Tidwell. It&#x27;s a little out of date, but has a lot of the big ideas and useful bibliographies to dig in deeper.
评论 #9163083 未加载
评论 #9162905 未加载
lightblade大约 10 年前
There are definitely design patterns for frontend. There are just no books being published on this topic yet.<p>Most knowledge in this area is scattered is varies blog post, tech talks, and maybe some framework guides. There are a few published as GitHub gists and readme. Occasionally, you&#x27;ll find some comments in framework source code that reference some reading material<p>But yes, it would be nice for someone to put together a book.<p>Some example of frontend pattern: - promise - data binding - FRP event stream<p>None of these are exclusively frontend, but you&#x27;ll see them more often in UI development.
评论 #9163503 未加载
3oheme大约 10 年前
I feel that most of the answers in this thread are wrong.<p>Design patterns, as the wikipedia says, is &quot;a formal way of documenting a solution to a design problem in a particular field of expertise&quot;.<p>So, it&#x27;s a solution for a specific problem.<p>The main issue with HTML&#x2F;CSS is that people tend to think that there&#x27;s a best approach than can work with every website. But different websites require different HTML&#x2F;CSS architectures, because they offer different design problems! It&#x27;s not the same to create a corporate website than an application website (just to name two different problems).<p>I&#x27;ll use the layout as an example:<p>There are different ways to define the layout of a website (call it grid if you want). If I want to create a secondary column, there&#x27;s the &quot;explicit&quot; way, where I specify that my div will take 1&#x2F;3rds of the main layout with a &quot;.col-md-4&quot; class (like <a href="http://getbootstrap.com/css/#grid" rel="nofollow">http:&#x2F;&#x2F;getbootstrap.com&#x2F;css&#x2F;#grid</a> does). And there&#x27;s the &quot;semantic&quot; way, where I create a div with the &quot;sidebar&quot; class, and my CSS will make the div to take 1&#x2F;3rds (like <a href="http://neat.bourbon.io/" rel="nofollow">http:&#x2F;&#x2F;neat.bourbon.io&#x2F;</a> does)<p>None of this two approaches is the best. Each one is a design pattern. And each one will be a better solution for a different problem.
评论 #9165389 未加载
larrymcp大约 10 年前
Oh yes, there are definitely books that deal with this: I highly recommend &quot;Don&#x27;t Make Me Think&quot; by Steve Krug. Quite an engaging, useful read, and it is well-reviewed on Amazon.<p><a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758" rel="nofollow">http:&#x2F;&#x2F;www.amazon.com&#x2F;Dont-Make-Me-Think-Usability&#x2F;dp&#x2F;032134...</a>
评论 #9164504 未加载
catshirt大约 10 年前
a lot of the comments here seem misguided. he is asking about software design patterns, not graphic design patterns. the wikipedia article and BEM reference should have cleared that up.
评论 #9164042 未加载
评论 #9178101 未加载
评论 #9164510 未加载
obeid大约 10 年前
I watched this old talk from the YUI Library recently. It&#x27;s framework-agnostic and not heavy on code, just a lot of common sense that might not be obvious for some.<p>Nicholas Zakas: Scalable JavaScript Application Architecture <a href="https://www.youtube.com/watch?v=vXjVFPosQHw" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=vXjVFPosQHw</a>
jongalloway2大约 10 年前
Here&#x27;s a nice pattern catalog <a href="http://ui-patterns.com/" rel="nofollow">http:&#x2F;&#x2F;ui-patterns.com&#x2F;</a>
toomim大约 10 年前
There&#x27;s &quot;The Design of Sites&quot;, but it&#x27;s not really about CSS. <a href="http://www.amazon.com/The-Design-Sites-Principles-Customer-Centered/dp/020172149X" rel="nofollow">http:&#x2F;&#x2F;www.amazon.com&#x2F;The-Design-Sites-Principles-Customer-C...</a>
chocopoche大约 10 年前
I think it&#x27;s worth mentioning Material design from Google: <a href="http://www.google.com/design/spec/material-design/introduction.html" rel="nofollow">http:&#x2F;&#x2F;www.google.com&#x2F;design&#x2F;spec&#x2F;material-design&#x2F;introducti...</a>
grandalf大约 10 年前
I think the choice of pattern depends a lot on what you are building and how much and how often you will need to change it.
jkinz86大约 10 年前
I think what you&#x27;re looking for is Harry Roberts&#x27; ITCSS?<p>www.youtube.com&#x2F;watch?v=1OKZOV-iLj4
blawa大约 10 年前
(I&#x27;m new to HN so not sure how to edit) Thanks for some excellent answers.<p>So as to keep the discussion to the question&#x27;s point for posterity, I think I wasn&#x27;t very clear. As some people have poined out- I&#x27;m not looking for graphic design patterns, or design from the user experience perspective. I&#x27;m looking for how to design my components. and what should classify as a component, or what should be an individual template. What should go as a parent and as a child in the component. Thanks again!