5 ms·

People underrate how much good stuff CSS gives you for building UIs. If you did everything in canvas you’d just have to reimplement something like flexbox to c

People underrate how much good stuff CSS gives you for building UIs. If you did everything in canvas you’d just have to reimplement something like flexbox to center, align, stretch, and animate all your icons text, boxes, buttons, etc. Why not just stay in HTML and use a layout engine that’s already implemented, and highly optimized for literally every platform.?

toastal 3y ago
Most folks seem adverse to learning CSS. In contemporary times they’ll go as far as to add 44 cryptic utility class names to element to avoid writing a line of the stuff.
- tomelders 3y ago
  It boggles my mind. CSS isn’t hard anymore.
  - zith 3y ago
    What is the best way of learning modern css?
    - 0wis 3y ago
      Interested too. I did several full courses and exercises on it (Freecodecamp, W3, Mdn, Codepip…) and I still struggle a lot to create clear UI and have each HTML element where I want them. I am looking at CSS frameworks (BEM, Tailwind) but I would like to master « vanilla » CSS.
      - toastal 3y ago
        It’s not a direct method, but really, you should try a) study the source code of the big ‘frameworks’ such as Bootstrap (especially if you dig into the comments & issues / patches that fixed worse practices with better practices) & b) hit F12 to start inspecting sites that are doing things interesting that you’d like to know about (but keep in mind they might not be experts & how you might improve it).
    - kekub 3y ago
      I recently enjoyed reading https://every-layout.dev https://every-layout.dev. Even though I considered myself to be quite good at CSS, some of the ideas covered in that book (like thinking about how big your elements should be and let the browser handle the breaking instead of relying on media queries) was eye opening for me.
    - DustinBrett 3y ago
      By having a reason to use it. Make something cool and complex and don't shy away from edge cases and best practices. Strive to improve every day and you will learn.
  - mcfedr 3y ago
    Was it ever hard? Most of those utility classes have always been a line of CSS away
    - deaddodo 3y ago
      It was tedious, sure. CSS2, especially, was just powerful enough but unstandardized enough that nothing worked quite right universally. Now, I can jump into CSS3 and throw a flexbox down or a grid and just tell it exactly what I want, in 1/8 the code and it'll work across all major browsers.
    - Minor49er 3y ago
      Alignment used to be a big problem with CSS. Before improvements like flexbox and grid, people used to struggle to do basic alignment, like horizontal or vertical centering, or simply spacing items apart. There were a lot of (ab)uses of floats, tables, and relative/absolute positioning used for layout IE, Chrome, Firefox, and Opera had their own separate rendering engines. IE was also notorious for running with "quirks mode" out of the box which basically meant that IE was render pages in a non-standard way by default It was possible to develop things correctly, of course. But resources, both in terms of availability of documentation as well as time, were not as easy to find as they are today
- ookblah 3y ago
  i know it's in semi-jest, but what a non-argument lol. 44 util classes just to not learn the one line on which those utility classes are based on? if you want to hate on these types of things you can at least have a point of view that makes sense. tired of people who've never seemed to use CSS beyond some pet project or stuck in early 2000s (all frameworks are dumb!) mindset make the wrong arguments over and over again.
  - sirsinsalot 3y ago
    Not defending OPs POV but you're reading between the lines an awful lot and making value judgements. Perhaps they use frameworks and write CSS at scale. You don't know and failed to enquire, instead becoming defensive and robbing the circumstance of the chance for productive conversation. Shame.
    - ookblah 3y ago
      lol what? op is the one insinuating anyone using utility classes are ones that don't bother to learn a line of CSS which is untrue, so I find it curious your criticism is directed solely at me. Value judgement for value judgement, I'd say the snark both ways is pretty fair. More than welcome to explain their pov.
  - toastal 3y ago
    Utility classes are meant for utility purposes, not to replace CSS, but you see so many projects out in the wild now terrified to have a classname that’s relevant to the topic which makes it harder to organize, but also harder to select for userStyles, filter lists, etc. (i.e. if you make a FooWidget, add the .FooWidget class so real folks can read/parse thru the code easier for their needs …or just for their knowledge of what others are doing, and maybe actually put some styles on that bad boy instead of every property being behind a util). I have spoken with some engineers that only know how to speak Bootstrap or Tailwind, & not a lick of CSS. This isn’t just 2000s thinking to consider pumping the brakes a little as utilities at this point have definitely blown out into ‘overuse’ & ‘overreliance’, but these things come in cycles with a new idea taken to an extreme before we swing back to only semantic markup & selectors on element names again before the next pendulum swing. Even still, utilities aren’t a new idea, but just part of how reusable classes in CSS can just work – and rolling out with massive block of utility CSS that are mapped one-to-one with a single property is in the ‘smell’ territory.
