4 ms·

I like Mr. Victor a lot but I'm not sure I agree. I think the way CSS is implemented either doesn't jive with the paradigms many programmers use to approach pr

I like Mr. Victor a lot but I'm not sure I agree. I think the way CSS is implemented either doesn't jive with the paradigms many programmers use to approach problems or perhaps it is just laziness? I meet a lot of programmers who are generally pretty smart and capable completely throw up their hands when it comes to laying out HTML via CSS. It's just rectangles being displayed on rectangles. It's nothing complex like displaying three or >3 dimensional information on a manifold. I am confident I could layout anything anyone threw at me, and CSS is just something I've picked up over the years.

notduncansmith 12y ago
I'm with you - I've never understood the confusion about CSS. There are some more complicated tasks than would initially, appear, but once you grok the box model (and it's not hard) then it's pretty easy - and just use a framework for your column layout, no point in trying to reinvent Bootstrap/Foundation/[literally tens of grid frameworks]. Anything else you can't figure out, Google it.
- girvo 12y ago
  There are some things a designer will throw at you that are very very difficult to achieve in CSS in any regular way (sans non-cross-browser-compatible hacks). But for the most part, CSS isn't too bad.
  - notduncansmith 12y ago
    I've yet to run into those, but then again I am my company's primary designer, as well as implementing whatever I design. Perhaps as a product of that, I don't end up having to code up (m)any ridiculous designs.
    - thisone 12y ago
      I believe that's your answer. When you work with print designers who have moved to web design, but don't know thing 1 about css or html, you get some funky designs. Really nice designs, but complicated PITAs to actually develop
lobster_johnson 12y ago
It's not that it's difficult, really, but the tools are incredibly underpowered. For example: * How do you vertically center an arbitrary element inside another where you don't know the height of any of them? Answer: The only reliable way is via "display: table-cell". It has several annoying limitations. * How do you ensure that several horizontally adjacent boxes fill the width of the container and are all of equal height, regardless of their contents? Answer: Table again, but it's not always possible without JS because of how height percentages are calculated. (Also, all browsers including Chrome implement "height: 100%" differently.) * How, given N elements arranged horizontally next to each other, do you ensure that they (1) fill the width of the container, (2) if they become too narrow (ie. min-width), any element(s) that don't fit will wrap below? (Note: Rule #1 must apply; when one element doesn't fit, the preceding "line" must expand to fit the full width of the container.) Answer: Not possible in CSS alone. * How do you ensure that an element (eg., an image) of arbitrary width is always has the same height as it's width? (For example, imagine a grid which should expand to fit the window, and all cells should be quadratic.) Answer: With images, possible with an unintuitive "height: 0; padding-bottom: 100%" hack, not for other elements without JS. * How do you center an absolutely positioned element of arbitrary width and height (think tooltip or speech balloon)? Answer: JS. * How do absolutely position an element without specifying a width, so that the width becomes the minimum needed to display all of its contents up to a max-width? For example, a box saying "Hello" should take up the space required by that word and no more. Answer: Not possible in CSS alone, although you would have thought that "display: inline-block" would work. Firefox actually does it, Chrome/WebKit don't. * How do you have an absolute element be the same width as another element? For example, a drop down menu should be at least the width of its menu item, and an autocomplete box should at least be the width of its input box. Answer: JS. * How do ensure a label is vertically centered on the same text baseline as an adjacent textarea? Answer: Textareas are considered blocks, not text, so you cannot without computing the baseline and using padding or negative margins, and that is imprecise. These are just a few basic real-world layout challenges. They should not be challenges, they should be simple to implement, but CSS doesn't help; it gets in the way more than it aids. In some cases, inconsistent browser implementations result in wildly different rendering. The result is JavaScript to fill the holes, and sometimes just to say "screw this, I will do in code".
- 12y ago
ux-app 12y ago
layouts in CSS are easy while relationships between elements are simple. CSS is a poor solution for layouts that require complex constraints between elements that have no direct child/parent or sibling relationship. Think application layout as opposed to brochure website layout. Also, CSS is quite silly. Why do I set margin:auto when I want to horizontally center something? The tricks we all learn to muscle CSS into doing what we want require a ridiculous kind of mental gymnastics. Layout should be declarative and separated from simple presentation such as color etc. Another fault of CSS is its relationship to HTML source order. This makes designs inherently brittle in the sense that simple HTML changes can require a CSS overhaul. CSS selectors also have their issues. Yes they're powerful and can be used to great effect, but there are holes such as no parent selectors. Here's an interesting proposal that hilights the usefulness of this feature [2] As soon as we reach the limitation of CSS (and in a complex application layout you'll reach them quickly) then you have to reach for JS and basically create your own little layout engine! The people developing GridStyleSheets [1] are on to a really good thing. They are working on a JS adaptation of the Cassowary constraint solver (the same one used in Apple's autolayout feature). If you're interested in finding out more, check out their website. They do a good job of illustrating CSS's shortcomings and they have a working solution to address these issues. [1] http://gridstylesheets.org/ http://gridstylesheets.org/ [2] http://shauninman.com/archive/2008/05/05/css_qualified_selectors http://shauninman.com/archive/2008/05/05/css_qualified_selec...

