Show HN: A simple, plain, minimal, classless CSS for simple, plain HTML pages
github.com
github.com
• Don’t kill link underlines. They’re a very important affordance. If you’re not fond of the æsthetics of a strong underline, one technique I consider reasonable (and use on my own website) is to reduce the opacity of the underline with something like `text-decoration-color: #03c5` (unfortunately you’ll have to write it out each time you change the colour of a link; I really want color-mix(currentColor transparent 33%) from the CSS Color Module Level 5 draft).
• When styling :hover and :active, consider :focus as well. For example, where you’ve hidden link underlines, you’ve shown them on :hover and :active, but you should probably show them on :focus as well. (If you want to get fancy and recent, you could consider using :focus-visible instead of :focus; if you do, just make sure it’s in a separate rule set from the others so it doesn’t break older browsers.)
• On something like this, killing the purple colouring of visited links makes me sad. Please consider restoring it, it’s useful on content websites.
• The markup you use for heading anchors (<h2 id="foo"><a href="#foo">Foo</a></h2>) isn’t great, and precludes putting actual links in headings (which is normally not a good idea, but there are definitely cases where I’ve reckoned it worthwhile and done it). If you want heading anchor links, go for something like <h2 id="foo">Foo <a href="#foo" aria-hidden="true" tabindex="-1" title="Link to this heading">§</a></h2> (some of the most common characters used for this: # NUMBER SIGN, § SECTION SIGN, ¶ PILCROW SIGN, U+1F517 LINK SYMBOL), and show the anchor on hover only (but make sure it’s part of layout either the whole time (e.g. `visibility: hidden` when not hovered) or none of the time (e.g. `position: absolute`) in order to avoid layout flap). This will make life better for users of screen readers especially (so they’re not getting a spurious link). If anyone else has opinions on heading anchors, I’d be interested to hear them; don’t think I’ve ever seen a detailed analysis of all the techniques and their implications.
• One of your headings has a typo: <h2 id="Blockquote"><a href="#blockquote">Blockquote</a></h2>, id needs to be lower case (IDs are case sensitive).
• Good job on appropriate use of pre, code, samp and kbd.
This is true of all elements with an id attribute, not just headers. They're unique in the document so they can be unique selectors in the DOM.
This is already the way that page is set up; grandparent was merely explaining a better way of doing it.
As for why you would want to do this – it’s very common for headers to include links to themselves so that readers can easily obtain a link to share with others. But as grandparent points out, it’s more common to do this with a symbol next to the heading rather than turn the entire heading into a link. This technique has been in use since about 2004:
https://www.tbray.org/ongoing/When/200x/2004/05/29/PurpleNum...
Please make linking to content headings easy on your site!
Having said that, your feedback is well-taken and I will indeed consider them during my next update to the CSS. In particular, I went ahead and added the style for :focus right away.
Thank you for noticing the incorrect case in <h2 id="Blockquote">. It was a typo caused by careless yank-and-copy. I have fixed it now.
After some time dog-fooding, I decided to do some improvement tweaks. One of them was a slightly different color for visited links. That feels good
Or you can just use CSS variables:
<style>
:root {
--link-color: 0, 0, 0;
}
a {
color: rgb(var(--link-color));
text-decoration-color: rgba(var(--link-color), .2);
}
</style>
<a href="#">Hello world</a>...something like `a > h1`. Anchors wrapping block headings feels...wrong, but it's valid HTML5.
Most browsers will set the inner `h1` as display: block so the click/tap target for the `a` becomes larger. (`h1 > a` with `display: block` would have the same result though).
Also make sure that content isn't being duplicated for the user, `a` and `h1` are waypoints for users. `aria-` attributes can help you here.
https://github.com/dbohdan/classless-css
These lists all seem to leave out Element though, which is OG enough (and made by the Neocities guy).
I am not a webdev either. This is a trivial CSS indeed. I don't think you are missing anything. When I posted this on Hacker News, I was hoping some people would like it because they might find it useful. Like I said, I am not really a front-end developer. But I do hack up simple HTML pages together for simple text-based websites from time to time. While doing so, I find myself using this minimal (and trivial) CSS frequently to make the page appear slightly more pleasing compared to what it looks like with the browser defaults, so I moved all that CSS out to a separate repository and shared it here. It is useful to me. If it is useful to someone else, that's a bonus!
I beg to disagree. Having browsed quite a few sites with css disabled over the years, I can assess that default stylesheets tend to grow in you and that you may end up liking them.
In a saner world, all sites would use default stylesheets (with empty css), and individual users would set up whatever css they deem beautiful each day.
The motivation comes from other CSS frameworks which have thousands of lines and due to the inheriting structure of CSS can be a challenge to integrate or update in existing projects.
Was anything but personal preference the reason for changing the link color, the body font to specific typefaces, the font-size to a little smaller than normal, etc?
Links are much worse, no focus, no text-decoration, confusing colors. You have to nail this stuff.
I believe when you say "font-size to a little smaller than normal", you are talking about "font-size: 0.9em" for pre, code, etc. I have removed it now, so that they now have a font-size of 1em. Thank you for highlighting this issue.
It boggles my mind how people keep forgetting to show what their visitors have come to their page to see. No one gives a fuck about a list of features until you explain what the damn thing is and show it.
I feel like having this sense of conciousness already gives you an edge over millions of landing pages that confuse the visitor. There isn't a better time to start a venture!
However, this comment by @nailer is not the first one that asks about a demo. Others have asked for the demo link too despite the very first badge on the README being a "view demo" badge. That made me think that perhaps the "view demo" badge is not an optimal way to draw the reader's attention to an important link.
I guess, the readers ignore these badge-based links either because they associate badges with status displays (build status, coverage status, etc.), not links or because these badges are overused in many projects which could cause our minds to ignore them as noise.
In any case, I have added a text note to the README now, that says, "Note: A demo page is available [here][Demo URL]", to ensure that it becomes harder to miss the link to the demo page.
This, at least for me.
I think that’s very likely; it will be a form of banner blindness:
https://www.nngroup.com/articles/banner-blindness-old-and-ne...
Yes badges are for status.
Tests: passed
downloads: 500k
The link is better but you could also fix the link to be on 'demo page' not 'here'.
I think if you want to really add value, create a version that also works for responsive web sites. That is an area that is not covered that well. There are some default usage patterns that work well for responsive web so I think it can be done.
In any case, making it easy for others to use with the cdn links is a good step and your documentation is very clean - good work on that. But again, this is exceptionally basic stuff. Not sure why it’s on the front page of HN.
This is not a reset stylesheet. Here is what a reset stylesheet like normalize.css does: https://i.imgur.com/DEVtCXp.png . Here is what sp.css does: https://i.imgur.com/5DB8cq7.png (light mode), https://i.imgur.com/uSaKCfv.png (dark mode). This is just my personal boilerplate CSS that I find myself writing on multiple text-based websites I create for fun.
> I think if you want to really add value, create a version that also works for responsive web sites.
Did you find any specific problems with this CSS with respect to responsiveness? I believe the minimal stylesheet changes that this CSS introduces should work well for any web page design, regardless of whether it is responsive or not.
On a general note, advising me on how I should spend my leisure time, while may be well-intentioned, is still a little unsolicited, don't you think? :-)
> In any case, making it easy for others to use with the cdn links is a good step and your documentation is very clean - good work on that. But again, this is exceptionally basic stuff. Not sure why it’s on the front page of HN.
Thank you. This is very basic stuff indeed. I am by no means a frontend developer or a fullstack developer and I know there are plenty of other classless stylesheets that work better, in general. This is just a small stylesheet that works well for me. If it works well for others like me who develop text-based websites, that's a bonus.
Reset / normalize may not be the best terms to use, but effectively that is what you are doing. I’m not going to go into more depth on this.
Sorry if I’m being harsh, but I rather be honest than give some cursory congratulations. As I said earlier, your documentation is very well done but there isn’t much this style sheet does otherwise.
Like others and I have mentioned before, this is not what this CSS is doing, not even effectively. Calling it so would be a mischarterization of this CSS because what this is doing is far simpler than reset/normalization. This may be splitting hairs but I think good terminology and good conventions form the foundation of a good discussion. I liked it better when you characterized this CSS as "exceptionally basic stuff". That is indeed what this is.
> Sorry if I’m being harsh, but I rather be honest than give some cursory congratulations.
Honest feedback on this CSS is very welcome. Indeed, many others have done so in this thread which helped in improving the CSS as well as the README. That's the whole point of a Show HN post. However, in your previous message you began suggesting what type of problems I should solve instead of sharing this CSS. That felt strange because I am just sharing my hobby work here for fun. I especially did not ask for advice on what I should do with my leisure time.
The goal of this project is to improve the appearance of simple text websites, not reset or normalize.
Reset is definitely a bad word to use here as reset does strip out all style selections.