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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Cargo Cult CSS

59 点作者 kapowaz超过 11 年前

10 条评论

NickLarsen超过 11 年前
Let me start by saying I am the most vocal person about semantic HTML at my company, but it really depends on your purpose, and I&#x27;m not sure you are realizing you are taking a hard line. Also, I would have preferred you used the 90% of your words to give better examples of how to do things better than overstating how OOCSS and BEM are wrong. Well developed solutions are always better than just explaining what&#x27;s wrong unless there is no solution and the existing proposals are wholly unsatisfactory.<p>Take a step back and realize that there is at least one more way of doing this. Why not have the presentation be the specification, and we can just build the html to conform to the that specification instead (via the use of helpers and all other commonly accepted forms of duplication reduction). Your post basically declares this Doing It Wrong™, but I imagine that&#x27;s just because you&#x27;d rather see better looking html than you would see better looking css.<p>You have the semantic issues well thought out, however you are flat out declaring data semantics are more important than presentation semantics. For most projects, the HTML is only used in a browser, and isn&#x27;t the source of truth for the application, i.e. it is inherently coupled with the presentation. They might as well be one and the same because this is it&#x27;s only purpose in the world. Leading from that, the only issue is maintainability, and here is where your ideas aren&#x27;t fully developed.<p>As will all separation of concerns, your solution (the one about breaking news) also adds a layer of misdirection. Sure I don&#x27;t have to change the html to change the presentation, but now I have figure out where that part of the presentation is modified. My CTO and designer (2 people I have a lot of respect for) were the people who eventually changed my mind on this. They said, &quot;I don&#x27;t know why this button is blue, but it&#x27;s supposed to be green&quot;. Well it turns out it&#x27;s blue because it has the class blue on it. Instead of trying to figure out what selector was causing this button to be blue, all I had to do was remove the blue class and add the green class. It took 15 seconds. It took probably 3 or 4 weeks for me to relent on this before I accepted, but it is much easier for everyone (think of the new hires as you pointed out!) if they don&#x27;t have to know tons of info about the domain, but just look for the offending element and make a simple change in place rather than have to unravel the css toolkit to find where my button was made blue instead of green. Additionally, they know this change is only affecting this one element they were told to change. On our team, that is better maintainability because that is how real changes are specified. In your case, by the time this spec makes it&#x27;s way to the developer, it needs to have traveled through people who know that part of the web page is a breaking news container and translated from whatever the original complaint was or the developer will likely have another problem to figure out before he can even begin changing what will likely end up being a single css rule.<p>Loose coupling is simply about defining avenues of change, and it only improves maintainability when it enables making changes easier. This has been extrapolated to mean &quot;does this have to change or not&quot;, which is over thinking it a bit. In my example, I made a typical update by changing exactly one thing in exactly one place, without having to traverse any levels of misdirection. Just figuring out how to make one thing not have to change doesn&#x27;t make it more maintainable.<p>When we&#x27;re talking about web pages, it&#x27;s also important to realize that we&#x27;re typically not changing just the presentation of static data; we&#x27;re adding and removing features to figure out what makes this page more useful. The HTML is typically going to change anyway when we&#x27;re modifying the page, which again leans in favor of a common set of CSS selectors to build against (in terms of avenues of change).<p>As I said, I&#x27;m probably the most outspoken person at my office when it comes to semantic HTML, but it&#x27;s only when I&#x27;m describing actual data, i.e. the parts you read. These parts tend to change very little and can be generated and stored in their already rendered state. The parts that do change more often gain a lot from the benefits of OOCSS and BEM techniques.
评论 #6585781 未加载
评论 #6585832 未加载
russelluresti超过 11 年前
This is an argument I had with myself a few years ago, when OOCSS started becoming popular. Ultimately, what I determined is that there&#x27;s a new definition of what &quot;semantic&quot; means in front-end architecture. Semantic doesn&#x27;t just describe the content anymore, it describes the function as well. So using classes like &quot;module-box&quot; or whatever is perfectly fine. There&#x27;s a bunch of articles out there on the new semantics, you can look them up as I can&#x27;t be bothered to link to them.<p>Ultimately, though, the &quot;separation of concerns&quot; was a good principle to use when the web was a bunch of documents meant to provide content. It isn&#x27;t that way anymore. The web has evolved in use to include web apps and other forms of media, so our principles must evolve as well. It seems silly to cling to past definitions as immutable when we work in a field that changes drastically nearly every year.<p>Also, anyone who advocates using a selector like &quot;ul.members li a&quot; and then complains about the maintainability issues of using non-semantic classes when an update needs to be made should really reconsider their hypocrisy. Using selectors like that (aside from being slow performing) completely tie the markup to the presentation. Hell, if all you did was update the list to an ordered list instead of an unordered one you&#x27;d have to update the CSS as well.<p>The reality is that any change in the UI big enough to warrant updating the markup is going to warrant updating the CSS, and vice versa. Worrying about making them completely separate is impractical and will just cause you to waste time in development.<p>If you&#x27;re concerned about the discoverability of the code to a new developer, DOCUMENT IT. Do not create crappy selectors. Create a UI style guide that implements all of the major UI components and have the developer reference the style guide. Use something like KSS to link between the style guide and the CSS. There&#x27;s no excuse for using bad selectors in the name of ease of on-boarding.
评论 #6586103 未加载
评论 #6586240 未加载
ahoge超过 11 年前
&gt; <i>Some CSS framework methodologists suggest that using IDs is a bad idea. The reasoning behind this is that IDs carry such a higher specificity [...]</i><p>No, the primary reason is that IDs prevent reuse.<p>If you want to build a library of reusable components, IDs are obviously not what you want.<p>As the person who writes these components, you do not care how often one of these components is used. From your point of view, it only matters if it&#x27;s used at least once. If it isn&#x27;t, you can throw it away.<p>Secondly, if you use IDs which were added for JavaScript or fragment links, you&#x27;ll introduce some coupling which really shouldn&#x27;t be there.<p>Same thing with JavaScript. If you need a class, you should add a prefixed one (e.g. &quot;js-foo&quot;). Obviously, classes like that should never appear in your stylesheet.<p>Nothing of this has anything to do with cargo cults. There is an actual reason behind every rule.
评论 #6585369 未加载
评论 #6585086 未加载
评论 #6585040 未加载
antris超过 11 年前
&gt; if you’re writing CSS professionally then there’s really no good excuse for not using a CSS preprocessor.<p>CSS preprocessors aren&#x27;t without their own problems as well. An app that I&#x27;m currently working on has a history of semantic HTML, but having no room for compromise had resulted in a CSS file that is 4000 lines long.<p>There were lots of cases where an innocent looking @extend created monster selectors (<a href="https://twitter.com/mezzoblue/status/390274599167877120/photo/1" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;mezzoblue&#x2F;status&#x2F;390274599167877120&#x2F;phot...</a>). This is non-obvious behaviour that should be avoided.
评论 #6584977 未加载
antris超过 11 年前
&gt; The web is fundamentally a semantic medium.<p>I think this premise is outdated. The web is more and more hosting <i>apps</i> rather than <i>documents</i>.
评论 #6585200 未加载
评论 #6584868 未加载
hovertrain超过 11 年前
Consider the authors examples: The first example should really use extend or it will output the content of the news-item for each selector separately, and the news-item mixin contains many properties with static values that will be repeated. This example also couple the styles to the content, it should now only be used for news, this is not about premature optimization, but consistently working against code reuse, why cannot the authors beautiful blue box be used on something else then news. The alternative, the box-standard can be use multiple times and it is easy to understand and modify from the developer perspective and to anticipate the result (“what is breaking?”). Lastly why do author use the element (div) selector, the element selector is not necessary and it prevents author from writing it on section or article if that would semantically correct.<p>For the second example, yes, the example is extreme, and I do not see many people writing that many selectors, but the author is right that OOCSS will create multiple classes. Writing this box, I would probably have something like this: box box--special box--extra-padding. After the example the author argues that this is approach transfers the close coupling to the markup. Let us say we have a 100 pages and one style sheet, should the CSS really serve all those 100 pages or should each individual pages deal with one style sheet. With a 100 pages, it will be impossible to keep track of all the pages when you are writing your CSS.<p>From my perspective, the last example is legit, but element selectors with descendent selectors might cause performance issues, because every time the browser hits a link (a) it have to evaluate the hierarchy in the selector. Btw, the ul element selector is unnecessary.
venticco超过 11 年前
I had mixed feeling until I saw “USE IDS, FOR THE LOVE OF GOD”, then I stopped worrying and stopped reading.
pupppet超过 11 年前
&gt; if you’re writing CSS professionally then there’s really no good excuse for not using a CSS preprocessor.<p>I want to compile my CSS about as much as I want to compile my grocery list. Preprocessors add a layer of complexity on to something that is already impossibly simple.
评论 #6585334 未加载
评论 #6585681 未加载
daelen超过 11 年前
Good read. It has me asking quite a few questions of what I consider to be best practice.
zir1超过 11 年前
Please stop it with the massive fonts on web pages
评论 #6584812 未加载