incorrect broken box-sizing warning #243

Open
patrickkettner opened this Issue Feb 18, 2012 · 5 comments

Comments

Projects
None yet
4 participants
@patrickkettner

When using the universal selector to declare box sizing, ala Paul Irish's http://paulirish.com/2012/box-sizing-border-box-ftw/, I don't think that there should be any "Beware of broken box size" warnings.

@nzakas

This comment has been minimized.

Show comment Hide comment
@nzakas

nzakas Feb 21, 2012

Contributor

I'm not sure what this means. Can you give an example of the code that you're using, the result that you're getting, and what you expect?

Contributor

nzakas commented Feb 21, 2012

I'm not sure what this means. Can you give an example of the code that you're using, the result that you're getting, and what you expect?

@patrickkettner

This comment has been minimized.

Show comment Hide comment
@patrickkettner

patrickkettner Feb 21, 2012

Sure!

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.foo { width: 200px; padding: 10px}

outputs

Using width with padding can sometimes make elements larger than you expect.
.foo { width: 200px; padding: 10px}

Since the * selector also selects .foo, it should not give this warning.

Sure!

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.foo { width: 200px; padding: 10px}

outputs

Using width with padding can sometimes make elements larger than you expect.
.foo { width: 200px; padding: 10px}

Since the * selector also selects .foo, it should not give this warning.

@nzakas

This comment has been minimized.

Show comment Hide comment
@nzakas

nzakas Feb 21, 2012

Contributor

That's an interesting case. Thanks, I'll take a look at that.

Contributor

nzakas commented Feb 21, 2012

That's an interesting case. Thanks, I'll take a look at that.

@stubbornella

This comment has been minimized.

Show comment Hide comment
@stubbornella

stubbornella Jul 31, 2012

Contributor

Eek, this falls into a weakness of CSS Lint. If you use multiple selectors to target the same element we do not know that they go together. For example:

.message{}
.error-message{}

<div class="message error-message">

How difficult would it be to make an exception for the * selector @nzakas, since it applies to everything?

Contributor

stubbornella commented Jul 31, 2012

Eek, this falls into a weakness of CSS Lint. If you use multiple selectors to target the same element we do not know that they go together. For example:

.message{}
.error-message{}

<div class="message error-message">

How difficult would it be to make an exception for the * selector @nzakas, since it applies to everything?

@barraponto

This comment has been minimized.

Show comment Hide comment
@barraponto

barraponto Aug 24, 2012

@stubbornella it's not actually a weakness. you can't expect .message and .error-message to always select the same stuff, since we're talking about group union, nor group intersection.

yet * should be supported, indeed.

@stubbornella it's not actually a weakness. you can't expect .message and .error-message to always select the same stuff, since we're talking about group union, nor group intersection.

yet * should be supported, indeed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment