6 ms·

Some quick rants. CSS is almost as bad as PHP when it comes to naming. Most flex related properties are prefixed with flex-; but some aren't (align-items, etc)

Some quick rants. CSS is almost as bad as PHP when it comes to naming. Most flex related properties are prefixed with flex-; but some aren't (align-items, etc) so you now have tons of non prefixed properties that actually only work within a very specific context (vertical-align, etc) and there are no compilers to tell you which combinations don't make sense or whether you have redundant properties. IE11 has tons of bugs with flexbox; I had to remove a flexbox layout earlier because of that crappy browser (it ignores explicit/inline width/height set on flex children). Otherwise it's a great tool if used sparingly (heavily nested flexbox elements with lots of special properties start to become a bit hard to follow)

soperj 9y ago
For me the worst bugs have been in Safari by far.
pfooti 9y ago
I just assumed the naming thing was for properties shared between grid and flexbox (such as align-items). It is still pretty frustrating to remember that kind of stuff though.
andrei_says_ 9y ago
Having a significant amount of visitors using ie10 & ie11 rules flexbox out for me. So I use Susy grid system (2) and absolutely love it.
- 28inch 9y ago
  I`m using flexbox heavily on 10mill+ pw site for 2 years now. we had a lot of issues at first but after learning the quirks those faded out. nothing came up in the last 6 months.
  - andrei_says_ 9y ago
    I’d be curious to see what issues did you deal with and the workarounds which solved them. Is thawed any way you could share?
dbbk 9y ago
> Most flex related properties are prefixed with flex-; but some aren't (align-items, etc) If I remember correctly that is intentional because properties like align-items are going to be added to non-flex containers in the future. Look up Box Alignment.
- dawnerd 9y ago
  And you know, the article even says pretty much this. Flex and grid both use it.
baybal2 9y ago
>CSS is almost as bad as PHP when it comes to naming It took browsermakers 1O OR SO YEARS! to agree on complete flexbox spec and completely implement it. People who were in touch with w3c process whom I knew, tell that at some times a whole meetings were spent arguing over a nothing more than a naming convention for single CSS property, or whether flexbox will be able to align element position on integers
lwansbrough 9y ago
I was using VS Code earlier today and used vertical-align in some case where it didn’t make sense and VS called it out. Such things do exist! But I agree with your points. Despite its flaws, it is probably the best thing out there for creating visual layouts from code.
- sillysaurus3 9y ago
  Webstorm is absolutely incredible. Everyone should try it. Seriously, `cd your-app && brew cask install webstorm && webstorm .` Best IDE ever. Better than emacs. And I've loved emacs for a couple years, and Vim for 10 years before that. Webstorm even comes with a Vim plugin. IntelliJ is really rocking it. Webstorm for webdev, Cursive for clojure (https://cursive-ide.com/ https://cursive-ide.com/), PyCharm for python (https://www.jetbrains.com/pycharm/ https://www.jetbrains.com/pycharm/)... every one of those IDEs feels amazing out of the box. It sounds dumb, but just try it. You'll get hooked on Webstorm and never want to go back. Example: press shift twice. It pops up a "Search Everywhere" box, and you can type filenames, symbol names, actions (Rename, etc)... it's basically helm M-x, but way better. You won't ever feel like "CSS names are bad!" because you won't ever need to remember anything. Want to center something? Just type "align" and usually webstorm pops up autocomplete with the right thing. And that's true in every context: https://i.imgur.com/jCAAesF.png https://i.imgur.com/jCAAesF.png All of these IDEs are specializations of IntelliJ IDEA (https://www.jetbrains.com/idea/download/#section=mac https://www.jetbrains.com/idea/download/#section=mac). They specialize it for web and call it WebStorm, for Python and call it PyCharm, etc. But all the plugins and settings work in all the IDEs, so really the underlying awesomeness is IDEA. At this point I trust IDEA enough to know that if I open any codebase, I can start navigating it right away. Doesn't matter if it's C++, ocaml, or VueJS. Typing shift-shift will always let me jump to definitions. Yeah it costs money, but $13/mo is super reasonble. Dropbox was similarly impactful on my life, and that was $10/mo.
  - SippinLean 9y ago
    >a "Search Everywhere" box, and you can type filenames, symbol names, actions >Just type "align" and usually webstorm pops up autocomplete with the right thing VS Code does both of these things, and is FOSS
anon335dtzbvc 9y ago
"and there are no compilers to tell you which combinations don't make sense" well thats not quiet true, in purescript you can write type-safe CSS checked at compile time https://pursuit.purescript.org/packages/purescript-css/3.3.0/docs/CSS https://pursuit.purescript.org/packages/purescript-css/3.3.0...
- kccqzy 9y ago
  Does it tell you that align-items by itself doesn’t make sense regardless of the value, of the element isn’t otherwise set to use display: flex or grid?
  - teleclimber 9y ago
    I don't know the answer, but I'd be surprised if it did. I've also been very frustrated by CSS due to 1) its lack warnings and debug errors as mentioned above, and 2) that so many properties have side-effects (like setting an element to display:flex changes the auto value of min-width for all its children[1]). I've started working on something to help with this, but it's a long way off (and it may not work at all). [1] https://www.w3.org/TR/css-flexbox-1/#min-size-auto https://www.w3.org/TR/css-flexbox-1/#min-size-auto

soperj 9y ago

For me the worst bugs have been in Safari by far.

pfooti 9y ago

I just assumed the naming thing was for properties shared between grid and flexbox (such as align-items). It is still pretty frustrating to remember that kind of stuff though.

andrei_says_ 9y ago

Having a significant amount of visitors using ie10 & ie11 rules flexbox out for me. So I use Susy grid system (2) and absolutely love it.

28inch 9y ago
I`m using flexbox heavily on 10mill+ pw site for 2 years now. we had a lot of issues at first but after learning the quirks those faded out. nothing came up in the last 6 months.
- andrei_says_ 9y ago
  I’d be curious to see what issues did you deal with and the workarounds which solved them. Is thawed any way you could share?

