（评论）

（评论）
(comments)

原始链接: https://news.ycombinator.com/item?id=40455944

本文讨论了作者对简化 HTML 作为文档布局的唯一来源的欣赏。然而，他们对默认设计表示担忧，特别提到了颜色和“抛光”。他们建议与专业设计师合作或利用已建立的免费开源设计项目。尽管最初对该设计感到担忧，但作者发现该项目对爱好者很有吸引力，并同意它改进了默认 CSS。他们提出了更完善的默认设置以及在创建过程中进行自定义的能力。一些建议包括改进的配色方案和可访问的设计考虑因素，特别是解决有关隐藏链接指示器的问题。文本引用了几个相关的库，并邀请读者探索类似的工具。作者最后讨论了 Web 界面开发的历史以及维护可用性和可访问性的重要性。

I love the concept of re-invigorating html as the only source of truth for document layout -- and I totally see this being productive for documents that don't need complex design.

That said, I don't love the default design choices here -- colors and "polish." I'm not a professionally trained designer, but I've hand rolled enough software that users eventually complained about to sense when something "feels off" compared to what a really good designer creates with a background in color theory, information density, gradient shadings etc.

If the author is here, have you considered leveraging the aesthetics from other FOSS projects like bulma or tailwind, or collaborating with a professional designer? I know jgthms is sometimes on this site.

Thanks for the constructive feedback!

To be honest I was kind of taken aback seeing this on HN because it was posted before I could do a show hn myself

I'm not a frontend dev nor a designer so it can be indeed apparent that I lack knowledge on color theory, accessibility concerns and other aspects that may seem obvious for other people. Probably hence the "artisanal" feel too.

I'll research more about the things you mentioned in the future. As for collaboration with a professional designer I'm open to receive advices, but I don't plan especially on hiring one as it's a side project. I don't think currently that professionals are the target audience for it, but I guess it'll definitely appeal more to hobbyist

I get the "feels off" too, but I've had that happen with designer-made things too. It looks good enough that to me it seems as though someone with some decent design skills and/or a newer designer created it. The longer I look at it the better it looks overall, but the stronger the "slightly feels off" feeling gets. Pretty wild!

Edit: I think maybe the color on the tea cup is what is feeling a little off to me. Overall I love the logo, but I perhaps if the tea cup color was changed to be closer to the background color at the top?

I agree!

One example of something that feels off is the button styling on hover, dark backgrounds with black text doesn't work well aesthetically or for accessibility.

Having a more polished default set-up will be the cherry on top.

There's a section on the site where you can create your own custom build allowing you some control over basic styling choices.

But yes, designers trying to conform to a corporate look can spend hours on spacing etc. I suspect this isn't for them.

I love little libraries like this. I currently use pico.css and will check this one out. This is what our standard DOM elements in the browser should look like. But given that they don’t, there’s libraries like this.

I googled what “classless” meant for this library after another user commented and found the link below if folks are interested in similar libraries.

https://github.com/dbohdan/classless-css

> This is what our standard DOM elements in the browser should look like.

I agree with this, but it would also be a nightmare for people trying to make their own styles. Even the current default styles are a bit annoying for this. I've long dreamt of some sort of way to switch between some sort of chrome vs content styles. So for my navbar and embedded visualizations/interactive elements I switch to chrome mode and get minimal default styles (maybe just font size, font family and text colour) but the main content of the article can get the user's preferred styles.

> I agree with this, but it would also be a nightmare for people trying to make their own styles. Even the current default styles are a bit annoying for this.

The obvious solution would be a CSS instruction that really reset (like everything to 0, none, etc. — not to default styles) all properties for the selected elements and its children. Something like:

    :root { default-style: none; } /* could be "none" for reset, or "default" to apply the user-agent default style */

Having been building websites since the mid 90's, I think the biggest challenge with that is actually breaking existing sites. Nowadays when you start a new site you almost always start with CSS, but that wasn't always the case and even today there are still sites that use the default styles as a baseline and just tweak as they go.

If we replace the default styles, a ton of sites are going to look very different than they were intended. We could do an "opt in" though that should be very easy to declare (similar to new versions of HTML, such as HTML 5) and get you on the new default style. I think that would be great!

I love pico.css! It's the sweet spot for me in being quick and easy to learn but still very capable.

Flask + HTMX + AlpineJS + PicoCSS is currently my "All Python and HTML SPA"

Looks interesting, but removing the underline for links and only rely on colour except on hover is a big no on the accessibility side

Color blind people could add css extension that underline / highlight links. Blind people use a screen reader / braille display, they not need an underline.

Who else needs underline?

> Color blind people could add css extension that underline / highlight links.

imo, if you're building a new library, this level of accessibility should be baked in. Given the aim of the library to have better css defaults, expecting developers to override the link styling to add underlines or expecting the users to install browser extensions to do that, feels like a weird requirement.

Those are objectively bad reasons for abdicating accessibility though.

