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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Show HN: Basic.css – Classless CSS Starter File

153 点作者 vladocar将近 5 年前

18 条评论

chrismorgan将近 5 年前
One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics.<p>In this instance, the &lt;article&gt; elements should not be articles: they’re not complete, standalone items. To be sure, as <a href="https:&#x2F;&#x2F;html.spec.whatwg.org&#x2F;multipage&#x2F;sections.html#article-or-section" rel="nofollow">https:&#x2F;&#x2F;html.spec.whatwg.org&#x2F;multipage&#x2F;sections.html#article...</a> says, there’s subjectivity in deciding whether to use &lt;section&gt; or &lt;article&gt;, but I’m content to say that &lt;article&gt; is wrong here.<p>(Last time I looked into one of these classless CSS starter files, it was &lt;aside&gt; being used for cards, which was <i>very</i> wrong.)<p>In a case like this, I’d prefer the inner elements to be &lt;section&gt; or &lt;div&gt;. Or better still, just start using custom element names which are perfectly valid, e.g. &lt;grid-card&gt;. There, no class. I will permit you to claim that that’s cheating and avoiding the point of classlessness; I don’t mind.<p>But the big pitfall of trying to go fully classless (if you interpret that as also meaning you can’t use your own custom element names) is when HTML just <i>doesn’t have</i> tags for the semantic concepts you’re trying to express. You want a quote, table numbered list? Yeah, we’ve got tags for those things, go knock yourself out. But you want a card? <i>Here, have an article within a section.</i> … what? That ain’t semantic. How’s an author supposed to guess that those tags will present like <i>that</i>? That’s what classes or autonomous custom elements are good for, indicating <i>intent</i>.
评论 #23403298 未加载
评论 #23402956 未加载
评论 #23403037 未加载
评论 #23402924 未加载
评论 #23405085 未加载
评论 #23407727 未加载
评论 #23405146 未加载
评论 #23405021 未加载
rsoto将近 5 年前
This feels weird. Classes exist for a reason. When I read the title, I thought about a kind of CSS reset, but what I&#x27;m seeing is also a template&#x2F;grid framework?<p>The weird part is that by wrapping an article within a section now I&#x27;m designing with columns (which btw, it seems there&#x27;s no way to control them). And section &gt; article turns out to be the suggested semantics for a blog.<p>It&#x27;s a nice effort, but what I&#x27;d look for in a starter file might not be a uncontrollable grid.
评论 #23403122 未加载
评论 #23402987 未加载
tmvnty将近 5 年前
Existing collections of &quot;classless&quot; CSS libraries:<p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;dohliam&#x2F;dropin-minimal-css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dohliam&#x2F;dropin-minimal-css</a><p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;dbohdan&#x2F;classless-css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dbohdan&#x2F;classless-css</a><p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;ubershmekel&#x2F;cssbed" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ubershmekel&#x2F;cssbed</a>
chrismorgan将近 5 年前
In the examples, form labels are used badly in a few places. The textarea label lacks its <i>for</i> attribute, and the radio buttons are done quite wrong: for best results, the entire group should be wrapped in a &lt;fieldset&gt;, with the prompt text (“Number:”) being a &lt;legend&gt;, and then each radio button’s text should be a &lt;label&gt;.
marvinblum将近 5 年前
I do like these frameworks. Far more sites should use one of those or the principle behind them. My page [1] uses concrete [2] and has a page load of 125kb (including my picture) and loads in less than one second. I don&#x27;t need all that bloat that comes with a lot of pages (checkout wired.com for a negative example).<p>The cards of this one look neat, but in case I need something like that I would add it myself to concrete. Nice place to start never the less.<p>[1] <a href="https:&#x2F;&#x2F;marvinblum.de&#x2F;" rel="nofollow">https:&#x2F;&#x2F;marvinblum.de&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;concrete.style&#x2F;" rel="nofollow">https:&#x2F;&#x2F;concrete.style&#x2F;</a>
评论 #23404371 未加载
评论 #23438197 未加载
duopixel将近 5 年前
Thank you! Brevity in code is underappreciated. People think it is about file size (and it partially is) but it is mostly about understanding what the code does so that you can extend it in the way that you want. This looks like a true foundation, unlike the namesake framework which is building on top of an existing buildings.
评论 #23402948 未加载
chiefofgxbxl将近 5 年前
Quick recommendation: add a focused style on form inputs so it&#x27;s easy to see which input is active. A bright border color would help.
评论 #23404384 未加载
评论 #23406327 未加载
thiscatis将近 5 年前
I&#x27;m really liking this classless movement. Looks like a nice basic template by itself for docs or a blog post in HTML too.
kitd将近 5 年前
OT, but I was entertained by Google asking me if I wanted to translate from Latin to English.
hidiegomariani将近 5 年前
another one i&#x27;m using for my site [1] is tacit[2] it&#x27;s pretty basic but it works well - although i&#x27;ve been trying to find a well structured, well designed css framework with no classes - I haven&#x27;t found one of my liking, I think the best way would be to use something very minimal like tailwindcss [3] which i still have to try<p>[1] <a href="https:&#x2F;&#x2F;golang.cafe" rel="nofollow">https:&#x2F;&#x2F;golang.cafe</a> [2] <a href="https:&#x2F;&#x2F;github.com&#x2F;yegor256&#x2F;tacit" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;yegor256&#x2F;tacit</a> [3] <a href="https:&#x2F;&#x2F;tailwindcss.com" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com</a>
评论 #23404569 未加载
simonw将近 5 年前
The way this offers a grid without using any CSS classes based on nesting section elements is really neat - very clever trick.
jsiarto将近 5 年前
I thought CSS variables were still not fully supported enough to use in production. I know you can use a polyfill, but that seems to detract from the minimalist approach of these basic CSS frameworks: <a href="https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-variables" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-variables</a>
评论 #23402971 未加载
nwsm将近 5 年前
There is some leftover lorem ipsum on the demo [0]. Under &quot;Basic Forms&quot;- &quot;Vivamus non leo magna, quis imperdiet risus.&quot;<p>[0] <a href="https:&#x2F;&#x2F;vladocar.github.io&#x2F;Basic.css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vladocar.github.io&#x2F;Basic.css&#x2F;</a>
wishinghand将近 5 年前
These are cool, but I&#x27;d appreciate it if they covered every HTML element- &lt;details&gt;, &lt;cite&gt;, &lt;kbd&gt;, etc. I guess this one calls itself Basic so maybe it&#x27;s just going for the 80&#x2F;20 effect of the most common HTML elements.
g105b将近 5 年前
This is a nice take on an old problem. If your project makes HTML creation more straightforward without introducing a tonne of baggage, I&#x27;m all for it.
Ayesh将近 5 年前
Nice work. I personally find the way grid is implemented a bit weird, but I like the opinionated rounded corners, typography, spacing, etc.
ashconnor将近 5 年前
There&#x27;s also <a href="https:&#x2F;&#x2F;github.com&#x2F;mblode&#x2F;marx" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mblode&#x2F;marx</a>
nicc将近 5 年前
WOW! This is awesome.<p>Congratulations on releasing this!