Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

MVP.css – Minimalist stylesheet for HTML elements

andybrewer.github.io

Post reply on HN
Print view View original

61–70 of 122 posts

Re: MVP.css – Minimalist stylesheet for HTML elements

#61

Post by zichy »

Hedepig wrote: post #37
chrismorgan wrote: post #34

Previous discussions: • https://news.ycombinator.com/item?id=25167928 (21 November 2020, 82 comments) • https://news.ycombinator.com/item?id=22681270 (25 March 2020, 91 comments) —⁂— > No class names, no frameworks, just semantic HTML and you're done. The trouble with this claim is that MVP.css abuses semantic HTML badly, using completely inappropriate elements all over the place (e.g. aside for cards, and b/strong/i…

In their defence they openly state its not for the final product but rather to get _something_ shipped.

The problem of using semantic elements incorrectly remains. The front page states "just semantic HTML and you're done" which is wrong.

I know that it is called "MVP", but firstly the term viability can mean different things and secondly there's no indication that the markup is implemented incorrectly. I love to check out example/demo pages from CSS frameworks and it's not uncommon to see glaring semantic errors in the HTML. People just copy everything that is presented to them and you should make sure to give them a good introduction.

Re: MVP.css – Minimalist stylesheet for HTML elements

#62

Post by tannhaeuser »

zichy wrote: post #53
russellbeattie wrote: post #14

Not putting your page header and footer inside the element is a giant pain in the ass. Both ways are semantically correct and accessible, but putting them inside the main gives you more flexibility to control your page margins/padding for various display sizes and lets you set up a grid for the whole page.

But putting the ` ` and ` ` inside the ` ` element is not semantically correct. If it would be, you wouldn't need ` `. That's exactly why there's a very basic limit to classless CSS frameworks.

That's incorrect. You can have a header and footer for each sectioning element/sectioning root (eg article) in your doc [1] (but you can't have a main element in header or footer content [2]).

In general, I don't think "HTML semantics" are really as stringent as assumed by some commenters. After all, HTML was just intended as a vocabulary for casual academic publishing, but is of course abused for text that could be much, much more simply and adequately described using other, more targeted or customized SGML vocabularies rather than HTML.

[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fo...

[2]: http://sgmljs.net/docs/w3c-html52-dtd.html

Re: MVP.css – Minimalist stylesheet for HTML elements

#63

Post by quickthrower2 »

I have used it, and like it. But! It is no easier than a class based CSS framework. Instead of guess the classname you play guess the element name. And by attaching style to elements 1-1 you can end up with something less semantic than using a regular CSS framework or a utility based CSS framework.

Re: MVP.css – Minimalist stylesheet for HTML elements

#64

Post by Tade0 »

louismerlin wrote: post #21
doodlesdev wrote: post #7

Quite a lot of stylesheets in this simillar vein [0]. Basically doing CSS by using HTML5 semantic elements instead of classes. My personal favorite is Water.css [1], because it looks good and makes very good use of HTML5 semantics. Tacit [2] is also amazing. [0]: https://css-tricks.com/no-class-css-frameworks/ [1]: https://watercss.kognise.dev/ [2]: https://yegor256.github.io/tacit/

One more that could be added to this list: https://concrete.style (I'm the author)

> Modify the base font-size to 62.5% so that 1.6rem = 16px.

Would you consider removing this?

Re: MVP.css – Minimalist stylesheet for HTML elements

#65

Post by jiggywiggy »

zichy wrote: post #48
jiggywiggy wrote: post #42

Earlier quoted context omitted.

Html semantics is really for purists. Besides a few accessibility things to be aware of, like clicks and tabs for example. The rest has zero impact on the browser and user experience. It was a nice idea but never got off the ground precisely because most of them hardly had any real difference from a simple div.

That's a nice way to say "I don't care about accessibility".

Aside, article etc hardly has any impact on accessibility. Labels, titles, contrast, tabs do have a big impact.

Re: MVP.css – Minimalist stylesheet for HTML elements

#66

Post by jamietanna »

swyx wrote: post #12

i collect these CSS frameworks for fun! here's my list: ### Drop-in CSS Frameworks preview some of these with https://sites.yax.com/ - [Spectre.css]( https://picturepan2.github.io/spectre/getting-started/instal... ) - https://latex.vercel.app/ - https://purecss.io/ - https://picocss.com/ - https://gdcss.netlify.app/ (inspired by UK design system) - https://simplecss.org/demo - https://ajusa.github.io/lit/ - https://s…

I'd also say https://classless.de should be on the list - I use it quite heavily and really like it, as well as being able to theme it more easily too!

Re: MVP.css – Minimalist stylesheet for HTML elements

#67

Post by edflsafoiewq »

jiggywiggy wrote: post #65
zichy wrote: post #48

Earlier quoted context omitted.

That's a nice way to say "I don't care about accessibility".

Aside, article etc hardly has any impact on accessibility. Labels, titles, contrast, tabs do have a big impact.

aside is a landmark role.

Re: MVP.css – Minimalist stylesheet for HTML elements

#68

Post by louismerlin »

Tade0 wrote: post #64
louismerlin wrote: post #21

Earlier quoted context omitted.

One more that could be added to this list: https://concrete.style (I'm the author)

> Modify the base font-size to 62.5% so that 1.6rem = 16px. Would you consider removing this?

Of course! I took this idea from the milligram project [1], but if you feel like it is a downside I am open to hearing your arguments. Feel free to open an issue [2] so we can discuss it.

[1]: https://github.com/milligram/milligram/blob/master/src/_Base...

[2]: https://github.com/louismerlin/concrete.css/issues/new

Re: MVP.css – Minimalist stylesheet for HTML elements

#69

Post by zichy »

jiggywiggy wrote: post #65
zichy wrote: post #48

Earlier quoted context omitted.

That's a nice way to say "I don't care about accessibility".

Aside, article etc hardly has any impact on accessibility. Labels, titles, contrast, tabs do have a big impact.

It is not true that they do have hardly any impact on accessibility. But if you want to go that way: MVP.css uses `` instead of ``/``. See https://www.w3.org/TR/WCAG20-TECHS/H71.html.

Re: MVP.css – Minimalist stylesheet for HTML elements

#70

Post by chrismorgan »

d1sxeyes wrote: post #60
chrismorgan wrote: post #34

Previous discussions: • https://news.ycombinator.com/item?id=25167928 (21 November 2020, 82 comments) • https://news.ycombinator.com/item?id=22681270 (25 March 2020, 91 comments) —⁂— > No class names, no frameworks, just semantic HTML and you're done. The trouble with this claim is that MVP.css abuses semantic HTML badly, using completely inappropriate elements all over the place (e.g. aside for cards, and b/strong/i…

I have to say I'm on the fence on this. On the one hand, in the first instance it seems a lot easier to remember the syntax. But thinking about it for longer, I realise that actually if I'm having to learn to put an inside a for a card, but an inside an becomes a callout, then perhaps it's not quite as intuitive as it seems, and if I have the mental overhead of remembering all that, perhaps I might be saving myself m…

I’d honestly prefer to . is very non-obvious, and is semantically wrong in a way that will cause (very) mild accessibility trouble. is nominally invalid HTML (a reserved element name, basically), but will cause no accessibility trouble, and it’s rather unlikely that it’ll break in any way in the future. You could resolve the invalidity by spelling it (at the cost of being an inline element in the absence of stylesheets). But frankly is just all-round more sane.
Post reply on HN