5 ms·

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much wor

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that <div> to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that flow can be shifted upstream to achieve the desired result. CSS is a language of constraints; use them to guide the layout like water, instead of hammering it into place like wooden planks. When you do the latter, that's how you end up in a quagmire of competing constraints where the sum behavior is impossible to predict, and changing that behavior is infuriating (and often involves `important!`s). That's the kind of situation most people are talking about when they say they hate CSS. For some, it's all they've ever known.

themodelplumber 5y ago
A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some additional markup and inline CSS, but the inline CSS was stripped during an upgrade to the latest inline HTML editor we use here. Anyway, the graphic was supposed to be a flourished section break that was center-aligned, and instead it is now a white bar that is currently even longer than the anchor text that is also overlapping the background imagery. If you remove the graphic, be careful because it reveals this...other problem, also with the CSS. You know you can scroll to the left and right really easily if you hold down shift?
- brundolf 5y ago
  I'll link (plug) an article I wrote where I look at a case study that's similar to what you describe and use it to talk about my broader philosophy: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I wrote this a good few years ago and the writing style isn't great looking back, but I stand by the ideas :)
- hypertele-Xii 5y ago
  All the problems you just listed are everywhere else but the CSS.
  - blacktriangle 5y ago
    All the problems he listed are very real, and its important that a technology fit in our actual working model, not just some theoretical model. Take his example of the images being off thus screwing up your widths because you chose to inherent the image width as a constraint. Now imagine a very realistic scenario where you are reusing that style across multiple pages, and each page has a different image. Now you need to confirm this works for all existing and future possible images, good luck with that. Point being, isolating element styles from each other where possible is a big win for maintainability and reliability.
    - berkes 5y ago
      The problems may be real, but blaming CSS for them is both unfair and unconstructive. You want CSS to solve this problem that other tools and workflows introduce? `article .content img { width: auto; display: block; max-width: 100%; }`. This is not the solution, but one of many possible. > ... step back and understand where its current width is coming from, and determine how that flow can be shifted upstream to achieve the desired result. Step back here is seeing that large images in certain containers push the container out and that you want to avoid this. If you want CSS to avoid the problems you list, in the first place: that is just unconstructive: The tooling, holiday schedule, poor migrations, and broken upgrades are causing the issues, the constructive solution would be to fix those. And if you cannot, to look at how CSS can help you with them. > Now you need to confirm this works for all existing and future possible images, good luck with that. This is not hard at all. It is what both the C in CSS and classes and inheritance solve for you. `img.leader` vs `img.aside` vs `article p.teaser img` vs `article img` etceteras.
      - blacktriangle 5y ago
        Expecting CSS to solve people on holiday is not the point, but expecting a technology to protect me from the much more general problem of other developers and content generators making mistakes is something I think you can blame on CSS. Going back to brundolf's point, he's arguing that you should try and take advantage of relative constraints as much as possible as CSS lets you do that. I'm arguing the opposite, and so are you in your last line, that the solution is to hardcode those images and decouple the two components. You can say don't blame CSS as it gives you a multitude of options for how to deal with the situation, but the counterargument is that good tools lead you to a "pit of success" where the correct way is obvious, and CSS is more like a "tiny little bridge out of Moria of success" where you're just asking to fall to your doom.
- kwhitefoot 5y ago
  > You know you can scroll to the left and right really easily if you hold down shift? On a touch interface?
  - codetrotter 5y ago
    On a touch interface you drag sideways to scroll. That being said it's very annoying to read anything that needs to be scrolled sideways. So if I come across it I zoom out and if it's too small to read then I navigate away from the site.
- robin_reala 5y ago
  > You know you can scroll to the left and right really easily if you hold down shift? On macOS, but not by default on Windows. On the other hand, Chrome has adopted this as default behaviour even on Windows, so I guess Edge has got it now too.
