🔥Cool Tip: How to get fonts and colors from any website. 1. Enable CSS Overview under settings > experiments > CSS Overview. (you should see a new CSS Overview tab after this) 2. Click on Capture Overview from CSS Overview tab. 3. Enjoy!

CSS
Browsers

Implement the same visual patterns using the same code patterns, even if it's possible to optimize in some situations and use fewer HTML elements. This makes things much easier to componentize and turn into a system.

CSS

When the complexity and effort is equal, always prefer the solution that makes elements easy to delete. This makes things easier to componentize and reuse.

CSS

Always put margins on the outer-most element possible. If you don't, people will wonder why and assume it's for some special purpose, which slows people down when trying to understand the code.

CSS

Always try to make elements in a loop identical, using techniques like negative margin and `flow-root` on a parent element to counteract unintended spacing. This lets you avoid dynamic/conditional logic and makes things easier to break up.

CSS

Don't use the `space-x/y-{n}` utilities for adding space between just two items, especially when those items each contain many lines of code. This can make it annoying to find where the spacing is coming from in complex templates.

CSS

Use the `space-x/y-{n}` utilities (or `gap` if you can!) to handle the space between items instead of repeating yourself. This makes it easier to adjust the spacing, and better captures your intent for other people reading the code.

CSS

Prefer top and left margins over bottom and right margins. Why? Because having a rule just makes it one less thing to ever think about, and you'll move faster.

CSS

Group responsive classes together by screen size, following the same order that the classes would override each other in. This makes it easy to see all the classes that would be applied at a breakpoint at the same time.

CSS

Group state variants together, and do that within each breakpoint — again to make related changes easy to find.

CSS

Exception: If a margin is needed because of an optional element that is sometimes shown and sometimes not, always put the margin on that element, even if it means using a bottom or right margin. This makes the code simpler and eliminates extra conditional logic.

CSS

Use screen size prefixes even in situations where it's not technically necessary because a class has no effect without being paired with another class. It's a few more characters, but it's much more clear to other people on the team.

CSS

The tweet will be reviewed and posted as soon as possible

{{ newSnippetForm.errors.url[0] }}

{{ newSnippetForm.errors.categories[0] }}