Update css guides#794
Conversation
vendelal
left a comment
vendelal
left a comment
There was a problem hiding this comment.
I'm so grateful you took the time to make these updates! I know I will reference this in the near future knowing it's current and there were some great tips in here that were new to me/that I often forget!
| - Use stylelint to lint CSS & Sass | ||
| - We maintain a [sharable stylelint configuration] which enforces our guides | ||
| found in this repo | ||
| For new projects, consider using [Roux] as a structured starting point. It |
|
|
||
| `h1.page-title` carries a specificity of 2, but can be reduced to 1 by removing | ||
| the `h1` type selector: | ||
| - [Lightning CSS] is fast, modern, and light |
There was a problem hiding this comment.
Do these tools have good longevity? This isn't inherently an issue, but just wondering if this landscape changes frequently and whether we want to include specific links or not
There was a problem hiding this comment.
Possibly! Most of them have been around for long enough that I'd err on the side of recommending them, even if they get stale. Mostly want to ensure folks are bundling instead of using @import raw.
| #### Resources | ||
| Modern CSS layout tools can often eliminate the need for breakpoints entirely. | ||
| Reaching for a media query is reasonable, but it's worth considering whether the | ||
| layout could respond naturally first. |
There was a problem hiding this comment.
This is honestly kind of news to me 😅 I just saw you're including some examples below, that's really helpful!
There was a problem hiding this comment.
Hahahah breakpoint management is the bane of my existence so the less you have to use it the betterrrrr
| [Stylelint] is a good option for enforcing CSS conventions. The | ||
| [stylelint-order] plugin can handle alphabetical declaration ordering. If | ||
| adopting a shared config, it's worth reviewing its rules to make sure they | ||
| reflect native CSS rather than Sass-specific conventions. |
There was a problem hiding this comment.
Do we have a stylelint config we can share here?
There was a problem hiding this comment.
We have our thoughtbot one but that is also woefully out of date 😭
There was a problem hiding this comment.
womp womp haha. Well next step could be to update that and then add it here in a future PR
| ### Naming | ||
|
|
||
| - Use lowercase and hyphens (kebab-case) for class names and custom properties | ||
| - Be consistent with whatever naming convention the project is already using. Introducing a |
There was a problem hiding this comment.
Should we mention that we prefer BEM if starting fresh or is that too opinionated? Maybe that's covered by the first bullet here?
There was a problem hiding this comment.
Yeah we could be more strong about BEM usage!
There was a problem hiding this comment.
I was going to ask this as well. Personally I think BEM could be a "reasonable-default" also worth linking to a resource here
Co-authored-by: Vendela Colavecchio (Larsson) <vendelalinnea@mac.com>
aspencer116
left a comment
aspencer116
left a comment
There was a problem hiding this comment.
This is a great update 👏 thanks for working on this! Definitely worth promoting in a blog or social post once it's merged!
| - Vendor prefixes are rarely needed for modern browsers. If a project requires | ||
| legacy browser support, consider automating prefixes via a build tool rather | ||
| than maintaining them by hand | ||
| - Prefer native CSS over preprocessors like SCSS |
| **Note:** Unfortunately, you can't use a CSS custom property as a value within a media query, so be sure | ||
| to keep track of your values here and perhaps scope it per partial. |
|
|
||
| ### Declaration ordering | ||
|
|
||
| [Alphabetical ordering is a reasonable default] because it's predictable and easy to |
There was a problem hiding this comment.
I like the phrasing "reasonable default" which makes it clear this is a good choice but not the only option
There was a problem hiding this comment.
Also happy to add in other preferences like by property type! Thoughts?
| ### Naming | ||
|
|
||
| - Use lowercase and hyphens (kebab-case) for class names and custom properties | ||
| - Be consistent with whatever naming convention the project is already using. Introducing a |
There was a problem hiding this comment.
I was going to ask this as well. Personally I think BEM could be a "reasonable-default" also worth linking to a resource here
| - Use hyphens when naming classes and custom properties: `span-columns` not | ||
| `span_columns` or `spanColumns` |
There was a problem hiding this comment.
Use a BEM class format as an example?
3 participants
Our CSS guides were pretty stale and not comprehensive. This updates them to include more modern approaches, including recommending native CSS over SCSS (this removes the Sass guides). This also leverages Roux as a baseline for best practices.