4 ms·

Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam

Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam packed with non-intuitive technology I've met. How many dozens of pages or segments of video would I have to go through in a course to learn what the author in OP summarised in two or three sentences? Any time I've considered the structured approach for something like CSS, the material drones on and on with technically correct explanations and example code, but somehow against the odds, almost nothing of substance. Worse yet are the top google result reference resources. Look no further than the top result for "css grid" if you're in the mood to claw your brain from its stem, and flush it down the toilet. Link: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/ Behold, 8 zillion words and symbols across 7 trillion seemingly randomly organised boxes full of both all of the information, and simultaneously none of the information, about css grids. Which brings me to where I am now, cobbling. It's more effective for me to cobble, than to spend an entire day figuring out css grids "the right way". If the going gets tough I'll just use some grid tool, or look up some sandbox examples, and be on my way. If there was more material like the OP, and someone organised it well, well, I'd actually get around to learning it rather than cobbling. It's the best bit of writing I've ever seen on CSS. This is shocking. Not that there is anything wrong with the writing, but it's very, very simple. What on earth have all of the other CSS wizards with basic writing skills been doing? Confusing the issue, that's what. Which leads me to a sort of meta frustration with learning CSS. I know it's not hard, I know that if someone just wrote about it even half decently it would take only a moment to digest each concept, but watching learner-disconnected authors create resources I can tell have lost sight of what it's like to learn, turns me off.