notduncansmith 12y ago

I'm with you - I've never understood the confusion about CSS. There are some more complicated tasks than would initially, appear, but once you grok the box model (and it's not hard) then it's pretty easy - and just use a framework for your column layout, no point in trying to reinvent Bootstrap/Foundation/[literally tens of grid frameworks]. Anything else you can't figure out, Google it.

girvo 12y ago
There are some things a designer will throw at you that are very very difficult to achieve in CSS in any regular way (sans non-cross-browser-compatible hacks). But for the most part, CSS isn't too bad.
- notduncansmith 12y ago
  I've yet to run into those, but then again I am my company's primary designer, as well as implementing whatever I design. Perhaps as a product of that, I don't end up having to code up (m)any ridiculous designs.
  - thisone 12y ago
    I believe that's your answer. When you work with print designers who have moved to web design, but don't know thing 1 about css or html, you get some funky designs. Really nice designs, but complicated PITAs to actually develop

lobster_johnson 12y ago

It's not that it's difficult, really, but the tools are incredibly underpowered. For example: * How do you vertically center an arbitrary element inside another where you don't know the height of any of them? Answer: The only reliable way is via "display: table-cell". It has several annoying limitations. * How do you ensure that several horizontally adjacent boxes fill the width of the container and are all of equal height, regardless of their contents? Answer: Table again, but it's not always possible without JS because of how height percentages are calculated. (Also, all browsers including Chrome implement "height: 100%" differently.) * How, given N elements arranged horizontally next to each other, do you ensure that they (1) fill the width of the container, (2) if they become too narrow (ie. min-width), any element(s) that don't fit will wrap below? (Note: Rule #1 must apply; when one element doesn't fit, the preceding "line" must expand to fit the full width of the container.) Answer: Not possible in CSS alone. * How do you ensure that an element (eg., an image) of arbitrary width is always has the same height as it's width? (For example, imagine a grid which should expand to fit the window, and all cells should be quadratic.) Answer: With images, possible with an unintuitive "height: 0; padding-bottom: 100%" hack, not for other elements without JS. * How do you center an absolutely positioned element of arbitrary width and height (think tooltip or speech balloon)? Answer: JS. * How do absolutely position an element without specifying a width, so that the width becomes the minimum needed to display all of its contents up to a max-width? For example, a box saying "Hello" should take up the space required by that word and no more. Answer: Not possible in CSS alone, although you would have thought that "display: inline-block" would work. Firefox actually does it, Chrome/WebKit don't. * How do you have an absolute element be the same width as another element? For example, a drop down menu should be at least the width of its menu item, and an autocomplete box should at least be the width of its input box. Answer: JS. * How do ensure a label is vertically centered on the same text baseline as an adjacent textarea? Answer: Textareas are considered blocks, not text, so you cannot without computing the baseline and using padding or negative margins, and that is imprecise. These are just a few basic real-world layout challenges. They should not be challenges, they should be simple to implement, but CSS doesn't help; it gets in the way more than it aids. In some cases, inconsistent browser implementations result in wildly different rendering. The result is JavaScript to fill the holes, and sometimes just to say "screw this, I will do in code".

12y ago

ux-app 12y ago

layouts in CSS are easy while relationships between elements are simple. CSS is a poor solution for layouts that require complex constraints between elements that have no direct child/parent or sibling relationship. Think application layout as opposed to brochure website layout. Also, CSS is quite silly. Why do I set margin:auto when I want to horizontally center something? The tricks we all learn to muscle CSS into doing what we want require a ridiculous kind of mental gymnastics. Layout should be declarative and separated from simple presentation such as color etc. Another fault of CSS is its relationship to HTML source order. This makes designs inherently brittle in the sense that simple HTML changes can require a CSS overhaul. CSS selectors also have their issues. Yes they're powerful and can be used to great effect, but there are holes such as no parent selectors. Here's an interesting proposal that hilights the usefulness of this feature [2] As soon as we reach the limitation of CSS (and in a complex application layout you'll reach them quickly) then you have to reach for JS and basically create your own little layout engine! The people developing GridStyleSheets [1] are on to a really good thing. They are working on a JS adaptation of the Cassowary constraint solver (the same one used in Apple's autolayout feature). If you're interested in finding out more, check out their website. They do a good job of illustrating CSS's shortcomings and they have a working solution to address these issues. [1] http://gridstylesheets.org/ http://gridstylesheets.org/ [2] http://shauninman.com/archive/2008/05/05/css_qualified_selectors http://shauninman.com/archive/2008/05/05/css_qualified_selec...