Best Box Size Practice?

Is it a good practice to try to think of everything in the form of boxes? Then typically work from what would typically be the biggest box (background) to the smallest box (front/foreground)?

Example: I want the whole page to have a gray background, so BODY tag to gray, then three column layout with each column blue, so a DIV/SECTION/HEADER tag blue. Followed by paragraph background green so P tag green?

I’ve noticed I occasionally add backgrounds after I add content. I’m probably doing things in an unusual order occasionally. I know it’s not a MUST to work from back to front, I just want to confirm that it’s probably commonplace and an easier/best practice…

That will only give the actual paragraphs a background, not the margins above and below, or any white space left and right. You might find it necessary to give the P’s a container of their own and assign the background: green to it.

1 Like

That I understand. What im meaning though is that it’s good practice to work from what is the LARGEST box, which is typically the background, then work to the forefront of the screen, with those being smaller boxes. I realize I can set paddings and margins. but hypothetically, if I chose NOT to set a margin or padding, then the biggest “box” is the entire body, then “section” or “div” etc, then (for example) an unordered list “ul” that happens to be in the section. in other words, WORK IN LAYERS, back to front, is what im meaning

Layers are good, especially for laying in ground rules with low specificity. The more rules you can declare in that respect, the less you end up with cluttering the more specific rule sets.

It will take some reading, but it would good to understand inheritance in terms of what can be inherited from a parent, and what cannot be. That means going through the property list and looking for that detail. Perhaps there are lists of these things, (you’d think) but for sure it will be in the specs on W3C or MDN.

The body should not have too many actual style properties, imho. A background color of white, foreground color of black, base font size of 100% (or 1rem if the html selector has the base font at 100%); margin 0, padding 0, and that’s about it.

Plan first for a desktop version and don’t put any thought into mobile or tablet. Sketch what you expect in terms of page blocking, and give each of the main components an id. Again, the less those components have to deal with style, the better. Position and dimensions, border, margin, padding, that’s about it.

Now what you put into those component frames is the layer to begin styling. As any of this goes, the best practice aspect is more geared to coding practice, D.R.Y., etc. There are no hard and fast rules when it comes to design. There are, however, ways that are easier to maintain, and others that are not. I think that is something to focus on moving forward.

I’m a big fan of traversal but we see less and less of that in lessons. It’s usually id this and class that. There are ways to keep this to a minimum if we have thought our layout through and built it up in the layers, as you suggest. If that is your idea, then I’m already your fan.

Agree with all that. Especially the body. Typically the only CSS I have in the body element is the padding and margin both set to 0. My mentioning the body was just to make my ultimate point about my using layers more understandable

1 Like

TBH, the old school stuff still sticks in my craw and makes learning the newer stuff a lot harder. Oh I can follow it, but remembering it is my problem, now. We used to marvel at the stuff that could be done, and that was before CSS3. Mind, the term hack was very common in those days, as we all had them in our style sheets. Thank goodness that is not a required workaround with the new Living Standard. Only the gerries will remember most of this stuff.

When’s the last time you heard about faux columns? Doesn’t come up in CSS Grids or CSS Flexbox. It was a solution in its day, and required precision if it was going to work in an adaptive environment. Today, I doubt anybody will ever be compelled to learn that layout technique. (Not mobile friendly.)

Waxing sentimental, now. Best be off…


Imagine the day before 1280 width and only shortly after 1024 width. The majority of users had 640X800 screens and were running Windows 95 or Windows 98 (or MAC OS 8) and Internet Explorer 5 (5.2 on MAC). CSS 1.2 is the current rave, and ECMA-262 was just taking hold.

Now imagine being stuck there in your mind. The definition of h e l l .

1 Like