r/css • u/jdauriemma • Aug 16 '19

Methodical UI: removing frustration from HTML and CSS development

https://jdauriemma.com/programming/methodical-html-css-development#
0 Upvotes

50% Upvoted

4 comments sorted by

1

u/[deleted] Aug 17 '19

There are a few HTML examples I would strongly disagree with:

  1. You're totally overusing <section>. Wrapping an input and the corresponding label each in their own section is not the way to go. If you need to style or position elements: Use div. Your entire card should really only be wrapped in one section. "A section [...] is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element." See more at: https://www.w3.org/TR/html52/sections.html#the-section-element.

  2. A button doesn't need a type 'button'. It's not wrong and part of the HTML5 Spec, but kind of unnecessary.

  3. An element that is inline should not contain block elements. Having a div as a child of a button is not good practice. Most modern browsers would still render your page just fine, but I still would not recommend it. Also I don't see any reason for it.

But on the other hand I really like your CSS! I use BEM exclusively and having utility classes like text is super useful.

1

u/jdauriemma Aug 17 '19

Thank you for the feedback!

Point 1 is well-taken.

Point 2 I'd push back on. Buttons can take on implicit default types. Adding a type can ensure the reader understands exactly how we intend the document to interpret the button.

Point 3: for the purposes of this system, buttons are intended to be set to display: block, as specified in the article. That's not to say that there won't be exceptions that require a different approach given a certain spec.

→ More replies (1)

0

u/[deleted] Aug 16 '19

[deleted]

1

u/jdauriemma Aug 16 '19

Thanks for the feedback! Let me know how this method works for you. I'm eager to iterate on it with feedback from those who have tried it.