6 ms·

Previous discussions: • https://news.ycombinator.com/item?id=25167928 https://news.ycombinator.com/item?id=25167928 (21 November 2020, 82 comments) • https://

Previous discussions: • https://news.ycombinator.com/item?id=25167928 https://news.ycombinator.com/item?id=25167928 (21 November 2020, 82 comments) • https://news.ycombinator.com/item?id=22681270 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/em inside links to make them look like buttons of various kinds), and the author has declined to change these things despite acknowledging that they’re wrong.

patates 4y ago
> the author has declined to change these things despite acknowledging that they’re wrong I mean, if they already have projects running with this, it makes sense. If I learned one thing in my professional life is that while being a perfectionist already is not the best way to approach the vast majority of the problems, it's especially true when it comes to HTML. Also, I hate to be that guy, but seriously, this thing seems like one of the easiest open source projects to get into, so why not fork?
- chrismorgan 4y ago
  I enjoy reviewing things like this and pointing out the problems in the hopes of improving them, or at least teaching others who will hear—when I post detailed reviews, I normally get positive reviews on the reviews (whether from the original author or from others), and feel I have helped people. But I don’t actually use things like this; I’m far too strongly opinionated and will do my own thing every time. (And for anyone else thinking of forking something like this: there are already a very large number of things like this, consider whether it’s worth the bother, maybe just find another one that has a different set of problems. :-) )
  - Double_a_92 4y ago
    The problem is that that (bad) thing, is the core idea of their project. So from their view you're basically saying "Yo, your project sucks. Make a better one."...
    - pastrami_panda 4y ago
      I'd say it's way more nuanced than that. I appreciate the comment since I gained knowledge on both HTML and about this project's particular usage of it. If a project is based on an unconventional idea and this is undisclosed it's nice for everyone to point this out, it doesn't have to be interpreted as an attack.
  - deleted 4y ago
    [deleted]
Hedepig 4y ago
In their defence they openly state its not for the final product but rather to get _something_ shipped.
- zichy 4y ago
  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.
- TurkTurkleton 4y ago
  There's nothing more permanent than a temporary solution.
  - duxup 4y ago
    I agree that's what happens. At the same time if you just take your MVP and copy paste it to production and don't fix it... that's the problem, not what they did for an MVP. Personally, if I'm hacking out an MVP for something and someone wants to get nit picky ... I'm going to be kinda unhappy. It's an MVP there's going to be A TON to nit pick about, that's the nature of it.
jiggywiggy 4y ago
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.
- smt88 4y ago
  Semantic HTML is useful for search engines and people who need accessibility (e.g. people who use screen readers).
  - zie 4y ago
    Once could argue, we all should care about accessibility, hence we should all care about Semantic HTML.
- zichy 4y ago
  That's a nice way to say "I don't care about accessibility".
  - jiggywiggy 4y ago
    Aside, article etc hardly has any impact on accessibility. Labels, titles, contrast, tabs do have a big impact.
    - edflsafoiewq 4y ago
      aside is a landmark role.
    - zichy 4y ago
      It is not true that they do have hardly any impact on accessibility. But if you want to go that way: MVP.css uses `<label>` instead of `<fieldset>`/`<legend>`. See https://www.w3.org/TR/WCAG20-TECHS/H71.html https://www.w3.org/TR/WCAG20-TECHS/H71.html.
deleted 4y ago
[deleted]
d1sxeyes 4y ago
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 <aside> inside a <section> for a card, but an <aside> inside an <article> 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 more energy just to write a CSS class. One framework I've used recently which floats in between these two is Bonsai.css. It does quite a lot 'out-of-the-box' in terms of minimising boilerplate and basic styling, and uses CSS variables as a shorthand for style properties. It's also a bit of mental overhead, but you can of course just write inline styles if you can't be bothered to learn the shorthand.
- chrismorgan 4y ago
  I’d honestly prefer <card> to <aside>. <aside> is very non-obvious, and is semantically wrong in a way that will cause (very) mild accessibility trouble. <card> 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 <mvp-card> (at the cost of being an inline element in the absence of stylesheets). But frankly <div class=card> is just all-round more sane.
  - d1sxeyes 4y ago
    I thought about this when I was writing my comment, my mind wandered down the track of: 'hey, maybe you could create a web component <card>? That would be cool. It's a shame you can't create web components without JS, wouldn't it be great just to have an HTML only syntax for creating a web component, like <template tagname="card"> or something?' Then I realised that I still have to learn something else to write a 'card', so I might as well just keep it simple and use div.card. If I want anything more complex, I can use one of the many component frameworks that exist.
    - chrismorgan 4y ago
      No need for JavaScript unless you want your element to have additional behaviour attached to it. <mvc-card></mvc-card> would be perfectly valid with no JavaScript required. But yeah, there’s not generally particular value in doing it that way rather than a div or span with a class attribute.
