6 ms·

My rant about CSS. There is nothing like "compiler error messages" for CSS. The best we have is "inspect" in browsers. It shows the final state of browser has d

My rant about CSS. There is nothing like "compiler error messages" for CSS. The best we have is "inspect" in browsers. It shows the final state of browser has done, not the intermediate "why" or "how" part of it. For example, we will know that an image overflows a div, but browser won't tell why.

gfxgirl 5y ago
because there is no error. there is no way for the browser to know that the css you wrote is not the css you wanted.
- tiborsaas 5y ago
  The browser does know if there's an error. The devtools will tell you if a property is invalid.
  - gfxgirl 5y ago
    The problem is almost never that the CSS you wrote has a syntax error. The problem is almost always the CSS with no syntax errors you wrote isn't doing what you wanted it to do. The browser doesn't know what you wanted it to do so it can't help you.
    - tiborsaas 5y ago
      That's obviously true, the browser just blindly interprets the rules. However, sometimes spec changes or solidifies in a way that can break existing code so there are other cases to consider. There's also tooling to catch these errors if it really matters.
nness 5y ago
Firefox's developer tools shows a warning against CSS properties that will not function as intended (i.e. flex properties on a non-flex container). It can be quite helpful for debugging unexpected behaviour.
jostylr 5y ago
In Firefox (not sure about the others), they do give some info on some errors, such as what might be overriding a rule (other rules or not an appropriate display type or something) or some invalid property or value. Not perfect, but it is not all in the dark. And the ability to directly manipulate the CSS and see the impacts can make getting the right visuals fairly quick, not to mention the ability to change the view size and directly interact with that in all the different screen sizes.
deergomoo 5y ago
I have the same complaint, but I also don’t know how such a thing would be addressed. Ideally I would like to right-click a computed style value in the devtools and be able to hit a “But Why?” option, but I feel like even linking to the relevant part of the relevant spec would be a monumental engineering effort.

gfxgirl 5y ago

because there is no error. there is no way for the browser to know that the css you wrote is not the css you wanted.

tiborsaas 5y ago
The browser does know if there's an error. The devtools will tell you if a property is invalid.
- gfxgirl 5y ago
  The problem is almost never that the CSS you wrote has a syntax error. The problem is almost always the CSS with no syntax errors you wrote isn't doing what you wanted it to do. The browser doesn't know what you wanted it to do so it can't help you.
  - tiborsaas 5y ago
    That's obviously true, the browser just blindly interprets the rules. However, sometimes spec changes or solidifies in a way that can break existing code so there are other cases to consider. There's also tooling to catch these errors if it really matters.

nness 5y ago

Firefox's developer tools shows a warning against CSS properties that will not function as intended (i.e. flex properties on a non-flex container). It can be quite helpful for debugging unexpected behaviour.

jostylr 5y ago

In Firefox (not sure about the others), they do give some info on some errors, such as what might be overriding a rule (other rules or not an appropriate display type or something) or some invalid property or value. Not perfect, but it is not all in the dark. And the ability to directly manipulate the CSS and see the impacts can make getting the right visuals fairly quick, not to mention the ability to change the view size and directly interact with that in all the different screen sizes.

deergomoo 5y ago

I have the same complaint, but I also don’t know how such a thing would be addressed. Ideally I would like to right-click a computed style value in the devtools and be able to hit a “But Why?” option, but I feel like even linking to the relevant part of the relevant spec would be a monumental engineering effort.