"Broken" Box-Model

[dmcass]

I'm curious about the reasoning for using the word "broken" in the definition of this rule. While I understand that setting something like the below could cause confusion to a newcomer to css, anyone who has experience will understand how the box-model works using the default box-sizing: border-box.

/* Throws box-model warning */
.selector {
    width: 89px;
    height: 89px;
    padding: 10px;
    border: 1px solid #000;
}

By the definition of the CSS specification, this is not "broken." The padding and the border are intended to be included in the given width and height of the element, meaning that the .selector element will be 100px in width and height total.

Is the reasoning for this to remove the need for basic addition and subtraction? Or perhaps to assist newcomers in understanding how the box-model works by default?

My only issue with this rule is the wording; in the same way that the rule may assist those who are unfamiliar with the default box-model, it can hurt them by making them think that no browsers follow the spec correctly by default.

[nzakas]

The intent here is to flag cases where you may end up with unintended consequences. I know I've been bitten a few times, even as a seasoned developer, by mixing width/height and padding. If you put in box-sizing, then the warning goes away because it's an indicator that you know exactly what you're doing.

Perhaps "broken" isn't the right term, and we'd certainly be open to another one. Do you have a suggestion?

[dmcass]

That totally makes sense :)

Perhaps "Be aware of box-sizing" could be used? I think this accurately describes what you're trying to call out, as well as indicates what rule will silence the warning.

[mikesherov]

I would add that it would be nice if this rule could distinguish between:

.selector {
    width: 89px;
    height: 89px;
    padding: 10px;
    border: 1px solid #000;
}

and

.selector {
    width: 100%;
    height: 100%;
    padding: 10px;
    border: 1px solid #000;
}

as it's clear as day that the result of the 100% example is almost NEVER what the developer intended. It should complain more loudly about the second one than the first.

[mahonnaise]

I'm curious about the reasoning for using the word "broken" in the definition of this rule.

"Broken" as in "the way IE used to handle it".

Well, nowadays there are quite a lot of developers who never wrote a single line of CSS for IE5.x and most of them probably also never did anything in quirks mode. I for one haven't done either since 2003 or so. So yea, that description probably doesn't make much sense for most.

I kinda agree with mikesherov. The warning should be only triggered if percentages are used for width/height. The result of percentage based dimensions plus padding and/or border (without box-sizing) is never what you want. This would help reducing the number of false positives without undermining the core utility of this rule.

[nzakas]

@mikesherov, @mahonnaise - since what you're suggesting is quite different than what this ticket is about, please file a separate issue so it can be tracked appropriately.

[mikesherov]

created: #181

[stubbornella]

In this case, broken just means that different browsers will handle the same code differently. That is rarely desirable. Maybe the description should be more clear about exactly which browsers are impacted?

[mikesherov]

I'm curious, which browsers are impacted?

[dmcass]

@stubbornella & @mikesherov,
Correct me if I'm wrong, but the only browser that will render this differently is IE6 or lower in quirks mode (@mahonnaise mentioned this as well). All modern browsers render width + padding the exact same way, and IE6 with a doctype should as well.

If the only reason for this warning is because of IE6 quirks, I would recommend removing it completely because this kind of tool doesn't appear to be catering to the least common denominator.

[mahonnaise]

FWIW, I'm also in favor of replacing this rule with the rule outlined in #181. (Thanks @mikesherov! :))

While the current rule still has some relevance today, it's not very useful for most. Also, its error message is pretty confusing for everyone who doesn't know about IE6's broken box model, which can be only observed in quirks mode.

The new rule also happens to catch this particular case where someone made this simple mistake by accident or if it was done deliberately (e.g. some quirks mode IE6 only intranet application).

The difference between the two is that the new one is about unpredictable or unusable property/value combinations (i.e. something which will be always relevant) whereas the current one is about the behavior of some very old UA (i.e. something which becomes less relevant each day).

The focus/intent of the new rule is also much clearer; you don't need the whole back story if you want to explain it. It's all about very precisely defined 100% standards compliant behavior:

If you combine some percentage dimension with padding and/or border, the total size will be kinda unpredictable (and generally not what you want), if you don't also use box-sizing to switch to a different box model.

That was pretty straightforward, wasn't it? :)

[nzakas]

The rule is about much more than IE6 compatibility - it's about mixing properties that may cause the box to display in an unexpected way, i.e., combining width and padding. I agree the name of the rule and the message can be clearer, but I disagree that the rule should be changed or eliminated. I think it's incredibly useful as it is, and helping people to understand its purpose should be the priority.

[dmcass]

@nzakas,
Thanks for clarifying again. This was my understanding from your previous comment. I got a little bit distracted by the mention of browser inconsistencies. I'm still in favor of changing the name of the rule and keeping it, because I do think it's a good alert to potential human error.

[nzakas]

So let's start brainstorming as to what the correct name for this rule is. Is it really just "Box Model Properties" or something along those lines?