6 ms·

I know CSS and believe me it sucks. Sure grid layout and flexbox fix things. But a lot of it is hacks on top of hacks. Why do you think the padding as a percen

I know CSS and believe me it sucks. Sure grid layout and flexbox fix things. But a lot of it is hacks on top of hacks. Why do you think the padding as a percentage is relative to the width of the parent? Do you think it was a happy accident? I don't think so, it was purposefully put there in the specs so that we could have boxes with fixed aspect ratios. This is just the tip of the iceberg. The good thing is that all the hacks together make a working thing. And if you know them you can do a lot of stuff.

christophilus 10mo ago
Yeah. If you like programming exclusively with globals and no warning when you have conflicting variable names, then CSS is for you-- it's basically programming (almost) exclusively using global mutable state. I understand why people hate Tailwind, but it largely solved this problem for me.
- zelphirkalt 10mo ago
  You don't have to use global variable names. You can scope variables by defining them in the scope you want them to be defined in. Where do you see CSS being global mutable state?
  - madeofpalk 10mo ago
    Class names are "global mutable state". You can declare a class in one file, and other file can 'mutate' it. There are solutions/workarounds to this. First following a convention like BEM, then enforcing that at build time (CSS Modules), and now (potentially, i haven't checked in with it) the language supports @scope.
    - bryanrasmussen 10mo ago
      Class names and other selectors are more like a query language, because they don't do anything if you don't have an html element with that class or matching the selector. on edit: a downvote on that, really. because I don't think class names are anything like a variable!
      - TheOtherHobbes 10mo ago
        Not really. They're like a variable which is mutated in all kinds of places, without notice or structure. Absolutely the worst kind of variable. One very obvious example is browser defaults. You literally have no idea what they are. You can override them, but not until you find a list so you know what to override. Did you know the default browser margin for body is 8px? Insane.
        zelphirkalt 10mo ago
        This doesn't make CSS classes mutable global state. CSS rules are applied according to specificity of selectors. You could maybe say that the overall style of a page is mutable state, but not the CSS classes themselves. A CSS class is assigned and that's it. Unless JS is involved, it also doesn't disappear or toggle.
        bryanrasmussen 10mo ago
        I'm aware of browser defaults and how they work, yes. Just because someone does not agree with you does not make them uneducated. Frankly I tend to find analogies not very useful, I don't think my analogy of CSS as a db is very good, but as bad as it is I feel it makes some sense as opposed to talk about classes as if they were global mutable variables. I will take my analogy slightly farther. I will say the browser ships with a DB system called CSS, and a toy DB called BrowserDefaults implemented in CSS, the same way MS Access used to ship with Northwind. The especially sucky thing about this system is that when you want to create your own DB you have to extend BrowserDefaults. This is why a lot of specific DBs have what are called resets that basically delete all of the BrowserDefaults setup so it is not messing with your DB. The browser also ships with two languages with the ability to query CSS, one is JavaScript and that is a pretty straightforward language it can read and write to CSS using an API called the CSSOM. The other query language is a tree based query language called HTML (actually there is also another tree based language called XML in there but nobody talks about that anymore, let's just say it works almost the same as HTML only when you use it, it automatically clears all the data out of the base BrowserDefaults DB) (We can see what I mean about analogies suck right about here) This tree based query language is crazy as shit! Because it is not just a query language but also has some weird transformational capabilities. And also the thing that is weird is that the HTML query language can be changed by the JavaScript language! Let's look at an example Let's suppose we have a tree structure like this <div class="one"></div> <div class="two"></div> and the JavaScript holds a tree fragment <span class="myspan">text</span> and the CSS says .myspan { color: green; } .one span { color: red } .two span { color: black } the JavaScript reading that fragment css properties will see that "color" = "green" but placing it inside of the parts of the HTML tree gives different values for the color property. Some people will mistakenly claim at this point that the is mutation of the global state but that is obviously incorrect. The CSS state has not been mutated at all, what the HTML query has done essentially is run a transformation and output an object, the CSS state remains unchanged because JavaScript can use the CSSOM to query what the data in the myspan class is. JavaScript can mutate the value of the CSS classes, but HTML cannot. HTML essentially copies all the classes, runs a transformation, and outputs the result. This is actually a pretty interesting situation, I don't feel that there is any similar architecture anywhere. I don't feel it really fits with DSSL or Latex (because of how JavaScript works with HTML) Now although I don't feel that I have ever really had the problems that other people of undoubtedly superior programming ability seem to have with this, I can see how this unique and somewhat accidentally arrived at architecture can be irritating to people. Note - when I say I don't have any problems I mean sure, I can create bugs with this, I can find bugs impacting me with this, but I've never really had long running hard to resolve bugs due to CSS/HTML. Bugs that are generally hard to resolve I find are in the JS stack. Going back to the browser defaults thing - again not really a good example of either of our analogies, more an example of how every programming language has its idiosyncratic and stupid things you just have to learn about it and keep in mind or they will bite you on the ass. on edit: obviously I am not making any claims as to internal implementations in browsers and how they do it, I am just discussing the external experience of these languages working together and how to think about them.
    - deleted 10mo ago
      [deleted]
    - the_other 10mo ago
      > Class names are "global mutable state". You can declare a class in one file, and other file can 'mutate' it. You can do this in TypeScript and Ruby too.
  - PaulHoule 10mo ago
    for "variable" read "classes". It ought to be possible to compose HTML documents the way Ted Nelson wanted to compose documents in Xanadu, it's a PITA to do because the classes are all in the same namespace although now we have Shadow DOM to manage this and you can even do it without JS with Declarative Shadow DOM. It's a source of stress to add a class to the system with a simple, short and readable name and have to worry it is used someplace else. There is BEM but I despite it (not simple, not short, not readable) I work on a React application that uses more than one plain-CSS framework and also Emotion and some other JS frameworks that generate more CSS properties. These are all leaky abstractions so if you aren't happy with the defaults the way I am with my boostrap-based RSS reader, you have to understand the abstractions of the framework and still understand the underlying CSS. Probably the worst time was when I had to get an application to run inside the Shadow DOM and vendorize some components to patch them accordingly. One saving grace is that that LLMs are good at both coding CSS and answering questions about how it works.
    - pjaoko 10mo ago
      > It's a source of stress to add a class to the system with a simple, short and readable name and have to worry it is used someplace else. That is the whole point of CSS classes: re-use. A CSS class is not meant to be used in only one very specific place. For that, you can select an element's ID or an elements HTML path, to style just that one thing.
- spaceribs 10mo ago
  It bothers me that we're comparing logical languages versus compositional, and I think it's based on a clear misunderstanding of what CSS is supposed to do versus something like C++. It's like saying Rego[1] should just be done in a procedural language when in fact it also wouldn't be useful in that context. [1] https://www.openpolicyagent.org/docs/policy-language https://www.openpolicyagent.org/docs/policy-language
- ximm 10mo ago
  I absolutely hate this argument. Everything in CSS is public (as in: can interface with HTML), not global. Think of writing CSS as designing an API.
- throwawayffffas 10mo ago
  If you are thinking about CSS, in terms of state, mutability, variable names and programming, you are already down a very wrong path and you won't have a lot of luck. CSS is about rules, selectors and cascading, hence Css. Abstractions matter, and using procedural programming abstractions on a declarative styling language only gets in your way. Writing CSS is not programming.
  - oneeyedpigeon 10mo ago
    Absolutely agree, although CSS has slowly become more and more like a programming language over time, so it's understandable that people have this confusion.
    - marcosdumay 10mo ago
      CSS isn't "like" a programming language. It is a programming language. It's just not one based on states, mutability, and variables. Even the things that use the `var` keyword are constants, not variables. (But then, don't read that as being against scoped rules. The fact that all rules are global to the document is bad. We can emulate scopes with specific selectors, but that's the kind of thing a language is supposed to help with.)
      - the_other 10mo ago
        > constants Constants which you can redefine/shadow in scopes, and change the values of at runtime via JS. They seem like variables to me.
        marcosdumay 10mo ago
        > and change the values of at runtime via JS No, you can't. You can set a new value and reevaluate everything.
        the_other 10mo ago
        I’m dumb and don’t understand the distinction you’re making. elem.style.setProperty(‘—var-name’, newValue); … will set a new value for the “constant”. The element will rerender with the new value. You can animate/automate these changes and the element will continue to rerebder with the updated value. To me, that justifies the name “variable” from the perspective of the CSS.
- alwillis 10mo ago
  1. Any decent setup using the CSS Language Server Protocol would warn you about conflicting variables. 2. Custom properties can be scoped to a particular part of the DOM [1]. 3. @function has shipped Chrome; custom properties defined inside of an `at` function are local custom properties. So are the parameters. 4. Local properties stay local unless the outside explicitly references them (which it can't without knowing they exist) [1] Limit the reach of your selectors with the CSS @scope at-rule -- https://developer.chrome.com/docs/css-ui/at-scope https://developer.chrome.com/docs/css-ui/at-scope
- pjaoko 10mo ago
  > If you like programming exclusively with globals and no warning when you have conflicting variable names Tailwind is built on top of CSS. It is basically a library of hundreds of tiny "global", documented CSS classes.
- onehair 10mo ago
  No. It's because you didn't bother learning css. It's right there in the title
andrehacker 10mo ago
That is my impression too. From my experience, the fact that I used it early on makes me use it in the "wrong" way as the fundamental concepts have changed a few times. This is how it works for me: https://media1.tenor.com/m/QWdPngpHxZ8AAAAd/family-guy-css.gif https://media1.tenor.com/m/QWdPngpHxZ8AAAAd/family-guy-css.g...
- burningChrome 10mo ago
  >> as the fundamental concepts have changed a few times. This is what got me. I exited development about eight years ago. Came back and was like, "WTF is going on with CSS now?" Completely lost and took me a few years working as an accessibility engineer to find my way back. Its very hard having people telling you constantly how to "properly" use CSS, then learning all those techniques and approaches. Using those for a few years, then suddenly you have to completely unlearn it, then relearn it "the right way" again a few years later. Completely maddening where front-end development has gone and continues to go.
TZubiri 10mo ago
> "I don't think so, it was purposefully put there in the specs so that we could have boxes with fixed aspect ratios. This is just the tip of the iceberg." I don't think that css evolved with specs, the HTML/CSS specs were descriptive rather than normative, and they came after the browser wars and the organic clusterfuck.
layer8 10mo ago
Yep, it's irreparably broken conceptually. Learning all the ins and outs doesn't change that.
oliwarner 10mo ago
I know CSS, but also a few other displays and layout engines. In my experience "CSS sucks" right up until you try to do a tenth of what it offers in something else. Cross-platform, device-neutral UI is hard. Then allow user-provided alterations?
- IshKebab 10mo ago
  Right but isn't that just because it's huge and pervasive. Not because it is necessarily well-designed. It sucks and it's very powerful and flexible.
- janderland 10mo ago
  It depends on what you mean by "sucks". I don't think anyone here is denying that it's often the best tool for the job. You SHOULD learn CSS if you want to be an effective UI programmer simply because you'll encounter it everywhere. But the quality of the language should still be critique IMO.
- jeberle 10mo ago
  That's the basis for my critique of CSS. There were plenty of other layout systems extant at the time CSS was cooked up. How CSS could have delivered such an incomplete and broken scheme is beyond me. To this day, it sucks harder than GridBagLayout from AWT of the 90s (and that one sucks a quite bit).
- lvncelot 10mo ago
  Yeah, there's a good reason why I have a lot of criticisms about CSS and only some about, say, QT. It's because I spent the last 15+ years writing CSS in some way or another and one extended summer of hacking a side project in QT, abandoning it, and never looking back.
nicoburns 10mo ago
> Why do you think the padding as a percentage is relative to the width of the parent The serious answer is: 1. Many early web engines used `display: content-box`. So the padding was actually considered to be outside of the box itself. 2. Early web engines were strict about height-can-depend-on-width, but width-cannot-depend-on-height to avoid circular dependencies.
- throwawayffffas 10mo ago
  While that's true. They could have gone another way without breaking the dependency rules. Padding top and bottom could be relative to parent height and padding left and right could be relative to parent width. They would not be the same. But it would still make sense. It would arguably be more logical than the selected behavior. But the specific example does not even invalidate my point there is a whole website about css quirky behaviors and how to use them to your advantage, https://css-tricks.com/ https://css-tricks.com/.
- Izkata 10mo ago
  > 1. Many early web engines used `display: content-box`. So the padding was actually considered to be outside of the box itself. IIRC this was actually the spec, and IE decided to ignore it and do something saner, while the box-sizing attribute to pick what you wanted came later. Designing for content-box and IE displaying using border-box (or whatever it did) was one of the reasons it got the nickname "internet exploder" - everything ended up positioned or sized wrong. Until box-sizing came along, it was common to use various hacks / bugs in the browsers' CSS parsers to make certain rules only apply to certain browsers to fix this.
  - nicoburns 10mo ago
    > IIRC this was actually the spec, and IE decided to ignore it and do something saner That's actually a little unfair on IE. This behaviour predates there even being a spec. IE and Netscape did it differently, and as a general rule Netscape's behaviour tended to be what ended up in the spec. This was mostly a good thing, but not so much in this case.
jacobp100 10mo ago
> Why do you think the padding as a percentage is relative to the width of the parent? Do you think it was a happy accident? I don't think so, it was purposefully put there in the specs so that we could have boxes with fixed aspect ratios. This is just the tip of the iceberg. It’s because you cannot do a percentage of a height unless your parent’s height is fixed - something that happens naturally maybe 1% of the time. You’d be missing vertical borders in almost every case with your suggestion
commandlinefan 10mo ago
I've spent a LOT of time trying to learn it. I've read the O'Reilly book, CSS zen garden, Eric Meyer on CSS, and the spec itself... I still think it sucks.
onehair 10mo ago
Your comment reeks of "I am a programmer and think CSS is not worth my time, it's for designers, eww" Which is the actual issue. Learn CSS and treat it as part of the web stack.

christophilus 10mo ago

Yeah. If you like programming exclusively with globals and no warning when you have conflicting variable names, then CSS is for you-- it's basically programming (almost) exclusively using global mutable state. I understand why people hate Tailwind, but it largely solved this problem for me.

zelphirkalt 10mo ago
You don't have to use global variable names. You can scope variables by defining them in the scope you want them to be defined in. Where do you see CSS being global mutable state?
- madeofpalk 10mo ago
  Class names are "global mutable state". You can declare a class in one file, and other file can 'mutate' it. There are solutions/workarounds to this. First following a convention like BEM, then enforcing that at build time (CSS Modules), and now (potentially, i haven't checked in with it) the language supports @scope.
  - bryanrasmussen 10mo ago
    Class names and other selectors are more like a query language, because they don't do anything if you don't have an html element with that class or matching the selector. on edit: a downvote on that, really. because I don't think class names are anything like a variable!
    - TheOtherHobbes 10mo ago
      Not really. They're like a variable which is mutated in all kinds of places, without notice or structure. Absolutely the worst kind of variable. One very obvious example is browser defaults. You literally have no idea what they are. You can override them, but not until you find a list so you know what to override. Did you know the default browser margin for body is 8px? Insane.
      - zelphirkalt 10mo ago
        This doesn't make CSS classes mutable global state. CSS rules are applied according to specificity of selectors. You could maybe say that the overall style of a page is mutable state, but not the CSS classes themselves. A CSS class is assigned and that's it. Unless JS is involved, it also doesn't disappear or toggle.
      - bryanrasmussen 10mo ago
        I'm aware of browser defaults and how they work, yes. Just because someone does not agree with you does not make them uneducated. Frankly I tend to find analogies not very useful, I don't think my analogy of CSS as a db is very good, but as bad as it is I feel it makes some sense as opposed to talk about classes as if they were global mutable variables. I will take my analogy slightly farther. I will say the browser ships with a DB system called CSS, and a toy DB called BrowserDefaults implemented in CSS, the same way MS Access used to ship with Northwind. The especially sucky thing about this system is that when you want to create your own DB you have to extend BrowserDefaults. This is why a lot of specific DBs have what are called resets that basically delete all of the BrowserDefaults setup so it is not messing with your DB. The browser also ships with two languages with the ability to query CSS, one is JavaScript and that is a pretty straightforward language it can read and write to CSS using an API called the CSSOM. The other query language is a tree based query language called HTML (actually there is also another tree based language called XML in there but nobody talks about that anymore, let's just say it works almost the same as HTML only when you use it, it automatically clears all the data out of the base BrowserDefaults DB) (We can see what I mean about analogies suck right about here) This tree based query language is crazy as shit! Because it is not just a query language but also has some weird transformational capabilities. And also the thing that is weird is that the HTML query language can be changed by the JavaScript language! Let's look at an example Let's suppose we have a tree structure like this <div class="one"></div> <div class="two"></div> and the JavaScript holds a tree fragment <span class="myspan">text</span> and the CSS says .myspan { color: green; } .one span { color: red } .two span { color: black } the JavaScript reading that fragment css properties will see that "color" = "green" but placing it inside of the parts of the HTML tree gives different values for the color property. Some people will mistakenly claim at this point that the is mutation of the global state but that is obviously incorrect. The CSS state has not been mutated at all, what the HTML query has done essentially is run a transformation and output an object, the CSS state remains unchanged because JavaScript can use the CSSOM to query what the data in the myspan class is. JavaScript can mutate the value of the CSS classes, but HTML cannot. HTML essentially copies all the classes, runs a transformation, and outputs the result. This is actually a pretty interesting situation, I don't feel that there is any similar architecture anywhere. I don't feel it really fits with DSSL or Latex (because of how JavaScript works with HTML) Now although I don't feel that I have ever really had the problems that other people of undoubtedly superior programming ability seem to have with this, I can see how this unique and somewhat accidentally arrived at architecture can be irritating to people. Note - when I say I don't have any problems I mean sure, I can create bugs with this, I can find bugs impacting me with this, but I've never really had long running hard to resolve bugs due to CSS/HTML. Bugs that are generally hard to resolve I find are in the JS stack. Going back to the browser defaults thing - again not really a good example of either of our analogies, more an example of how every programming language has its idiosyncratic and stupid things you just have to learn about it and keep in mind or they will bite you on the ass. on edit: obviously I am not making any claims as to internal implementations in browsers and how they do it, I am just discussing the external experience of these languages working together and how to think about them.
  - deleted 10mo ago
    [deleted]
  - the_other 10mo ago
    > Class names are "global mutable state". You can declare a class in one file, and other file can 'mutate' it. You can do this in TypeScript and Ruby too.
- PaulHoule 10mo ago
  for "variable" read "classes". It ought to be possible to compose HTML documents the way Ted Nelson wanted to compose documents in Xanadu, it's a PITA to do because the classes are all in the same namespace although now we have Shadow DOM to manage this and you can even do it without JS with Declarative Shadow DOM. It's a source of stress to add a class to the system with a simple, short and readable name and have to worry it is used someplace else. There is BEM but I despite it (not simple, not short, not readable) I work on a React application that uses more than one plain-CSS framework and also Emotion and some other JS frameworks that generate more CSS properties. These are all leaky abstractions so if you aren't happy with the defaults the way I am with my boostrap-based RSS reader, you have to understand the abstractions of the framework and still understand the underlying CSS. Probably the worst time was when I had to get an application to run inside the Shadow DOM and vendorize some components to patch them accordingly. One saving grace is that that LLMs are good at both coding CSS and answering questions about how it works.
  - pjaoko 10mo ago
    > It's a source of stress to add a class to the system with a simple, short and readable name and have to worry it is used someplace else. That is the whole point of CSS classes: re-use. A CSS class is not meant to be used in only one very specific place. For that, you can select an element's ID or an elements HTML path, to style just that one thing.
spaceribs 10mo ago
It bothers me that we're comparing logical languages versus compositional, and I think it's based on a clear misunderstanding of what CSS is supposed to do versus something like C++. It's like saying Rego[1] should just be done in a procedural language when in fact it also wouldn't be useful in that context. [1] https://www.openpolicyagent.org/docs/policy-language https://www.openpolicyagent.org/docs/policy-language
ximm 10mo ago
I absolutely hate this argument. Everything in CSS is public (as in: can interface with HTML), not global. Think of writing CSS as designing an API.
throwawayffffas 10mo ago
If you are thinking about CSS, in terms of state, mutability, variable names and programming, you are already down a very wrong path and you won't have a lot of luck. CSS is about rules, selectors and cascading, hence Css. Abstractions matter, and using procedural programming abstractions on a declarative styling language only gets in your way. Writing CSS is not programming.
- oneeyedpigeon 10mo ago
  Absolutely agree, although CSS has slowly become more and more like a programming language over time, so it's understandable that people have this confusion.
  - marcosdumay 10mo ago
    CSS isn't "like" a programming language. It is a programming language. It's just not one based on states, mutability, and variables. Even the things that use the `var` keyword are constants, not variables. (But then, don't read that as being against scoped rules. The fact that all rules are global to the document is bad. We can emulate scopes with specific selectors, but that's the kind of thing a language is supposed to help with.)
    - the_other 10mo ago
      > constants Constants which you can redefine/shadow in scopes, and change the values of at runtime via JS. They seem like variables to me.
      - marcosdumay 10mo ago
        > and change the values of at runtime via JS No, you can't. You can set a new value and reevaluate everything.
        the_other 10mo ago
        I’m dumb and don’t understand the distinction you’re making. elem.style.setProperty(‘—var-name’, newValue); … will set a new value for the “constant”. The element will rerender with the new value. You can animate/automate these changes and the element will continue to rerebder with the updated value. To me, that justifies the name “variable” from the perspective of the CSS.
alwillis 10mo ago
1. Any decent setup using the CSS Language Server Protocol would warn you about conflicting variables. 2. Custom properties can be scoped to a particular part of the DOM [1]. 3. @function has shipped Chrome; custom properties defined inside of an `at` function are local custom properties. So are the parameters. 4. Local properties stay local unless the outside explicitly references them (which it can't without knowing they exist) [1] Limit the reach of your selectors with the CSS @scope at-rule -- https://developer.chrome.com/docs/css-ui/at-scope https://developer.chrome.com/docs/css-ui/at-scope
pjaoko 10mo ago
> If you like programming exclusively with globals and no warning when you have conflicting variable names Tailwind is built on top of CSS. It is basically a library of hundreds of tiny "global", documented CSS classes.
onehair 10mo ago
No. It's because you didn't bother learning css. It's right there in the title

andrehacker 10mo ago

That is my impression too. From my experience, the fact that I used it early on makes me use it in the "wrong" way as the fundamental concepts have changed a few times. This is how it works for me: https://media1.tenor.com/m/QWdPngpHxZ8AAAAd/family-guy-css.gif https://media1.tenor.com/m/QWdPngpHxZ8AAAAd/family-guy-css.g...

burningChrome 10mo ago
>> as the fundamental concepts have changed a few times. This is what got me. I exited development about eight years ago. Came back and was like, "WTF is going on with CSS now?" Completely lost and took me a few years working as an accessibility engineer to find my way back. Its very hard having people telling you constantly how to "properly" use CSS, then learning all those techniques and approaches. Using those for a few years, then suddenly you have to completely unlearn it, then relearn it "the right way" again a few years later. Completely maddening where front-end development has gone and continues to go.

TZubiri 10mo ago

> "I don't think so, it was purposefully put there in the specs so that we could have boxes with fixed aspect ratios. This is just the tip of the iceberg." I don't think that css evolved with specs, the HTML/CSS specs were descriptive rather than normative, and they came after the browser wars and the organic clusterfuck.

layer8 10mo ago

Yep, it's irreparably broken conceptually. Learning all the ins and outs doesn't change that.

oliwarner 10mo ago

I know CSS, but also a few other displays and layout engines. In my experience "CSS sucks" right up until you try to do a tenth of what it offers in something else. Cross-platform, device-neutral UI is hard. Then allow user-provided alterations?

IshKebab 10mo ago
Right but isn't that just because it's huge and pervasive. Not because it is necessarily well-designed. It sucks and it's very powerful and flexible.
janderland 10mo ago
It depends on what you mean by "sucks". I don't think anyone here is denying that it's often the best tool for the job. You SHOULD learn CSS if you want to be an effective UI programmer simply because you'll encounter it everywhere. But the quality of the language should still be critique IMO.
jeberle 10mo ago
That's the basis for my critique of CSS. There were plenty of other layout systems extant at the time CSS was cooked up. How CSS could have delivered such an incomplete and broken scheme is beyond me. To this day, it sucks harder than GridBagLayout from AWT of the 90s (and that one sucks a quite bit).
lvncelot 10mo ago
Yeah, there's a good reason why I have a lot of criticisms about CSS and only some about, say, QT. It's because I spent the last 15+ years writing CSS in some way or another and one extended summer of hacking a side project in QT, abandoning it, and never looking back.

nicoburns 10mo ago

> Why do you think the padding as a percentage is relative to the width of the parent The serious answer is: 1. Many early web engines used `display: content-box`. So the padding was actually considered to be outside of the box itself. 2. Early web engines were strict about height-can-depend-on-width, but width-cannot-depend-on-height to avoid circular dependencies.

throwawayffffas 10mo ago
While that's true. They could have gone another way without breaking the dependency rules. Padding top and bottom could be relative to parent height and padding left and right could be relative to parent width. They would not be the same. But it would still make sense. It would arguably be more logical than the selected behavior. But the specific example does not even invalidate my point there is a whole website about css quirky behaviors and how to use them to your advantage, https://css-tricks.com/ https://css-tricks.com/.
Izkata 10mo ago
> 1. Many early web engines used `display: content-box`. So the padding was actually considered to be outside of the box itself. IIRC this was actually the spec, and IE decided to ignore it and do something saner, while the box-sizing attribute to pick what you wanted came later. Designing for content-box and IE displaying using border-box (or whatever it did) was one of the reasons it got the nickname "internet exploder" - everything ended up positioned or sized wrong. Until box-sizing came along, it was common to use various hacks / bugs in the browsers' CSS parsers to make certain rules only apply to certain browsers to fix this.
- nicoburns 10mo ago
  > IIRC this was actually the spec, and IE decided to ignore it and do something saner That's actually a little unfair on IE. This behaviour predates there even being a spec. IE and Netscape did it differently, and as a general rule Netscape's behaviour tended to be what ended up in the spec. This was mostly a good thing, but not so much in this case.

jacobp100 10mo ago

> Why do you think the padding as a percentage is relative to the width of the parent? Do you think it was a happy accident? I don't think so, it was purposefully put there in the specs so that we could have boxes with fixed aspect ratios. This is just the tip of the iceberg. It’s because you cannot do a percentage of a height unless your parent’s height is fixed - something that happens naturally maybe 1% of the time. You’d be missing vertical borders in almost every case with your suggestion

commandlinefan 10mo ago

I've spent a LOT of time trying to learn it. I've read the O'Reilly book, CSS zen garden, Eric Meyer on CSS, and the spec itself... I still think it sucks.

onehair 10mo ago

Your comment reeks of "I am a programmer and think CSS is not worth my time, it's for designers, eww" Which is the actual issue. Learn CSS and treat it as part of the web stack.