• 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.
Thank you for the detailed feedback. Some of the styling choices I have made in this CSS come from my own preferences and idiosyncrasies. After all, like I have mentioned in the README, I use this CSS while quickly developing new personal, hobby websites or web-pages which happen to be mostly text-based.
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.
Another update: In the example demo page, the section headings are no longer links to themselves. Instead the headings now have a hash symbol next to them which become visible on hover. These hash symbols are heading anchor links. See the demo at https://susam.github.io/spcss/#heading-anchor for more details.
Why are you suggesting the #foo header have a link to itself? That doesn't make sense. An id attribute value is supposed to be unique to a document, they also act like anchors. Your <h2 id="foo"> is already the #foo anchor target. You can add arbitrary anchors with the "<a name>" tag but if you've got elements with id attributes you're already good for anchors.
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.
> Why are you suggesting the #foo header have a link to itself?
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:
It's so frustrating when you want a link to a specific heading but the site doesn't have these links. So much online documentation has the ids but not the links. How else are you supposed to find the ID to link to a heading? Guess? Open dev tools? I will do both, because I'm particular about it, but 99.9% of regular people I know don't care enough to try either. But if it's right there (and they know what it is and what to look for), then maybe there's a chance someone will give me a direct link to the specific part of the docs under question instead of another enormous pre-compiled single page document with vague instructions to search on the page for what turn out to be frequently used terms.
Please make linking to content headings easy on your site!
That makes sense but was poorly described in the GP comment. I've seen this plenty of times but the justification wasn't jumping out at me. I think the example of the blockquote having a header id of "blockquote" didn't really help with clarity, especially since there's multiple blockquotes.
> If you want heading anchor links, go for something like[...]
...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.
`a > h1 > title text` has basically the same set of problems as `h1 > a > title text`. I’m saying that the anchor link should be separate from the title text, and largely hidden (from screen readers and keyboard navigators).
I'm confused. Why does this get to the front page and why does it have over 200 stars on github? I'm not a webdev at all, but this just looks like 100 lines of trivial CSS to me. What am I missing?
> I'm not a webdev at all, but this just looks like 100 lines of trivial CSS to me. What am I missing?
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!
> default stylesheets if these were not a tasteless disaster that nobody can stand.
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.
I kind of agree, because I like to use the Reader view on mobile. What I dislike most about the default css on most browsers is the New Times Roman font and the fact that content can take the whole width of the browser view.
I like the times new roman font, but you can easily change it in your browser configuration if it bothers you. Regarding full-width content, maybe your browser window is too wide? or your font is too small?
The minimal amount of CSS lines is a feature. So the idea is to create an appealing website with the minimal amount of simple CSS.
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.
I can see it being useful as a kind of preset that's not fancy
but can help save time if you just want the bare minimum to make
the site readable and focus on the content. For some sites you
just don't want to dive into CSS or some framework to get it to
a "good enough" state.
LOTS of competition with "why did we ever stop using nested element selectors?!" projects like these. Baseline is you have to be better than Normalize, and this isn't.
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.
Normalize.css is a general CSS normalizer that caters to all web developers whereas SPCSS is merely my personal stylesheet that does not try to normalize anything at all. So indeed it is just my personal preference that is the reason for changing the link color and the body font.
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!
Thank you sharing the demo link from README. By the way, there is a "view demo" badge right at the top of the README that points to the URL you have shared, i.e., https://susam.github.io/spcss/.
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.
> I guess, the readers ignore these badge-based links either because they associate badges with status displays (build status, coverage status, etc.), not links
I think that’s very likely; it will be a form of banner blindness:
I honestly didn't see it at the top of the page, but only at the bottom. Thanks for responding and correcting the page, despite of my somewhat snarky comment.
Me too - I expect those badges to provide dynamic status information, not just be static links. However, I found the "example" link just when I wanted it, as I'd finished reading the list of features. There are enough demo links now, imo.
The lesson is you can’t communicate too much the “selling” part of the pitch which in this case is the demo. Screenshots in addition to the demo which are links to the demo and have a caption underneath that is a link to the demo might be helpful. Demo demo demo!
Huh? It says what it is and what it does on top of browser styles right there in the linked gh page, doesn't it? The question is more, like, why do we need to discuss those CSS "tricks" at all on a forum for "hackers"? I mean setting contrast and handling overflow of preformatted code text are as basic as it gets when it comes to text formatting. And come on, "prefer-color-scheme" as media query, really (when we have "the cascade" and user stylesheets, adding lots of overhead to CSS)? It appears CSS is made about as unhelpful and undiscoverable as possible.
This is just another version of a reset style sheet no? Very, very basic stuff and there are many online. From memory I used to use normalize.css.
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.
> 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.
As you are sharing your work online, I was just giving you ideas on what is currently missing / not done well in other online resources, in an area that is quite close to what you have done. There is a real need for a good style sheet for responsive web. If you were to create it, and I’m sure it will be easy for you to do, you could get a very popular product. Sorry if it is unsolicited, no need to listen to it, it is given with good intentions after spending over 50 hours myself on getting up to speed on doing a responsive web site from scratch.
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.
> Reset / normalize may not be the best terms to use, but effectively that is what you are doing.
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.
A reset css has the goal of eliminating browser inconsistencies so that you can then layer your css on top with consistent styling. That is, a reset css looks for inconsistencies between browser default styles and then makes a consistent choice.
The goal of this project is to improve the appearance of simple text websites, not reset or normalize.
• 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.