linkedin / linkedin/css-blocks
README review from a newcomer to css-blocks
- Dominant language
- TypeScript
- Stars
- 6.3k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
After reading the entire README, I still don't understand when I should be using `block` or the `scope` pseudo selector.
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L271
In this example, it was first mentioned that ":scope selector is automagically applied to the template's root-level element." It will be helpful to have the file name, output HTML file and CSS file to see exactly **how** `:scope` selector is applied. The code snippet example in its current state doesn't provide any clarification.
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L128
I think that it will be helpful to have an example in the beginning that can demonstrate what block, scope, class, state, sub-state selectors are. Maybe a tweet? The code snippets from line 128 - 195 are all abstract at the moment, e.g.
```
:scope {
block-name: custom-block-name;
/* 👆 optional! */
/* ... more styles ... */
}
```
---
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L81
"To learn how to install css-blocks **for** in your application" -- **for** should be removed
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L153
"Blocks **may** can contain other classes " -- **may** should be removed
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L293
"You may not use a Block class outside of **it's** " -- should be **its**
"hasn't yet been implemented yet, " - should be "has not yet been implemented"
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L324
"The resolution logic for **`@block`s** to `node_modules` " -- should be **`@blocks`**
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L180
"Sub-states of a State are mutually exclusive and an element may only be in one sub-state of that state at any given time."
Not everyone may be familiar with this terminology, it may be helpful to give a quick explanation before the code snippet. e.g.
"For example, a button can only be one color (`state`) at any time. It can be red, blue, or yellow (`sub-state`)"
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L478
Is this suppose to be`Class State`?
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L479
Is this suppose to be`Class Sub-State`?
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L616
"If you have dynamic classes or states in your template, it will ask you to provide explicit resolutions between Blocks that **even only** have a chance of being used together on the same element." - what are you trying to say here? Suggest to change the wording, and provide an example of this problem and how it will be resolved.
- [ ] https://github.com/linkedin/css-blocks/blame/45969004e55545d397e9c8762507c1f52f1ba6da/README.md#L709
"In rare occasions, a Block may choose to **declare declare** that a certain State is global. " -- delete a "declare"
Contributor guide
Research direction
Review the referenced sections of README.md, especially the block/scope examples and the terminology around states, resolutions, and global states. Compare the surrounding explanations so the new examples show concrete usage and output, then correct the listed grammar, spelling, and wording issues. Done means a newcomer can distinguish block, scope, class, state, and sub-state selectors from the README alone.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100