I have been studying the layout of the reactjs.org website using the inspector and trying to learn how to make my code better.
However I notice that there seems to be excessive “container” divs that have very little style and no content.
I’m wondering if someone knows of a specific reason or can give an example of having “containers within containers within containers” when only the lowest one actually has content. If it’s to separate style concerns couldn’t one container have all the needed style?
See the screenshot for an example of what I mean. The highlighted div in teh inspector and on the page just seems to be nothing but a gray left border line.
When you try to reuse as many as possible components you eventually end up with these very minimalistic things I suppose - function that does only one small thing by default has greater re-usability comparing to complex functions. That’s a great visualization of functional programming (also known as a ‘wrapper hell’)
No, this won’t work because you can’t see the code. It’s not going to make your HTML code better because, objectively, that HTML is bad if you were to manually write it like that. But it isn’t written like that. The style-related code is compiled form code that is a lot more sensible-looking.
Yes, but this likely to be a bad site to use for that because it’s using styled components, the output is basically going to be gibberish. You can figure it out by drilling through all those divs but it could go tens and tens of layers deep. The input that generated it will look very sensible, but the tools are not designed to produce nice easy to read HTML or CSS. Code built with the tools will work perfectly well functionality-wise, but it’s write-only, the output it generates is going to be very bad as an HTML/CSS learning tool
Because that’s how the code generation tool used here works (React with Styled Components), it will dump huge amounts of extra stuff into the page. You can’t see the input so it will just look like redundant garbage output (you may be able to see some via the Dev tools, I don’t know how well it deals with styled components)
Yeah, they are React components, nested in other components, with extra ones automatically generated to allow various styling things to work internally in the styled components and so on and so forth.
It’s kind of a sad thing I think: there are benefits to CSS-in-JS, but the more it’s used the less easy it is to just pop open a site and see how it was made. It obfuscates everything. Source maps help, but they’re not a panacea. And you get the stuff that you’re encountering is just garbage, really. It makes total sense to the person writing it, or the person who can work on the uncompiled code, but it’s code generation and the output is awful to read if you’re just trying to figure out how the CSS works
So what I want to do…and just thinking out loud here…
Is mobile / monitor size responsive
-Full width menu bar
-Minimum width side Column for navigating within the current section of the site (it’s a quiz App so different questions
-remaining width area for quiz…this needs to have a min width as well.
If the screen size like in mobile allows for only the quiz and I want the side bar to collapse into a hamburger menu, how would I accomplish that?
