6 ms·

Having worked in multiple platforms — web, native desktop and mobile, it still amazes me how far ahead CSS is as a styling paradigm in terms of expressiveness a

Having worked in multiple platforms — web, native desktop and mobile, it still amazes me how far ahead CSS is as a styling paradigm in terms of expressiveness and power! Infact, it's the best language for styling content ever created. Think about this the next time you have to create a couple of XML files just to get round corners and shadows in Android.

pjmlp 5y ago
Given the power of XAML styles and templates I respectfully disagree.
- tasogare 5y ago
  Yes, XAML was (is?) quite nice to create interfaces, with notably grid and components support years before CSS got them. It has its pain points (including the different incompatible implementations) but I always did somewhat OK designs faster with it than I ever did with CSS. Android AXML is indeed a (bad) joke though.
habosa 5y ago
+100. I did Android dev for like ~7 years and recently have been doing more Web dev. Yes CSS is a tricky language but I always get where I am going. On Android I frequently have to give up and settle for a more vanilla style because what I want to do will require like 1000 lines of code copied from StackOverflow. Even something as simple as "A rounded EditText with inset shadow" is hours of work. With CSS that's two lines.
- toyg 5y ago
  Two lines today. CSS has come a loooong way... One could argue that the main advantage of CSS is that is a living standard, constantly adding and improving features and seeing a competition between implementations; whereas more traditional technologies are typically mono-vendor and, for one reason or another, have long stagnated.
  - Aeolun 5y ago
    To be fair, if you wanted to implement it before CSS support, I think you’d have a hard time reaching 1000 lines to do it. 50ish maybe (in JS and HTML).
- davidwparker 5y ago
  I'd suggest checking out Flutter if you're doing mobile dev (or at least Android). It makes styling ridiculously easy.
  - habosa 5y ago
    Agreed! The beauty-per-effort-unit on Flutter is so high. There's a reason that Android's new UI framework looks a lot like Flutter widgets!
wruza 5y ago
Compared to other half-assed declarative formats? Yes. Try covering dynamic-sized image with an svg surface. Try outlining a hovered element so that outline/shadow covers other items around. Try to baseline align text in non-shallow div hierarchy (which is required to workaround other issues). When there is a moderate visual requirement I’d better mess around with something like GTK+/Cairo, NSView or QPainter rather than pulling hairs at CSS trying to slap few incompatible js-y solutions into one big ball of bs.
- vagrantJin 5y ago
  > Try covering dynamic-sized image with an svg surface. Try outlining a hovered element so that outline/shadow covers other items around. I'd appreciate a visual example of what you are talking about. Seems like a far fetched, obscure-as-hell example to use as an argument. A strawman as they would say. CSS isn't perfect but it's pretty damn powerful for something I can teach a 9 year old. We can certainly get a lot of work done within CSS's limits. For the auto-generated billion div soup, god speed and good luck.
  - chrismorgan 5y ago
    Nah, these aren’t obscure at all. Covering a image with something (whether SVG or not) is very common, though most of the time the image’s size will be known, or at least known in one axis. We’re talking things like putting captions on top of images. Needing hover effects to render on top of elements around is even more common—if you want a row of buttons that share borders, by far the easiest way involves this very situation. Example where `position:relative` does the magic: data:text/html,<style>button{border:2px solid red}button:is(:hover,:focus,:active){border-color:lime;position:relative}button+button{margin-left:-2px}</style><button>ⅰ</button><button>ⅱ</button><button>ⅲ</button>
    - onethought 5y ago
      If it's very common... how is it difficult?
austincheney 5y ago
Just providing an example of a CSS styled XML file: http://mailmarkup.org/mail-documentation.xsd http://mailmarkup.org/mail-documentation.xsd
bjornjajayaja 5y ago
The problem with CSS has historically been browser conformance—naturally there’s been some workarounds. However, CSS has been a success because of its ubiquity. However, it is somewhat limited in its extensibility. For app development I really appreciate Qt Quick QML as it’s really nice language for UI development, but also highly extensible. Granted, different use case than CSS in ways.
- rchaud 5y ago
  Bootstrap was effectively the jQuery for CSS, in terms of standardizing what layouts looked like across all browsers. It gets a bad rap because it's so easy to use for non-designers that a lot of sites that use it don't bother customizing the UI elements like buttons or expand/collapse accordions etc. Or the layout of the page, for that matter. The famous "Every Bootstrap website ever"[0] site outlines this nicely: [0] https://www.dagusa.com/ https://www.dagusa.com/
dsego 5y ago
Cute, can I have tabs with equal widths based on the longest tab, without knowing the exact number of tabs?
- JoeCianflone 5y ago
  No. Ut I’d tell a designer that’s a stupid design and we can get pretty close to it if they really wanted it but overflows will make it look ugly depending on where they want this magic unlimited tab box.