- no_wizard 3y ago
  Its a symptom of several things by my anecdotal estimation - Bootcamps & self learning resources don't emphasize CSS. JavaScript gets you hired. A huge amount of web developers in the last 5-7 years came out of bootcamps and career switchers self learning, and the resources available overwhelmingly focus on frameworks and JavaScript, to the point that I've been in interviews where someone can give really good answers if the answer is framework specific but they don't basics like `call` or `bind`. - See previous comment. JavaScript gets you hired. Rarely, if ever, have I seen candidates get rejected because they lacked proper CSS knowledge nor have I seen it be appreciated on the same level as having "deep" JavaScript knowledge - CSS isn't programmatic[0] like JavaScript. The rules are different, and more fuzzy. Its one of its strengths, but its also a bit of a weakness, as you can't simply algorithmically design something and test its outcomes. You have to understand spatial concepts like placement and understand how to design / create with tools that have multiple different ways of achieving the same outcome alot (but not always). CSS does have more "exceptions to the rule" than JavaScript does. - In many ways, it doesn't help that CSS has had no API culling. IE, we know that flexbox / grid are much preferable but many developers don't grok things like when you should use negative margin, border vs outline, or proper usage of media queries. Then you have things like color formats, e.g. HEX vs RGBA vs HSLA. Which one is "better" isn't obvious to many. There's alot of CSS features like this. - In many ways, CSS has a bigger surface area, a much more expansive API, and way less backing documentation from the community. MDN is pretty good, but its not exhaustive (nor could it ever be, really) to every situation. - The reliance on CSS frameworks / generators. I think a big part of the popularity of things like Tailwind is you can just "try until it works the way you want" by throwing combinations of different classes together that a developer may semi-understand should work together until something happens, basically, which side steps having to have deep knowledge of CSS in many ways, or take bootstrap. Bootstrap made it easy to build websites following a formula. There are many other examples of this. - Developers really don't understand how to properly leverage the cascade. The industry general notion is "avoid it at all costs" because the same thought that goes into organizing your logic (JavaScript) isn't given to CSS. There's really bad hygiene practices in our industry with regards to CSS and its derivatives (SASS, LESS) [0]: I realize CSS is turing complete if you abuse custom properties a certain way or with the recent addition of container queries you could model this as well. I'm talking about it more in the way that CSS isn't like JavaScript, in that you have no familiar programming constructs (like if statements, for loops etc). Yes, I understand in the most literal sense, CSS is technically a programming language, but in practice, I don't think it is (at least, not yet)
giamma 3y ago
Also, if you build everything in canvas, good luck making your UI accessible and screen-reader friendly
firtoz 3y ago
Obviously we need to write a rust based minimal but compatible rewrite of css engine but in canvas
zero_shift 3y ago
I have had to do similar, but in SVG. Back in the days before flexbox I had a project that needed to print colour reports in IE7+. Browser print removes background colours except for web graphics, so SVG can be used as a workaround. However, IE supported only it's own weird fork of SVG called VML. This was how I ended up writing flexbox like layout code for SVG with a VML bridge. Was a good project as a junior developer.
talkingtab 3y ago
There should be a name for the syndrome of being familiar with something to the point of not being able to see it anymore. When I try to talk about some of the things I am very familiar with, then I often can't explain them. Like JavaScript. I use it all the time. 'this' anyone? '==!'? 'bind'? It is so easy once you have submerged yourself in it. But when I try to explain what these things are to a person learning JavaScript, I am vaguely aware that I sound like a lunatic. Perhaps 'koolaid syndrome'. I am not stupid - C, Java, nginix, streams, tcp slow start, NBP, etc. But CSS has always been hard for me. 'float'? 'block-inline'? <div/> vs <p/>? Eh? Rem's and em's, %, and px's Oh My! One of the things that helped was to understand that CSS is a _layout_ engine. It takes a list of elements and plunks them into a container. In prehistoric times (BG - before grid) you needed to float things. So yes, CSS is very capable. And there are some things that would be much harder to write with Canvas or Threejs. But if I didn't already have CSS koolaid syndrome, I wonder if ....
- sshine 3y ago
  There's a spectrum between being able to give a lecture without preparation at a moment's notice, and having to look up how every single time. I have to re-learn CSS every two years, since I might not do front-end development for a year. But I'm pretty happy to do so, because the best way sometimes changes. I never get very good.