- extra88 5y ago
  > You know you can scroll to the left and right really easily if you hold down shift? You can scroll left and right easily, not everyone can. Avoiding the need to scroll in two directions makes content more usable to everyone but there's also a WCAG criterion about it. https://www.w3.org/WAI/WCAG21/Understanding/reflow https://www.w3.org/WAI/WCAG21/Understanding/reflow
  - burnished 5y ago
    That line was tongue in cheek, I believe. Nice of you to share that link though.
- robertoandred 5y ago
  You should be setting image widths/max-widths in CSS to avoid layout problems due to unknowns like intrinsic image dimensions.
ofrzeta 5y ago
That's good advice. It's also a kind of zen-like approach (forgive me if I am not referring to it by the book). In the past I used to fight CSS by setting all kinds of attributes until it looked half-decent. Now I feel much better by cutting back and lettings the layout engine do its work as you said. Turns out to work better on mobile, too. (Ok let's forget about the dirty media query hacks to shift the last pixels. Move them to a dirty.css and enjoy your other clean stylesheets).
madeofpalk 5y ago
> you want to step back and understand where its current width is coming from This touches on my key insight with CSS (and programming in general), in that if you have a problem with your page layout, that probably probably exists in the code you’re already written, so adding more code on top will only make things more difficult. Step back, understand exactly why the layout is acting why it is, and address that problem rather than just monkey patching a hack on top.
- blacktriangle 5y ago
  The problem there is that you're now refactoring a bunch of code that is working on the other 99% of your pages. This model is great, but in CSS when doing this in order to fix your current problem, you are almost guarenteed to break other layouts elsewhere, and very very few people are using automated view testing to see if layouts break. I think this is the core reason why functional CSS is growing, because by separating out your layouts from each other, one can actually approach CSS refactoring this way without worrying about breaking other pages.
bzzzt 5y ago
The reason lots of developers hate CSS is not because they ended up in a "quagmire of constraints", but in a quagmire of previous developer's constraint...
andrei_says_ 5y ago
I really like the ITCSS approach - you define your rules the way you’d create a sculpture out of granite. Start by taking a granite block out of the quarry / define the most common rules with widest coverage, then gradually carve the largest details / more specialized rules and then focus on the details. This way you work with the cascade, as CSS was designed. Defining sensible defaults and then having a few utility classes for layout helps with this. You could follow it BEM for the rest. This structure results in minimal CSS that doesn’t fight itself.

themodelplumber 5y ago

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some additional markup and inline CSS, but the inline CSS was stripped during an upgrade to the latest inline HTML editor we use here. Anyway, the graphic was supposed to be a flourished section break that was center-aligned, and instead it is now a white bar that is currently even longer than the anchor text that is also overlapping the background imagery. If you remove the graphic, be careful because it reveals this...other problem, also with the CSS. You know you can scroll to the left and right really easily if you hold down shift?

brundolf 5y ago
I'll link (plug) an article I wrote where I look at a case study that's similar to what you describe and use it to talk about my broader philosophy: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I wrote this a good few years ago and the writing style isn't great looking back, but I stand by the ideas :)
hypertele-Xii 5y ago
All the problems you just listed are everywhere else but the CSS.
- blacktriangle 5y ago
  All the problems he listed are very real, and its important that a technology fit in our actual working model, not just some theoretical model. Take his example of the images being off thus screwing up your widths because you chose to inherent the image width as a constraint. Now imagine a very realistic scenario where you are reusing that style across multiple pages, and each page has a different image. Now you need to confirm this works for all existing and future possible images, good luck with that. Point being, isolating element styles from each other where possible is a big win for maintainability and reliability.
  - berkes 5y ago
    The problems may be real, but blaming CSS for them is both unfair and unconstructive. You want CSS to solve this problem that other tools and workflows introduce? `article .content img { width: auto; display: block; max-width: 100%; }`. This is not the solution, but one of many possible. > ... step back and understand where its current width is coming from, and determine how that flow can be shifted upstream to achieve the desired result. Step back here is seeing that large images in certain containers push the container out and that you want to avoid this. If you want CSS to avoid the problems you list, in the first place: that is just unconstructive: The tooling, holiday schedule, poor migrations, and broken upgrades are causing the issues, the constructive solution would be to fix those. And if you cannot, to look at how CSS can help you with them. > Now you need to confirm this works for all existing and future possible images, good luck with that. This is not hard at all. It is what both the C in CSS and classes and inheritance solve for you. `img.leader` vs `img.aside` vs `article p.teaser img` vs `article img` etceteras.
    - blacktriangle 5y ago
      Expecting CSS to solve people on holiday is not the point, but expecting a technology to protect me from the much more general problem of other developers and content generators making mistakes is something I think you can blame on CSS. Going back to brundolf's point, he's arguing that you should try and take advantage of relative constraints as much as possible as CSS lets you do that. I'm arguing the opposite, and so are you in your last line, that the solution is to hardcode those images and decouple the two components. You can say don't blame CSS as it gives you a multitude of options for how to deal with the situation, but the counterargument is that good tools lead you to a "pit of success" where the correct way is obvious, and CSS is more like a "tiny little bridge out of Moria of success" where you're just asking to fall to your doom.
kwhitefoot 5y ago
> You know you can scroll to the left and right really easily if you hold down shift? On a touch interface?
- codetrotter 5y ago
  On a touch interface you drag sideways to scroll. That being said it's very annoying to read anything that needs to be scrolled sideways. So if I come across it I zoom out and if it's too small to read then I navigate away from the site.
robin_reala 5y ago
> You know you can scroll to the left and right really easily if you hold down shift? On macOS, but not by default on Windows. On the other hand, Chrome has adopted this as default behaviour even on Windows, so I guess Edge has got it now too.
extra88 5y ago
> You know you can scroll to the left and right really easily if you hold down shift? You can scroll left and right easily, not everyone can. Avoiding the need to scroll in two directions makes content more usable to everyone but there's also a WCAG criterion about it. https://www.w3.org/WAI/WCAG21/Understanding/reflow https://www.w3.org/WAI/WCAG21/Understanding/reflow
- burnished 5y ago
  That line was tongue in cheek, I believe. Nice of you to share that link though.
robertoandred 5y ago
You should be setting image widths/max-widths in CSS to avoid layout problems due to unknowns like intrinsic image dimensions.

ofrzeta 5y ago

That's good advice. It's also a kind of zen-like approach (forgive me if I am not referring to it by the book). In the past I used to fight CSS by setting all kinds of attributes until it looked half-decent. Now I feel much better by cutting back and lettings the layout engine do its work as you said. Turns out to work better on mobile, too. (Ok let's forget about the dirty media query hacks to shift the last pixels. Move them to a dirty.css and enjoy your other clean stylesheets).

madeofpalk 5y ago

> you want to step back and understand where its current width is coming from This touches on my key insight with CSS (and programming in general), in that if you have a problem with your page layout, that probably probably exists in the code you’re already written, so adding more code on top will only make things more difficult. Step back, understand exactly why the layout is acting why it is, and address that problem rather than just monkey patching a hack on top.

blacktriangle 5y ago
The problem there is that you're now refactoring a bunch of code that is working on the other 99% of your pages. This model is great, but in CSS when doing this in order to fix your current problem, you are almost guarenteed to break other layouts elsewhere, and very very few people are using automated view testing to see if layouts break. I think this is the core reason why functional CSS is growing, because by separating out your layouts from each other, one can actually approach CSS refactoring this way without worrying about breaking other pages.

bzzzt 5y ago

The reason lots of developers hate CSS is not because they ended up in a "quagmire of constraints", but in a quagmire of previous developer's constraint...

andrei_says_ 5y ago

I really like the ITCSS approach - you define your rules the way you’d create a sculpture out of granite. Start by taking a granite block out of the quarry / define the most common rules with widest coverage, then gradually carve the largest details / more specialized rules and then focus on the details. This way you work with the cascade, as CSS was designed. Defining sensible defaults and then having a few utility classes for layout helps with this. You could follow it BEM for the rest. This structure results in minimal CSS that doesn’t fight itself.