Subjectively, I also don't agree that it's ugly. There are also other options like border-bottom or dashed underline or pseudo-elements with additional symbols.

(However, I'm not sure color-only link distinction is actually an issue. It's never been considered problematic in accessibility reviews of the corporate sites/apps I work on professionally.)

the theory is everyone needs underline because not clear otherwise things are links - therefore needing underline come under people with visual disabilities but not thoroughly blind and cognitive issues like not having had any coffee yet despite being up all night, can't think of others offhand.

I think we may need a tool to generate classless CSS frameworks like this, so that everyone can fine-tune color palette, paddings, font sizes an so on

There is a whole slew of classless (semantic) css libraries.

Some examples:

    - https://andybrewer.github.io/mvp/
    - https://oxal.org/projects/sakura/
    - https://yegor256.github.io/tacit/
    - https://chimera-demo.vercel.app/
    - https://watercss.kognise.dev/
    - https://missing.style/

Alas, matcha doesn't even look that promising. There is no demo page to quickly see styled elements, the color palette is garish and the default button hover is illegible, with dark background on dark text. It certainly needs more polish.

I actually love sakura, but I wanted something more complete like having syntax-highlighting styles out-of-the-box and still have some utilities classes.

The demo page is supposed to be the website itself which is intended as a documentation too (you also have a basic website previewer at the begining).

It definitely needs some more polish, but I wasn't expecting this being posted on HN this early

And looks more 2020s than 2010s. The prejudice was imparted to me from other devs and I comply to avoid unfavorable first impressions with my software.

For 30 years we had proportional scroll bars as a standard control. You could see how much of a document your current window is showing. You could click onto the bar to easily jump to a section relative to the document size. You could use the arrow buttons on the top and bottom of the scroll bar. You could tab to it and use the keyboard. If you were impaired in vision or motion, you could use your operating system settings to increase contrast or make them bigger.

And now it's 2024, and people on the web routinely cripple scroll bars to make them an UX nightmare.

The enshittification of UI/UX in browsers due to CSS allowing to completely ruin OS-provided standard controls that used to work just fine is a disgrace.

Please don't use this.

Hard disagree.

OS provided standards controls became worse over time. (see: Apple's disappearing scrollbar and rounded checkboxes)

We can't easily change those, but we can use CSS to at least improve upon those standard controls.

I'm using Windows 10 and Linux, and both provide working standard controls.

Just because Apple is on a mission to ruin their standard controls does not mean those on other operating systems should artificially be forced to also get their UX ruined.

I know HN looks dated. But the very textarea control I am writing in right now can be resized with a standard grab handle, and has working scrollbars and keyboard navigation.

With Windows 11 Microsoft is trying to copy Apple's homework. The Windows 11 standard controls are still subtly better than Apple's, as Microsoft still has a lot of dedicated accessibility teams that have strong voices, but some of Microsoft's designers in the Windows 11 era are giving the impression that they want to be as bad as Apple, if not worse, if they were given the choice and didn't have accessibility teams to be accountable to.

I appreciate the preview functionality which lets you see how it would look on another website. Really intuitive and makes sense on a css-page.

This is not a CSS framework, this is a stylesheet you import when you don’t want to think about CSS or styling but want a site that looks alright.

Yes this is exactly the goal of this project

Some people aren't specialized in front-end (or they just find it boring) so they're more the target audience. I did this because I wanted to avoid having to redo an UI each time I started a new hobby project

While there are customization options, it's really intended as just being an include without the need of changing anything else in your documents

A lot of CSS is about art and aesthetics. CSS work will never be "done". There will always be new stylesheets and "frameworks" as long as artists want to express themselves in the medium of the web.

Ten points to whomever delves the deepest when recursively previewing the site's preview. I'm disappointed with Safari's performance on mobile[1].

What a creative way to demonstrate the lib. I'm excited to give this a try; I hope it's as graceful as demonstrated!

1. https://ibb.co/sHrc0Fc

Not sure I get it.

It sounds like it is a css file which styles standard html elements.

But I'm not sure. If so, where is the css file? And what are those 200 files in the git repo?

These classless libraries are for quick/MVP style web apps where you just need to give the user one or two forms and some help documentation.

I use them all the time for internal stuff because it lets me write some dirty html and have the backend do the real work while not looking browser-default-hideous.

If you need something more complicated, these are probably not meant for you.

Yep. I love the idea behind those libraries but I can't think of any production environment where I would use them without crippling any future change. You'd be forced to silo every custom component from the main stylesheet.

Yeah I don't think this is meant to be used for a production environment. I wrotten this mostly to style my hobby projects effortlessly

Anyway more "professional contexts" probably have their own branding too, so the added value is probably negligeable in this case

Yes it's exactly as you guessed it

The hundreds of files in the repo are just for maintainability and organization, but in the end it'll result in a single file to include, although you can also individually select which part you want to include if you'd like

（评论） (comments)

（评论）
(comments)