WesleyJohnson 3y ago
Back in 2011/12, I started building Word w/ Friends clone for fun and went down this path. I never finished it but even now, years later, when I tinker with it - I still want to use Canvas and reimplement everything and I don't know why. It just feels more correct somehow? It makes no sense to me.

toastal 3y ago

Most folks seem adverse to learning CSS. In contemporary times they’ll go as far as to add 44 cryptic utility class names to element to avoid writing a line of the stuff.

tomelders 3y ago
It boggles my mind. CSS isn’t hard anymore.
- zith 3y ago
  What is the best way of learning modern css?
  - 0wis 3y ago
    Interested too. I did several full courses and exercises on it (Freecodecamp, W3, Mdn, Codepip…) and I still struggle a lot to create clear UI and have each HTML element where I want them. I am looking at CSS frameworks (BEM, Tailwind) but I would like to master « vanilla » CSS.
    - toastal 3y ago
      It’s not a direct method, but really, you should try a) study the source code of the big ‘frameworks’ such as Bootstrap (especially if you dig into the comments & issues / patches that fixed worse practices with better practices) & b) hit F12 to start inspecting sites that are doing things interesting that you’d like to know about (but keep in mind they might not be experts & how you might improve it).
  - kekub 3y ago
    I recently enjoyed reading https://every-layout.dev https://every-layout.dev. Even though I considered myself to be quite good at CSS, some of the ideas covered in that book (like thinking about how big your elements should be and let the browser handle the breaking instead of relying on media queries) was eye opening for me.
  - DustinBrett 3y ago
    By having a reason to use it. Make something cool and complex and don't shy away from edge cases and best practices. Strive to improve every day and you will learn.
- mcfedr 3y ago
  Was it ever hard? Most of those utility classes have always been a line of CSS away
  - deaddodo 3y ago
    It was tedious, sure. CSS2, especially, was just powerful enough but unstandardized enough that nothing worked quite right universally. Now, I can jump into CSS3 and throw a flexbox down or a grid and just tell it exactly what I want, in 1/8 the code and it'll work across all major browsers.
  - Minor49er 3y ago
    Alignment used to be a big problem with CSS. Before improvements like flexbox and grid, people used to struggle to do basic alignment, like horizontal or vertical centering, or simply spacing items apart. There were a lot of (ab)uses of floats, tables, and relative/absolute positioning used for layout IE, Chrome, Firefox, and Opera had their own separate rendering engines. IE was also notorious for running with "quirks mode" out of the box which basically meant that IE was render pages in a non-standard way by default It was possible to develop things correctly, of course. But resources, both in terms of availability of documentation as well as time, were not as easy to find as they are today
ookblah 3y ago
i know it's in semi-jest, but what a non-argument lol. 44 util classes just to not learn the one line on which those utility classes are based on? if you want to hate on these types of things you can at least have a point of view that makes sense. tired of people who've never seemed to use CSS beyond some pet project or stuck in early 2000s (all frameworks are dumb!) mindset make the wrong arguments over and over again.
- sirsinsalot 3y ago
  Not defending OPs POV but you're reading between the lines an awful lot and making value judgements. Perhaps they use frameworks and write CSS at scale. You don't know and failed to enquire, instead becoming defensive and robbing the circumstance of the chance for productive conversation. Shame.
  - ookblah 3y ago
    lol what? op is the one insinuating anyone using utility classes are ones that don't bother to learn a line of CSS which is untrue, so I find it curious your criticism is directed solely at me. Value judgement for value judgement, I'd say the snark both ways is pretty fair. More than welcome to explain their pov.
- toastal 3y ago
  Utility classes are meant for utility purposes, not to replace CSS, but you see so many projects out in the wild now terrified to have a classname that’s relevant to the topic which makes it harder to organize, but also harder to select for userStyles, filter lists, etc. (i.e. if you make a FooWidget, add the .FooWidget class so real folks can read/parse thru the code easier for their needs …or just for their knowledge of what others are doing, and maybe actually put some styles on that bad boy instead of every property being behind a util). I have spoken with some engineers that only know how to speak Bootstrap or Tailwind, & not a lick of CSS. This isn’t just 2000s thinking to consider pumping the brakes a little as utilities at this point have definitely blown out into ‘overuse’ & ‘overreliance’, but these things come in cycles with a new idea taken to an extreme before we swing back to only semantic markup & selectors on element names again before the next pendulum swing. Even still, utilities aren’t a new idea, but just part of how reusable classes in CSS can just work – and rolling out with massive block of utility CSS that are mapped one-to-one with a single property is in the ‘smell’ territory.
