Skills

css-best-practices

This skill consists in writing CSS styles using the latest CSS3 features

When to use

Use this skill when writing CSS files if the user defines it for the project

Instructions

1. Instead of putting all the styles in one file, it is better to create a "styles" folder, and then create a CSS file for every component/part of the project
2. Use CSS variables when defining the design system and later use them in its corresponding selector/classes using var(<variable>).
3. Take into consideration good UX/UI practices when defining styles to avoid later issues.
4. When defining light and dark mode, use the light-dark() function. For example: light-dark(<light color>,<dark color>).
5. When using selectors or children/brother nodes, use native CSS nesting, putting the "&" following the selector inside the parent class/selector.
6. Take as a high priority to make the responsive thing: mobile, tablet and desktop. Always use the "@media (width < <width in px>)".
7. In the global style file, write a "reset CSS" to bypass the browser default styles to avoid styling problems.
8. Also, in the same file, divide every set of styles with layers usign "@layer <layer name>", and inside put the classes corresponding that set.
9. When defining background and foreground colors, make sure that the colors have AAA contrast color to fulfill accesibility requirements.
10. When writing responsive media queries, use the clamp() function to adapt the text size in tablets and mobile devices.
11. If a project has presence of modals, make the background blurry, darker and unscrollable when the modal is on. It would be better if the modal has open/exit animations.
12. If the project uses a variable font, use the "font-variation-settings" to define the font weight depending on the contrast setting. Use the "@media (prefers-contrast)" queries when defining those settings.
13. Try to use the rem/vw/vh units instead of px when possible.
14. Control the size of the elements when defining the responsive styles, with the purpose of looking fine in responsive media queries and with user experience.
15. If you use the grid on a component or part of the page which has cards/posters/etc..., use the auto-fill thing to make the grid adapt itself in every device.

About CSS Nestings

You have to write the CSS nesting like this example:

.class {
    &:hover {
        ...
    }

    &::after {
        ...
    }

    & > descendent child {
        ...
    }
}