k__ 6y ago
Yes, web technology is overloaded, because of the history, backwards compatible stuff etc. pp.
cosmodisk 6y ago
Couldn't agree more. I had less issues learning multiple programming languages,some challenging concepts around them and yet when it comes to CSS, most resources aren't very useful. You do something and it doesn't work. You check documentation and it show exactly the same thing that does work. 5 hours later it turns out it was some overriding property+ browser incompatibility+ weird undocumented exception. Very few books do deliver on their promise either. I don't know,maybe it's just me but the whole ecosystem is a bit weird.
- hutzlibu 6y ago
  " but the whole ecosystem is a bit weird." It absolutely is. The web was meant for static documents and some link magic. Now allmost every complex programm can run in the browser with web technologies. And in the time between you had lots of powerful organisations with their own agenda, as well as millions of single developers with a agenda and a loud voice. How could a sane, clear spec be made, under these circumstances? Besides, it would be very hard, to make a clean spec that satisfies the needs of the whole population. So by now I say, all in all, it works pretty good.
  - Silhouette 6y ago
    How could a sane, clear spec be made, under these circumstances? Serious answer: By respecting and supporting the organisation that had for a long time codified realistic web standards reasonably well. When the Web was younger, you could (and many of us did) learn all you needed to know about things like HTML and CSS by reading the documentation produced by the W3C. In many cases, the official recommendations themselves (the documents that were informally called "web standards") were very readable and short enough for normal developers to go through the whole thing.
    - hutzlibu 6y ago
      My experience with the W3C was very complicated written specs, with sometimes no connection to reality(implementation in the browsers). And they moved too slow. And no. I don't think you can expect the whole world to wait for some spec commitee.
      - Silhouette 6y ago
        It wasn't that way in the earlier days. The W3C certainly made some questionable decisions later on that contributed to its slide into irrelevance, but it was Google flagrantly ignoring standardisation, absurdities like "living standards", and the way all of the other major browser developers were asleep at the wheel for years that really sealed the W3C's fate. And now, sadly, a new generation of web developers is about to learn the hard way why browser monopolies are a bad idea. :-(
mslm 6y ago
I had the same perspective on these frontend technologies as a backend/ops guy, and it all finally clicked when it came to me that I just couldn't find a justification for why CSS was the way it was. This was solved trivially by just reading the history of CSS. It was shocking to finally have made clear all of the quirks and weird aspects of CSS that always made it difficult for me to connect the dots and feel myself lost in a messy tangled up language. By far the best source I went through was found here: https://news.ycombinator.com/item?id=22215931 https://news.ycombinator.com/item?id=22215931 - it's a long read, but extremely enlightening! https://www.w3.org/Style/CSS20/history.html https://www.w3.org/Style/CSS20/history.html was also useful.
- _jal 6y ago
  This is a great comment. I expect it only applies to some folks depending on how they learn, but it resonates a lot with me. I find it very difficult to learn the whats and hows of a new thing without the whys. I tend to construct mental frameworks of things, revising the inaccurate bits as I go, until theory starts meeting practice. (I always did poorly with math "teachers" whose method was, "doesn't matter, just do it." But it did take a while to realize that they were failing, not me.) So when I encounter complicated, new things with a history, I usually try to start with at least a bit of the history.
- davegauer 6y ago
  This is so true. Though I'd been writing CSS long enough to remember Netscape 4.0 quirks, it wasn't until I learned some troff a couple years back that I had my moment of CSS enlightenment. The fundamental features are the same! CSS (and HTML) were (originally) made for pages of technical/academic writing, not creating user interfaces.
soperj 6y ago
> Behold, 8 zillion words and symbols across 7 trillion seemingly randomly organised boxes full of both all of the information, and simultaneously none of the information, about css grids. It's interesting, because that's my go to resource for CSS Grid. I find it super handy when I forget something. Although, I'm not learning grid, I'm using it.
- chrismorgan 6y ago
  > Although, I'm not learning grid, I'm using it. Precisely. What CSS-Tricks calls a guide is actually almost entirely a reference. It makes a tolerable reference if you already know what you’re looking for. It’s a poor reference if you don’t know what you’re looking for because it’s insufficiently structured and takes waaaaay too much scrolling to explore. (It used to be more manageable—it used to be more a guide. It has been allowed to grow far beyond a healthy point.) And it’s atrocious as a guide.
- wrycoder 6y ago
  Reference books aren’t the same as textbooks. And, typically, there are several levels of textbook. e.g. high school, then freshman physics, undergrad electrodynamics, then Jackson, then specialist references. My point is you go over the subject completely several times, at increasing levels of sophistication.
runarberg 6y ago
Your evaluation is problematic. I am a front-end dev by trade and I could really easily say similar things about the tech stack you work with daily. If you want a good reference and a learning guide start with this: https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS it is what us professional use. For us professionals that use CSS in our jobs, that have put the same amount of hours into front end technology as you have done for back-end, CSS is a perfectly cromulent technology. It is easy to work with, it is intuitive, it is easy to find a good reference (go to MDN not random blog posts from people that are admittedly not masters of the craft). If I try to cobble together a back-end I expect to be frustrated with it, I expect not to be able to do everything, I expect I’d need to find poor example and try to hammer them in to fit my needs, I don’t expect to be able to understand all the example snippets. Why are you on your high horse judging my tech stack this way? If you need a good well crafted front-end for your project, you should hire a professional front-end developer. Or find a friend who is one that is willing to it in their spare time. Or spend a few thousand hours learning and mastering the craft. Alternatively you can cobble together a good-enough front-end that works, just don’t complain about how hard it is because “technology hard wheee wheee”. Us professionals use it every day and are fine with it.
- theelous3 6y ago
  "here I am, at the end of the maze, telling people at the beginning how straight forward it is" is basically all I'm getting here - and you call my eval problematic. Multiple accounts of people not in your position telling you a problem exists. Ok, great, you worked through it. Doesn't mean it's as good as it should be.
  - runarberg 6y ago
    Well you come across as an outsider telling us that the tools that we use—and do a fine job with—are no good, and that our literature sucks. I am here to argue that this sort of attitude is problematic. If you browse through this thread you will find no shortage of comments describing how absolutely basic this article is (and a little void of insight, and a little out dated), and that there are people in the industry getting six figures while not knowing this stuff. Frankly it is a little insulting. And I think the attitude that you presented above is part of the problem. There definitely exists a lack of respect for the craft of front-end development within our industry. This sort of attitude is not helping.
pdfernhout 6y ago
Check out Tachyons or another atomic CSS system. It makes CSS so much easier to use (especially in single-page apps written in JavaScript). https://tachyons.io/ https://tachyons.io/ "Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible." See also: https://css-tricks.com/lets-define-exactly-atomic-css/ https://css-tricks.com/lets-define-exactly-atomic-css/ "Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function." Or from: https://acss.io/ https://acss.io/ "CSS is a critical piece of the frontend toolkit, but it's hard to manage, especially in large projects. Styles are written in a global scope, which is narrowed through complex selectors. Specificity issues, redundancy, bloat, and maintenance can become a nightmare. And modular, component-based projects only add to the complexity. Atomic CSS enables you to style directly in your components, avoiding the headache of managing stylesheets. Most approaches to styling inside components rely on inline styles, which are limiting. Atomic CSS, like inline styles, offers single-purpose units of style, but applied via classes. This allows for the use of handy things such as media queries, contextual styling and pseudo-classes. The lower specificity of classes also allows for easier overrides. And the short, predictable classnames are highly reusable and compress well." Mostly though, Atomic CSS is a state of mind or design pattern. So you can do it from scratch without support from something like Tachyons etc. -- but it helps. You might even find it fits right in with your "cobbling" style of development. As an example, if you want to make some text red, you add the style "red" to it. If you want a border all around something, add a "ba" class. If you develop using HyperScript (like from Mithril) to define your UIs, code might look like this: h("div.red.ba", "This is red and has a border") I refer to the Tachyons style sheet as essentially a menu of options: https://github.com/tachyons-css/tachyons/blob/master/css/tachyons.css https://github.com/tachyons-css/tachyons/blob/master/css/tac... In the rare case something is missing I do an inline style or add something to a single supplemental stylesheet written in a similar way. There is also a verbose version of Tachyons without the abbreviations, so "ba" would be "border-all" (though I prefer the abbreviations): https://github.com/tachyons-css/tachyons-verbose/blob/master/css/tachyons.css https://github.com/tachyons-css/tachyons-verbose/blob/master...

k__ 6y ago

Yes, web technology is overloaded, because of the history, backwards compatible stuff etc. pp.

cosmodisk 6y ago

Couldn't agree more. I had less issues learning multiple programming languages,some challenging concepts around them and yet when it comes to CSS, most resources aren't very useful. You do something and it doesn't work. You check documentation and it show exactly the same thing that does work. 5 hours later it turns out it was some overriding property+ browser incompatibility+ weird undocumented exception. Very few books do deliver on their promise either. I don't know,maybe it's just me but the whole ecosystem is a bit weird.

hutzlibu 6y ago
" but the whole ecosystem is a bit weird." It absolutely is. The web was meant for static documents and some link magic. Now allmost every complex programm can run in the browser with web technologies. And in the time between you had lots of powerful organisations with their own agenda, as well as millions of single developers with a agenda and a loud voice. How could a sane, clear spec be made, under these circumstances? Besides, it would be very hard, to make a clean spec that satisfies the needs of the whole population. So by now I say, all in all, it works pretty good.
- Silhouette 6y ago
  How could a sane, clear spec be made, under these circumstances? Serious answer: By respecting and supporting the organisation that had for a long time codified realistic web standards reasonably well. When the Web was younger, you could (and many of us did) learn all you needed to know about things like HTML and CSS by reading the documentation produced by the W3C. In many cases, the official recommendations themselves (the documents that were informally called "web standards") were very readable and short enough for normal developers to go through the whole thing.
  - hutzlibu 6y ago
    My experience with the W3C was very complicated written specs, with sometimes no connection to reality(implementation in the browsers). And they moved too slow. And no. I don't think you can expect the whole world to wait for some spec commitee.
    - Silhouette 6y ago
      It wasn't that way in the earlier days. The W3C certainly made some questionable decisions later on that contributed to its slide into irrelevance, but it was Google flagrantly ignoring standardisation, absurdities like "living standards", and the way all of the other major browser developers were asleep at the wheel for years that really sealed the W3C's fate. And now, sadly, a new generation of web developers is about to learn the hard way why browser monopolies are a bad idea. :-(

mslm 6y ago

I had the same perspective on these frontend technologies as a backend/ops guy, and it all finally clicked when it came to me that I just couldn't find a justification for why CSS was the way it was. This was solved trivially by just reading the history of CSS. It was shocking to finally have made clear all of the quirks and weird aspects of CSS that always made it difficult for me to connect the dots and feel myself lost in a messy tangled up language. By far the best source I went through was found here: https://news.ycombinator.com/item?id=22215931 https://news.ycombinator.com/item?id=22215931 - it's a long read, but extremely enlightening! https://www.w3.org/Style/CSS20/history.html https://www.w3.org/Style/CSS20/history.html was also useful.

_jal 6y ago
This is a great comment. I expect it only applies to some folks depending on how they learn, but it resonates a lot with me. I find it very difficult to learn the whats and hows of a new thing without the whys. I tend to construct mental frameworks of things, revising the inaccurate bits as I go, until theory starts meeting practice. (I always did poorly with math "teachers" whose method was, "doesn't matter, just do it." But it did take a while to realize that they were failing, not me.) So when I encounter complicated, new things with a history, I usually try to start with at least a bit of the history.
davegauer 6y ago
This is so true. Though I'd been writing CSS long enough to remember Netscape 4.0 quirks, it wasn't until I learned some troff a couple years back that I had my moment of CSS enlightenment. The fundamental features are the same! CSS (and HTML) were (originally) made for pages of technical/academic writing, not creating user interfaces.

soperj 6y ago

> Behold, 8 zillion words and symbols across 7 trillion seemingly randomly organised boxes full of both all of the information, and simultaneously none of the information, about css grids. It's interesting, because that's my go to resource for CSS Grid. I find it super handy when I forget something. Although, I'm not learning grid, I'm using it.

chrismorgan 6y ago
> Although, I'm not learning grid, I'm using it. Precisely. What CSS-Tricks calls a guide is actually almost entirely a reference. It makes a tolerable reference if you already know what you’re looking for. It’s a poor reference if you don’t know what you’re looking for because it’s insufficiently structured and takes waaaaay too much scrolling to explore. (It used to be more manageable—it used to be more a guide. It has been allowed to grow far beyond a healthy point.) And it’s atrocious as a guide.
wrycoder 6y ago
Reference books aren’t the same as textbooks. And, typically, there are several levels of textbook. e.g. high school, then freshman physics, undergrad electrodynamics, then Jackson, then specialist references. My point is you go over the subject completely several times, at increasing levels of sophistication.

runarberg 6y ago

Your evaluation is problematic. I am a front-end dev by trade and I could really easily say similar things about the tech stack you work with daily. If you want a good reference and a learning guide start with this: https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS it is what us professional use. For us professionals that use CSS in our jobs, that have put the same amount of hours into front end technology as you have done for back-end, CSS is a perfectly cromulent technology. It is easy to work with, it is intuitive, it is easy to find a good reference (go to MDN not random blog posts from people that are admittedly not masters of the craft). If I try to cobble together a back-end I expect to be frustrated with it, I expect not to be able to do everything, I expect I’d need to find poor example and try to hammer them in to fit my needs, I don’t expect to be able to understand all the example snippets. Why are you on your high horse judging my tech stack this way? If you need a good well crafted front-end for your project, you should hire a professional front-end developer. Or find a friend who is one that is willing to it in their spare time. Or spend a few thousand hours learning and mastering the craft. Alternatively you can cobble together a good-enough front-end that works, just don’t complain about how hard it is because “technology hard wheee wheee”. Us professionals use it every day and are fine with it.

theelous3 6y ago
"here I am, at the end of the maze, telling people at the beginning how straight forward it is" is basically all I'm getting here - and you call my eval problematic. Multiple accounts of people not in your position telling you a problem exists. Ok, great, you worked through it. Doesn't mean it's as good as it should be.
- runarberg 6y ago
  Well you come across as an outsider telling us that the tools that we use—and do a fine job with—are no good, and that our literature sucks. I am here to argue that this sort of attitude is problematic. If you browse through this thread you will find no shortage of comments describing how absolutely basic this article is (and a little void of insight, and a little out dated), and that there are people in the industry getting six figures while not knowing this stuff. Frankly it is a little insulting. And I think the attitude that you presented above is part of the problem. There definitely exists a lack of respect for the craft of front-end development within our industry. This sort of attitude is not helping.

pdfernhout 6y ago

Check out Tachyons or another atomic CSS system. It makes CSS so much easier to use (especially in single-page apps written in JavaScript). https://tachyons.io/ https://tachyons.io/ "Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible." See also: https://css-tricks.com/lets-define-exactly-atomic-css/ https://css-tricks.com/lets-define-exactly-atomic-css/ "Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function." Or from: https://acss.io/ https://acss.io/ "CSS is a critical piece of the frontend toolkit, but it's hard to manage, especially in large projects. Styles are written in a global scope, which is narrowed through complex selectors. Specificity issues, redundancy, bloat, and maintenance can become a nightmare. And modular, component-based projects only add to the complexity. Atomic CSS enables you to style directly in your components, avoiding the headache of managing stylesheets. Most approaches to styling inside components rely on inline styles, which are limiting. Atomic CSS, like inline styles, offers single-purpose units of style, but applied via classes. This allows for the use of handy things such as media queries, contextual styling and pseudo-classes. The lower specificity of classes also allows for easier overrides. And the short, predictable classnames are highly reusable and compress well." Mostly though, Atomic CSS is a state of mind or design pattern. So you can do it from scratch without support from something like Tachyons etc. -- but it helps. You might even find it fits right in with your "cobbling" style of development. As an example, if you want to make some text red, you add the style "red" to it. If you want a border all around something, add a "ba" class. If you develop using HyperScript (like from Mithril) to define your UIs, code might look like this: h("div.red.ba", "This is red and has a border") I refer to the Tachyons style sheet as essentially a menu of options: https://github.com/tachyons-css/tachyons/blob/master/css/tachyons.css https://github.com/tachyons-css/tachyons/blob/master/css/tac... In the rare case something is missing I do an inline style or add something to a single supplemental stylesheet written in a similar way. There is also a verbose version of Tachyons without the abbreviations, so "ba" would be "border-all" (though I prefer the abbreviations): https://github.com/tachyons-css/tachyons-verbose/blob/master/css/tachyons.css https://github.com/tachyons-css/tachyons-verbose/blob/master...