dbbk 9y ago

> Most flex related properties are prefixed with flex-; but some aren't (align-items, etc) If I remember correctly that is intentional because properties like align-items are going to be added to non-flex containers in the future. Look up Box Alignment.

dawnerd 9y ago
And you know, the article even says pretty much this. Flex and grid both use it.

baybal2 9y ago

>CSS is almost as bad as PHP when it comes to naming It took browsermakers 1O OR SO YEARS! to agree on complete flexbox spec and completely implement it. People who were in touch with w3c process whom I knew, tell that at some times a whole meetings were spent arguing over a nothing more than a naming convention for single CSS property, or whether flexbox will be able to align element position on integers

lwansbrough 9y ago

I was using VS Code earlier today and used vertical-align in some case where it didn’t make sense and VS called it out. Such things do exist! But I agree with your points. Despite its flaws, it is probably the best thing out there for creating visual layouts from code.

sillysaurus3 9y ago
Webstorm is absolutely incredible. Everyone should try it. Seriously, `cd your-app && brew cask install webstorm && webstorm .` Best IDE ever. Better than emacs. And I've loved emacs for a couple years, and Vim for 10 years before that. Webstorm even comes with a Vim plugin. IntelliJ is really rocking it. Webstorm for webdev, Cursive for clojure (https://cursive-ide.com/ https://cursive-ide.com/), PyCharm for python (https://www.jetbrains.com/pycharm/ https://www.jetbrains.com/pycharm/)... every one of those IDEs feels amazing out of the box. It sounds dumb, but just try it. You'll get hooked on Webstorm and never want to go back. Example: press shift twice. It pops up a "Search Everywhere" box, and you can type filenames, symbol names, actions (Rename, etc)... it's basically helm M-x, but way better. You won't ever feel like "CSS names are bad!" because you won't ever need to remember anything. Want to center something? Just type "align" and usually webstorm pops up autocomplete with the right thing. And that's true in every context: https://i.imgur.com/jCAAesF.png https://i.imgur.com/jCAAesF.png All of these IDEs are specializations of IntelliJ IDEA (https://www.jetbrains.com/idea/download/#section=mac https://www.jetbrains.com/idea/download/#section=mac). They specialize it for web and call it WebStorm, for Python and call it PyCharm, etc. But all the plugins and settings work in all the IDEs, so really the underlying awesomeness is IDEA. At this point I trust IDEA enough to know that if I open any codebase, I can start navigating it right away. Doesn't matter if it's C++, ocaml, or VueJS. Typing shift-shift will always let me jump to definitions. Yeah it costs money, but $13/mo is super reasonble. Dropbox was similarly impactful on my life, and that was $10/mo.
- SippinLean 9y ago
  >a "Search Everywhere" box, and you can type filenames, symbol names, actions >Just type "align" and usually webstorm pops up autocomplete with the right thing VS Code does both of these things, and is FOSS

anon335dtzbvc 9y ago

"and there are no compilers to tell you which combinations don't make sense" well thats not quiet true, in purescript you can write type-safe CSS checked at compile time https://pursuit.purescript.org/packages/purescript-css/3.3.0/docs/CSS https://pursuit.purescript.org/packages/purescript-css/3.3.0...

kccqzy 9y ago
Does it tell you that align-items by itself doesn’t make sense regardless of the value, of the element isn’t otherwise set to use display: flex or grid?
- teleclimber 9y ago
  I don't know the answer, but I'd be surprised if it did. I've also been very frustrated by CSS due to 1) its lack warnings and debug errors as mentioned above, and 2) that so many properties have side-effects (like setting an element to display:flex changes the auto value of min-width for all its children[1]). I've started working on something to help with this, but it's a long way off (and it may not work at all). [1] https://www.w3.org/TR/css-flexbox-1/#min-size-auto https://www.w3.org/TR/css-flexbox-1/#min-size-auto