5 ms·

Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initi

Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initially helpful to beginners for someone to provide guidance in such absolute terms, it can also lead to adoption of cargo-cult approaches and impede deeper understanding and growth. The linked materials are also problematic in their one-sided and outdated perspective on "separation of concerns", claiming CSS belongs exclusively in external stylesheets. Which ignores completely the emergence and widespread adoption of modern component-based architecture. Not just in frameworks like React and Vue, but also standards like Web Components. Maybe an unfair criticism given it's "introductory"... but I'd urge anyone who seeks a better grasp of the power of CSS to look instead to the axioms and layout examples on https://every-layout.dev https://every-layout.dev for its much more rigorous, up-to-date, "first-principles"-based, expert treatment of this thorny subject.

temporallobe 7y ago
On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One current trend is that there seems to be a lot of unnecessary complexity. SCSS, for example, is indeed powerful, but most sites and web apps I’ve worked on don’t need it and could basically have the entire component-based layout structure rewritten with a single, efficient, well-organized standard CSS file that doesn’t need to be built from 30-odd separate SCSS files. The same goes for so-called transpiled Javascript “languages” such as Coffeescript and Typescript. These, for the most part, add unnecessary layers of abstraction and complexity, making it far more difficult to debug. By using these abstractions, we developers are also doing ourselves a big disfavor because we are often not learning the underlying technology that the browser actually understands. Of course I get that there are domain-specific problems that these tools are trying to solve, but they are often inappropriately employed simply because they’re trendy. With some apps I’ve worked on, it’s anbalagous to using a farm tractor when all you really needed was a lawnmower.
- tomnipotent 7y ago
  > a single, efficient, well-organized standard CSS I still haven't seen a single, efficient, well-organized standard CSS file in 20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines that add considerably more upside than downside. If you're a paid professional, there's no excuse to be doing things the "old way" in 2019.
  - jachee 7y ago
    There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!
    - tomnipotent 7y ago
      I looked through a dozen examples, they all look like below: http://www.csszengarden.com/220/220.css http://www.csszengarden.com/220/220.css None of these satisfy the aforementioned qualities. None of them look better, IMO, then an equivalent SASS/SCSS version that likely make most of these even more readable.
      - Blaiz0r 7y ago
        That is what a single, efficient, well organised CSS file looks like!
        tomnipotent 7y ago
        A single, efficient, well organized SCSS/SASS file still looks much better.
        jachee 7y ago
        And has to be "compiled" into an incomprehensible, bloated, inefficient mess of a new actual CSS file, before it can be used, rather than simply served by a web server.
    - 7y ago
alwillis 7y ago
>Maybe an unfair criticism given it's "introductory"... but I'd urge anyone who seeks a better grasp of the power of CSS to look instead to the axioms and layout examples on https://every-layout.dev https://every-layout.dev for its much more rigorous, up-to-date, "first-principles"-based, expert treatment of this thorny subject. Yes, https://every-layout.dev https://every-layout.dev is eye-opening in terms of taking advantage of the power of CSS and using it as it was intended vs. trying to turn into… something else entirely. Highly recommended.
smoe 7y ago
While I agree that stating opinions as obvious best practices is problematic at any level, I do appreciate a lot that this guide seems (I only skimmed it) to keep things basic and to the essentials. From a lot of resources floating around and talking to people interested in getting into web development, I feel that the entry-level tooling and techniques you supposedly need to know has gotten like 10x more complex compared to 10 years ago, whereas I'm not convinced that the majority of people is solving significantly harder problems. Don't get me wrong, most of the modern tooling and techniques are immensely helpful for aspects that were a massive pain in the past, but they can also create a at least perceived unnecessarily high barrier of entry into the field. E.g. I had absolute beginners asking me questions about problems with their docker setup, errors in their build chain or their confusions with things like redux, etc.
- duxup 7y ago
  Agreed. There are so many introductions that are clearly a twist on something, some stack, but that skews the basics. I really appreciate something whittled down to the essentials and building from there.
justin66 7y ago
> Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initially helpful to beginners for someone to provide guidance in such absolute terms, it can also lead to adoption of cargo-cult approaches and impede deeper understanding and growth. I don't think you need to worry about the likelihood of anyone doing web development, even (especially) as a student, losing sight of the fact that there are a thousand different ways to do anything and no definitive best practices.
- chrisweekly 7y ago
  The problem is that the OP presents opinions and specific _suboptimal_ ways of doing things in such a way as to discourage the student from questioning them (by omitting mention of alternatives, and treating cargo-cult patterns as if they were foundational principles or axioms.) The danger of learning from this kind of opaquely opinionated resource is that it fosters incuriosity; its students are more likely to discount or ignore other paths when they recognize "violations" of said [false] "principles". It'd be different if the materials were presented as a snapshot of one person's shortcuts, hacks and rules of thumb -- but that's not at all how it comes across. Hence my complaint and warnings.