awb 4y ago
Hi, author of MVP.css here. For those interested in the discussions around this, please refer to: https://github.com/andybrewer/mvp/issues/26 https://github.com/andybrewer/mvp/issues/26 https://github.com/andybrewer/mvp/issues/2 https://github.com/andybrewer/mvp/issues/2 I would concede that the use of ‘a strong’, ‘section aside’, etc. does require some learning and the styling is perhaps unique, but I don’t think it’s invalid in any way. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong https://developer.mozilla.org/en-US/docs/Web/HTML/Element/st... > The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. In MVP.css links are already in bold by default, so ‘strong’ text inside a link requires more “urgency” than bold text, which is styled as a button. Sure, I’ll grant that it’s atypical, but I don’t think it’s obviously wrong in some way. Same with ‘aside’: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside https://developer.mozilla.org/en-US/docs/Web/HTML/Element/as... > The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. I think cards are basically “call-out boxes”. But at the end of the day, this style sheet doesn’t have to be for everyone and it’s really designed for someone who’s rapid prototyping. That said, I do think buttons and cards are important to most web page layouts so if there’s a better semantic way to codify those, I’m open to pull requests.
- IYasha 4y ago
  I see you pretend to use buttons using styles. https://www.buttoncheatsheet.com/ https://www.buttoncheatsheet.com/ That is bad, and you should fix bad.
- clairity 4y ago
  cards are better represented as <article> elements: independent blips of content that are regular and largely self-contained (in a given section). an aside is literally something that's not part of the regular flow of information. it's not included in reader mode for instance. especially with rapid prototyping, you don't want your stylesheet dictating quirky usage of html.
- soperj 4y ago
  There's nothing specifically wrong with it, but it's still learning a system, not semantic html.
svnpenn 4y ago
> The trouble with this claim is that MVP.css abuses semantic HTML badly It seems you are not in a position to be making these claims, since by your own admission you don't even use the project: https://news.ycombinator.com/item?id=32807145 https://news.ycombinator.com/item?id=32807145

patates 4y ago

> the author has declined to change these things despite acknowledging that they’re wrong I mean, if they already have projects running with this, it makes sense. If I learned one thing in my professional life is that while being a perfectionist already is not the best way to approach the vast majority of the problems, it's especially true when it comes to HTML. Also, I hate to be that guy, but seriously, this thing seems like one of the easiest open source projects to get into, so why not fork?

chrismorgan 4y ago
I enjoy reviewing things like this and pointing out the problems in the hopes of improving them, or at least teaching others who will hear—when I post detailed reviews, I normally get positive reviews on the reviews (whether from the original author or from others), and feel I have helped people. But I don’t actually use things like this; I’m far too strongly opinionated and will do my own thing every time. (And for anyone else thinking of forking something like this: there are already a very large number of things like this, consider whether it’s worth the bother, maybe just find another one that has a different set of problems. :-) )
- Double_a_92 4y ago
  The problem is that that (bad) thing, is the core idea of their project. So from their view you're basically saying "Yo, your project sucks. Make a better one."...
  - pastrami_panda 4y ago
    I'd say it's way more nuanced than that. I appreciate the comment since I gained knowledge on both HTML and about this project's particular usage of it. If a project is based on an unconventional idea and this is undisclosed it's nice for everyone to point this out, it doesn't have to be interpreted as an attack.
- deleted 4y ago
  [deleted]

Hedepig 4y ago

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

zichy 4y ago
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.
TurkTurkleton 4y ago
There's nothing more permanent than a temporary solution.
- duxup 4y ago
  I agree that's what happens. At the same time if you just take your MVP and copy paste it to production and don't fix it... that's the problem, not what they did for an MVP. Personally, if I'm hacking out an MVP for something and someone wants to get nit picky ... I'm going to be kinda unhappy. It's an MVP there's going to be A TON to nit pick about, that's the nature of it.