- mondaygreens 5y ago
  Yes you can: https://wt5hp.csb.app/ https://wt5hp.csb.app/ (implemented in pure CSS, with some JS to demonstrate that it works)
  - dsego 5y ago
    Thanks! And darn, I forgot about css grid. I think this example wasn't possible with flexbox a few years ago.

pjmlp 5y ago

Given the power of XAML styles and templates I respectfully disagree.

tasogare 5y ago
Yes, XAML was (is?) quite nice to create interfaces, with notably grid and components support years before CSS got them. It has its pain points (including the different incompatible implementations) but I always did somewhat OK designs faster with it than I ever did with CSS. Android AXML is indeed a (bad) joke though.

habosa 5y ago

+100. I did Android dev for like ~7 years and recently have been doing more Web dev. Yes CSS is a tricky language but I always get where I am going. On Android I frequently have to give up and settle for a more vanilla style because what I want to do will require like 1000 lines of code copied from StackOverflow. Even something as simple as "A rounded EditText with inset shadow" is hours of work. With CSS that's two lines.

toyg 5y ago
Two lines today. CSS has come a loooong way... One could argue that the main advantage of CSS is that is a living standard, constantly adding and improving features and seeing a competition between implementations; whereas more traditional technologies are typically mono-vendor and, for one reason or another, have long stagnated.
- Aeolun 5y ago
  To be fair, if you wanted to implement it before CSS support, I think you’d have a hard time reaching 1000 lines to do it. 50ish maybe (in JS and HTML).
davidwparker 5y ago
I'd suggest checking out Flutter if you're doing mobile dev (or at least Android). It makes styling ridiculously easy.
- habosa 5y ago
  Agreed! The beauty-per-effort-unit on Flutter is so high. There's a reason that Android's new UI framework looks a lot like Flutter widgets!

wruza 5y ago

Compared to other half-assed declarative formats? Yes. Try covering dynamic-sized image with an svg surface. Try outlining a hovered element so that outline/shadow covers other items around. Try to baseline align text in non-shallow div hierarchy (which is required to workaround other issues). When there is a moderate visual requirement I’d better mess around with something like GTK+/Cairo, NSView or QPainter rather than pulling hairs at CSS trying to slap few incompatible js-y solutions into one big ball of bs.

vagrantJin 5y ago
> Try covering dynamic-sized image with an svg surface. Try outlining a hovered element so that outline/shadow covers other items around. I'd appreciate a visual example of what you are talking about. Seems like a far fetched, obscure-as-hell example to use as an argument. A strawman as they would say. CSS isn't perfect but it's pretty damn powerful for something I can teach a 9 year old. We can certainly get a lot of work done within CSS's limits. For the auto-generated billion div soup, god speed and good luck.
- chrismorgan 5y ago
  Nah, these aren’t obscure at all. Covering a image with something (whether SVG or not) is very common, though most of the time the image’s size will be known, or at least known in one axis. We’re talking things like putting captions on top of images. Needing hover effects to render on top of elements around is even more common—if you want a row of buttons that share borders, by far the easiest way involves this very situation. Example where `position:relative` does the magic: data:text/html,<style>button{border:2px solid red}button:is(:hover,:focus,:active){border-color:lime;position:relative}button+button{margin-left:-2px}</style><button>ⅰ</button><button>ⅱ</button><button>ⅲ</button>
  - onethought 5y ago
    If it's very common... how is it difficult?

austincheney 5y ago

Just providing an example of a CSS styled XML file: http://mailmarkup.org/mail-documentation.xsd http://mailmarkup.org/mail-documentation.xsd

bjornjajayaja 5y ago

The problem with CSS has historically been browser conformance—naturally there’s been some workarounds. However, CSS has been a success because of its ubiquity. However, it is somewhat limited in its extensibility. For app development I really appreciate Qt Quick QML as it’s really nice language for UI development, but also highly extensible. Granted, different use case than CSS in ways.

rchaud 5y ago
Bootstrap was effectively the jQuery for CSS, in terms of standardizing what layouts looked like across all browsers. It gets a bad rap because it's so easy to use for non-designers that a lot of sites that use it don't bother customizing the UI elements like buttons or expand/collapse accordions etc. Or the layout of the page, for that matter. The famous "Every Bootstrap website ever"[0] site outlines this nicely: [0] https://www.dagusa.com/ https://www.dagusa.com/

dsego 5y ago

Cute, can I have tabs with equal widths based on the longest tab, without knowing the exact number of tabs?

JoeCianflone 5y ago
No. Ut I’d tell a designer that’s a stupid design and we can get pretty close to it if they really wanted it but overflows will make it look ugly depending on where they want this magic unlimited tab box.
mondaygreens 5y ago
Yes you can: https://wt5hp.csb.app/ https://wt5hp.csb.app/ (implemented in pure CSS, with some JS to demonstrate that it works)
- dsego 5y ago
  Thanks! And darn, I forgot about css grid. I think this example wasn't possible with flexbox a few years ago.