temporallobe 7y ago

On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One current trend is that there seems to be a lot of unnecessary complexity. SCSS, for example, is indeed powerful, but most sites and web apps I’ve worked on don’t need it and could basically have the entire component-based layout structure rewritten with a single, efficient, well-organized standard CSS file that doesn’t need to be built from 30-odd separate SCSS files. The same goes for so-called transpiled Javascript “languages” such as Coffeescript and Typescript. These, for the most part, add unnecessary layers of abstraction and complexity, making it far more difficult to debug. By using these abstractions, we developers are also doing ourselves a big disfavor because we are often not learning the underlying technology that the browser actually understands. Of course I get that there are domain-specific problems that these tools are trying to solve, but they are often inappropriately employed simply because they’re trendy. With some apps I’ve worked on, it’s anbalagous to using a farm tractor when all you really needed was a lawnmower.

tomnipotent 7y ago
> a single, efficient, well-organized standard CSS I still haven't seen a single, efficient, well-organized standard CSS file in 20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines that add considerably more upside than downside. If you're a paid professional, there's no excuse to be doing things the "old way" in 2019.
- jachee 7y ago
  There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!
  - tomnipotent 7y ago
    I looked through a dozen examples, they all look like below: http://www.csszengarden.com/220/220.css http://www.csszengarden.com/220/220.css None of these satisfy the aforementioned qualities. None of them look better, IMO, then an equivalent SASS/SCSS version that likely make most of these even more readable.
    - Blaiz0r 7y ago
      That is what a single, efficient, well organised CSS file looks like!
      - tomnipotent 7y ago
        A single, efficient, well organized SCSS/SASS file still looks much better.
        jachee 7y ago
        And has to be "compiled" into an incomprehensible, bloated, inefficient mess of a new actual CSS file, before it can be used, rather than simply served by a web server.
  - 7y ago

alwillis 7y ago

>Maybe an unfair criticism given it's "introductory"... but I'd urge anyone who seeks a better grasp of the power of CSS to look instead to the axioms and layout examples on https://every-layout.dev https://every-layout.dev for its much more rigorous, up-to-date, "first-principles"-based, expert treatment of this thorny subject. Yes, https://every-layout.dev https://every-layout.dev is eye-opening in terms of taking advantage of the power of CSS and using it as it was intended vs. trying to turn into… something else entirely. Highly recommended.

smoe 7y ago

While I agree that stating opinions as obvious best practices is problematic at any level, I do appreciate a lot that this guide seems (I only skimmed it) to keep things basic and to the essentials. From a lot of resources floating around and talking to people interested in getting into web development, I feel that the entry-level tooling and techniques you supposedly need to know has gotten like 10x more complex compared to 10 years ago, whereas I'm not convinced that the majority of people is solving significantly harder problems. Don't get me wrong, most of the modern tooling and techniques are immensely helpful for aspects that were a massive pain in the past, but they can also create a at least perceived unnecessarily high barrier of entry into the field. E.g. I had absolute beginners asking me questions about problems with their docker setup, errors in their build chain or their confusions with things like redux, etc.

duxup 7y ago
Agreed. There are so many introductions that are clearly a twist on something, some stack, but that skews the basics. I really appreciate something whittled down to the essentials and building from there.

justin66 7y ago

> Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initially helpful to beginners for someone to provide guidance in such absolute terms, it can also lead to adoption of cargo-cult approaches and impede deeper understanding and growth. I don't think you need to worry about the likelihood of anyone doing web development, even (especially) as a student, losing sight of the fact that there are a thousand different ways to do anything and no definitive best practices.

chrisweekly 7y ago
The problem is that the OP presents opinions and specific _suboptimal_ ways of doing things in such a way as to discourage the student from questioning them (by omitting mention of alternatives, and treating cargo-cult patterns as if they were foundational principles or axioms.) The danger of learning from this kind of opaquely opinionated resource is that it fosters incuriosity; its students are more likely to discount or ignore other paths when they recognize "violations" of said [false] "principles". It'd be different if the materials were presented as a snapshot of one person's shortcuts, hacks and rules of thumb -- but that's not at all how it comes across. Hence my complaint and warnings.