jiggywiggy 4y ago

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.

smt88 4y ago
Semantic HTML is useful for search engines and people who need accessibility (e.g. people who use screen readers).
- zie 4y ago
  Once could argue, we all should care about accessibility, hence we should all care about Semantic HTML.
zichy 4y ago
That's a nice way to say "I don't care about accessibility".
- jiggywiggy 4y ago
  Aside, article etc hardly has any impact on accessibility. Labels, titles, contrast, tabs do have a big impact.
  - edflsafoiewq 4y ago
    aside is a landmark role.
  - zichy 4y ago
    It is not true that they do have hardly any impact on accessibility. But if you want to go that way: MVP.css uses `<label>` instead of `<fieldset>`/`<legend>`. See https://www.w3.org/TR/WCAG20-TECHS/H71.html https://www.w3.org/TR/WCAG20-TECHS/H71.html.

deleted 4y ago

[deleted]

d1sxeyes 4y ago

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 <aside> inside a <section> for a card, but an <aside> inside an <article> 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 more energy just to write a CSS class. One framework I've used recently which floats in between these two is Bonsai.css. It does quite a lot 'out-of-the-box' in terms of minimising boilerplate and basic styling, and uses CSS variables as a shorthand for style properties. It's also a bit of mental overhead, but you can of course just write inline styles if you can't be bothered to learn the shorthand.

chrismorgan 4y ago
I’d honestly prefer <card> to <aside>. <aside> is very non-obvious, and is semantically wrong in a way that will cause (very) mild accessibility trouble. <card> 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 <mvp-card> (at the cost of being an inline element in the absence of stylesheets). But frankly <div class=card> is just all-round more sane.
- d1sxeyes 4y ago
  I thought about this when I was writing my comment, my mind wandered down the track of: 'hey, maybe you could create a web component <card>? That would be cool. It's a shame you can't create web components without JS, wouldn't it be great just to have an HTML only syntax for creating a web component, like <template tagname="card"> or something?' Then I realised that I still have to learn something else to write a 'card', so I might as well just keep it simple and use div.card. If I want anything more complex, I can use one of the many component frameworks that exist.
  - chrismorgan 4y ago
    No need for JavaScript unless you want your element to have additional behaviour attached to it. <mvc-card></mvc-card> would be perfectly valid with no JavaScript required. But yeah, there’s not generally particular value in doing it that way rather than a div or span with a class attribute.

awb 4y ago

Hi, author of MVP.css here. For those interested in the discussions around this, please refer to: https://github.com/andybrewer/mvp/issues/26 https://github.com/andybrewer/mvp/issues/26 https://github.com/andybrewer/mvp/issues/2 https://github.com/andybrewer/mvp/issues/2 I would concede that the use of ‘a strong’, ‘section aside’, etc. does require some learning and the styling is perhaps unique, but I don’t think it’s invalid in any way. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong https://developer.mozilla.org/en-US/docs/Web/HTML/Element/st... > The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. In MVP.css links are already in bold by default, so ‘strong’ text inside a link requires more “urgency” than bold text, which is styled as a button. Sure, I’ll grant that it’s atypical, but I don’t think it’s obviously wrong in some way. Same with ‘aside’: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside https://developer.mozilla.org/en-US/docs/Web/HTML/Element/as... > The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. I think cards are basically “call-out boxes”. But at the end of the day, this style sheet doesn’t have to be for everyone and it’s really designed for someone who’s rapid prototyping. That said, I do think buttons and cards are important to most web page layouts so if there’s a better semantic way to codify those, I’m open to pull requests.

IYasha 4y ago
I see you pretend to use buttons using styles. https://www.buttoncheatsheet.com/ https://www.buttoncheatsheet.com/ That is bad, and you should fix bad.
clairity 4y ago
cards are better represented as <article> elements: independent blips of content that are regular and largely self-contained (in a given section). an aside is literally something that's not part of the regular flow of information. it's not included in reader mode for instance. especially with rapid prototyping, you don't want your stylesheet dictating quirky usage of html.
soperj 4y ago
There's nothing specifically wrong with it, but it's still learning a system, not semantic html.

svnpenn 4y ago

> The trouble with this claim is that MVP.css abuses semantic HTML badly It seems you are not in a position to be making these claims, since by your own admission you don't even use the project: https://news.ycombinator.com/item?id=32807145 https://news.ycombinator.com/item?id=32807145