no_wizard 3y ago
Its a symptom of several things by my anecdotal estimation - Bootcamps & self learning resources don't emphasize CSS. JavaScript gets you hired. A huge amount of web developers in the last 5-7 years came out of bootcamps and career switchers self learning, and the resources available overwhelmingly focus on frameworks and JavaScript, to the point that I've been in interviews where someone can give really good answers if the answer is framework specific but they don't basics like `call` or `bind`. - See previous comment. JavaScript gets you hired. Rarely, if ever, have I seen candidates get rejected because they lacked proper CSS knowledge nor have I seen it be appreciated on the same level as having "deep" JavaScript knowledge - CSS isn't programmatic[0] like JavaScript. The rules are different, and more fuzzy. Its one of its strengths, but its also a bit of a weakness, as you can't simply algorithmically design something and test its outcomes. You have to understand spatial concepts like placement and understand how to design / create with tools that have multiple different ways of achieving the same outcome alot (but not always). CSS does have more "exceptions to the rule" than JavaScript does. - In many ways, it doesn't help that CSS has had no API culling. IE, we know that flexbox / grid are much preferable but many developers don't grok things like when you should use negative margin, border vs outline, or proper usage of media queries. Then you have things like color formats, e.g. HEX vs RGBA vs HSLA. Which one is "better" isn't obvious to many. There's alot of CSS features like this. - In many ways, CSS has a bigger surface area, a much more expansive API, and way less backing documentation from the community. MDN is pretty good, but its not exhaustive (nor could it ever be, really) to every situation. - The reliance on CSS frameworks / generators. I think a big part of the popularity of things like Tailwind is you can just "try until it works the way you want" by throwing combinations of different classes together that a developer may semi-understand should work together until something happens, basically, which side steps having to have deep knowledge of CSS in many ways, or take bootstrap. Bootstrap made it easy to build websites following a formula. There are many other examples of this. - Developers really don't understand how to properly leverage the cascade. The industry general notion is "avoid it at all costs" because the same thought that goes into organizing your logic (JavaScript) isn't given to CSS. There's really bad hygiene practices in our industry with regards to CSS and its derivatives (SASS, LESS) [0]: I realize CSS is turing complete if you abuse custom properties a certain way or with the recent addition of container queries you could model this as well. I'm talking about it more in the way that CSS isn't like JavaScript, in that you have no familiar programming constructs (like if statements, for loops etc). Yes, I understand in the most literal sense, CSS is technically a programming language, but in practice, I don't think it is (at least, not yet)

giamma 3y ago

Also, if you build everything in canvas, good luck making your UI accessible and screen-reader friendly

firtoz 3y ago

Obviously we need to write a rust based minimal but compatible rewrite of css engine but in canvas

zero_shift 3y ago

I have had to do similar, but in SVG. Back in the days before flexbox I had a project that needed to print colour reports in IE7+. Browser print removes background colours except for web graphics, so SVG can be used as a workaround. However, IE supported only it's own weird fork of SVG called VML. This was how I ended up writing flexbox like layout code for SVG with a VML bridge. Was a good project as a junior developer.

talkingtab 3y ago

There should be a name for the syndrome of being familiar with something to the point of not being able to see it anymore. When I try to talk about some of the things I am very familiar with, then I often can't explain them. Like JavaScript. I use it all the time. 'this' anyone? '==!'? 'bind'? It is so easy once you have submerged yourself in it. But when I try to explain what these things are to a person learning JavaScript, I am vaguely aware that I sound like a lunatic. Perhaps 'koolaid syndrome'. I am not stupid - C, Java, nginix, streams, tcp slow start, NBP, etc. But CSS has always been hard for me. 'float'? 'block-inline'? <div/> vs <p/>? Eh? Rem's and em's, %, and px's Oh My! One of the things that helped was to understand that CSS is a _layout_ engine. It takes a list of elements and plunks them into a container. In prehistoric times (BG - before grid) you needed to float things. So yes, CSS is very capable. And there are some things that would be much harder to write with Canvas or Threejs. But if I didn't already have CSS koolaid syndrome, I wonder if ....

sshine 3y ago
There's a spectrum between being able to give a lecture without preparation at a moment's notice, and having to look up how every single time. I have to re-learn CSS every two years, since I might not do front-end development for a year. But I'm pretty happy to do so, because the best way sometimes changes. I never get very good.

WesleyJohnson 3y ago

Back in 2011/12, I started building Word w/ Friends clone for fun and went down this path. I never finished it but even now, years later, when I tinker with it - I still want to use Canvas and reimplement everything and I don't know why. It just feels more correct somehow? It makes no sense to me.