Styling React Applications: Update styling recommendations #27874
Conversation
| @@ -30,7 +30,7 @@ What if everything's already done for you? Styling, behavior, and accessibility | |||
|
|
|||
| <div class="lesson-note lesson-note--tip" markdown="1" > | |||
|
|
|||
| For learning purposes throughout this course, we advise you to implement your component's styling from scratch i.e. use vanilla CSS or a CSS-in-JS option. | |||
| For the learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#vanilla-css) or a [CSS-in-JS](#css-in-js) option. | |||
There was a problem hiding this comment.
| For the learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#vanilla-css) or a [CSS-in-JS](#css-in-js) option. | |
| For learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#vanilla-css) or a [CSS-in-JS](#css-in-js) option. |
Nit: "For learning purposes" (omitting "the") is more appropriate here.
Siriuszx
force-pushed
the
update_styling_options
branch
from
cfb1f0d
to
1413aef
Compare
There was a problem hiding this comment.
In all honesty, the more I think about it, the more unsure I am about having Tailwind within Vanilla CSS, because it isn't vanilla CSS by any means. CSS modules can be argued as "for all intents and purposes, vanilla CSS" since it's almost the same, just with very tiny differences like local scoping.
I feel Tailwind ought to go in its own ### Utility frameworks between ### CSS in JS and ### Component libraries.
- The Vanilla CSS section would need a very slight rewording as it's no long highlighting "a couple of things", and it won't need an ordered list anymore. CSS modules can just be a normal sentence/paragraph in it.
- The Tailwind list item can be made its own paragraph in its own
### Utility frameworkssection.
What do you think, @Siriuszx?
|
I think the definition of "Vanilla CSS" is too vague and purely subjective in that context. To avoid confusion in the future, I think it would be better if we just get rid of the term "Vanilla CSS" altogether and split the lesson into:
I understand what the author of this lesson was thinking when listing tailwind as vanilla css, but categorizing ALL of the frameworks as vanilla css is just wrong I think. |
|
If we are on the same page about this could you please merge this PR into main and I will open a separate PR addressing this lesson's structure? I would be grateful if I get the chance to work on the next problem as well 🙂 |
|
@Siriuszx I think this is pretty directly related to the original issue and PR purpose, so I think it can be done in this PR instead of a separate one. I like your idea about the sections so let's go with that. I think that'll help set the scene for why something like css modules is so useful because of the local scoping, while being otherwise almost vanilla css. I'll leave that with you, and we can always refine in review if we need to. |
|
@MaoShizhong sorry if this is taking too long, it says that you've "self-assigned this". I was a little bit busy with life, should I continue working on this issue? |
|
Oh yeah, carry on with it @Siriuszx. The PR assignment is a maintainer thing, you can ignore it |
|
|
||
| ### Vanilla CSS | ||
| ### CSS Modules |
There was a problem hiding this comment.
| ### CSS Modules | |
| ### CSS modules |
Just need to use sentence case
| @@ -1,36 +1,36 @@ | |||
| ### Introduction | |||
|
|
|||
| Up until now you've been using vanilla CSS to style your React projects, but there are other options available. This lesson is intended to be more like a guide or a list of options for you to explore. | |||
| In the previous courses, you've learned a lot of CSS and all of those skills are still applicable to React, however there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share the global scope, which means that as our application grows, it becomes increasingly difficult to manage our CSS. Some of the tools mentioned below will help solve this problem, however it's important to note that the main purpose of this lesson is to be more of a guide or a list of available options for you to explore when it comes to styling React applications. | |||
There was a problem hiding this comment.
| In the previous courses, you've learned a lot of CSS and all of those skills are still applicable to React, however there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share the global scope, which means that as our application grows, it becomes increasingly difficult to manage our CSS. Some of the tools mentioned below will help solve this problem, however it's important to note that the main purpose of this lesson is to be more of a guide or a list of available options for you to explore when it comes to styling React applications. | |
| In the previous courses, you'll have learned a lot of CSS and all of those skills are still applicable to React. However, there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share a global scope, which means that as our application grows, it will become increasingly difficult to manage our CSS. Some of the tools mentioned below are things people use to help solve this problem. |
Just a few grammar/flow nits, and I feel the last sentence isn't really necessary to say. Just a small tweak to the sentence before it should let it end very nicely there, I feel.
|
|
||
| ### CSS in JS | ||
| CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/). |
There was a problem hiding this comment.
| CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/). | |
| CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion, e.g. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/). |
Nit
|
|
||
| Vanilla CSS is the simplest way to style. In the previous courses, you've learned a lot of CSS and all of those skills are applicable to React. There are a couple of things we'd like to highlight. | ||
| Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope, i.e. we can now have two (or more) classes with the same name but different styles, and avoid naming your classes `.list-wrapper`, `.item-wrapper` etc. and just use `.wrapper` with its respective component. |
There was a problem hiding this comment.
| Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope, i.e. we can now have two (or more) classes with the same name but different styles, and avoid naming your classes `.list-wrapper`, `.item-wrapper` etc. and just use `.wrapper` with its respective component. | |
| Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope. For example, we can have several CSS module files containing a `.wrapper` class, but each module's `.wrapper` will be treated as different to each other. |
The above is purely a suggestion, so you don't have to take it at all. Just mainly feeling like it'd be best to just briefly explain how a class in one CSS module is different to the same class name in another CSS module.
I'm not sure the current example is 100% applicable (I'm being very nitpicky here!), since you may still want to use class names like list-wrapper and item-wrapper between/within CSS modules for various reasons.
There was a problem hiding this comment.
You are right, I guess it could be even redundant. People will find explanations for what it really is when they eventually get to the assignment.
There was a problem hiding this comment.
Agreed, especially when the documentation for CSS modules is already linked as an assigned reading.
We could probably just leave it at something like
Regular CSS is the simplest way to style. CSS Modules let you write locally scoped CSS style declarations, preventing many issues with clashing class names in the global scope.
There was a problem hiding this comment.
Already done! :)
Agreed, especially when the documentation for CSS modules is already linked as an assigned reading. We could probably just leave it at something like
Regular CSS is the simplest way to style. CSS Modules let you write locally scoped CSS style declarations, preventing many issues with clashing class names in the global scope.
Siriuszx
force-pushed
the
update_styling_options
branch
from
e39833b
to
fc75115
Compare
Because
The lesson tells people that Tailwind CSS is a valid Vanilla CSS option which isn't completely untrue, however the general consensus is that students should refrain from utilizing CSS frameworks or component libraries and try writing their own css.
This PR
Issue
Closes #27867
Pull Request Requirements
location of change: brief description of changeformat, e.g.Intro to HTML and CSS lesson: Fix link textBecausesection summarizes the reason for this PRThis PRsection has a bullet point list describing the changes in this PRIssuesection