docs(style): add scss section to style guide #5043
Conversation
|
cc @jendowns if you have any feedback too! |
|
|
||
| // Later on in the file | ||
| .component { | ||
| &:focus { |
There was a problem hiding this comment.
I really don't have a problem with not nesting selectors, my main gripe is just having inconsistent styling throughout the repo. Unnesting all selectors should be part of a major refactor if searchability is the main concern.
There was a problem hiding this comment.
@tw15egan 100% agreed!
|
Deploy preview for carbon-components-react failed. Built with commit bf78ad7 https://app.netlify.com/sites/carbon-components-react/deploys/5e20ee02f698ef000921fe0a |
|
Deploy preview for carbon-elements ready! Built with commit bf78ad7 |
|
Deploy preview for the-carbon-components ready! Built with commit bf78ad7 https://deploy-preview-5043--the-carbon-components.netlify.com |
Co-Authored-By: Abbey Hart <[email protected]>
There was a problem hiding this comment.
Thanks @joshblack this looks great! I had a couple small comments throughout, plus the following questions:
1. Did you want to talk at all about shorthand rules?
- Is it preferable, as is the case with
padding/marginshorthand? - What are the perils? (Thinking specifically how Safari does not support the two-value overflow shorthand & that came up in a PR a couple months ago -- https://caniuse.com/#feat=css-overflow)
2. Provide some general resources?
For example...
3. Error handling?
Thinking specifically of this PR, and how useful it would be to maybe provide some rules around writing functions... IF the function needs a value, some error handling should be included: #4931
4. Best practices (flexbox over floats)
I realize this section could be HUGE in general but the one thing that always comes to my mind is preferring flexbox over floats.
Flexbox is just so much cleaner to write and debug once you learn the rules... I think it would be a worthwhile mention at least. But what do you think? (If you agree, might be worth dropping a link to https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Co-Authored-By: Jen Downs <[email protected]>
Co-Authored-By: Jen Downs <[email protected]>
|
@jendowns thanks for the feedback, definitely agreed on a lot of what you brought up. Would you have any interest in adding sections on some, or all (😂), of them? |
|
@joshblack Yeah, I would be happy to help! Maybe a general "best practices" section that could include the notes about error handling, shorthand rules, and flexbox over floats? (Plus maybe other things that may come to mind). I could open as a different PR so you could provide feedback separately from this one? (Unless you prefer it all to be here?) |
…arbon into docs/add-style-guide-updates
|
@jendowns definitely feel free to do a separate PR! |
|
FYI @alisonjoseph |
There was a problem hiding this comment.
might be jumping the gun but do we want to add rules for css property declaration order? for example the order in this style lint config is 1. positioning, 2. box model, 3. typography, 4. visual, then miscellaneous properties. alphabetical order would work too I guess, but overall I think being aware of property order can help deduplicate rules
|
@emyarod I think that'd be super helpful, especially if we tie it to the lint config. Would you have time/interest in putting a PR together? 👀 |
* docs(style): add scss section to style guide * Update docs/style.md Co-Authored-By: Abbey Hart <[email protected]> * Update docs/style.md Co-Authored-By: Jen Downs <[email protected]> * Update docs/style.md Co-Authored-By: Jen Downs <[email protected]> * docs(style): update based on feedback Co-authored-by: Abbey Hart <[email protected]> Co-authored-by: Jen Downs <[email protected]>
Add in a section for scss guidelines and style conventions to our style guide.
Changelog
New
Changed
Removed
Testing / Reviewing