When working within the component layer of your project here are five tips that I have found to be helpful–independent of what methodology or tooling you may be using.
1. Build components in isolation
Setup a test page that only includes the component that you are building. This helps remove any ideas of styling your component based on its location.
2. Components should fill the available space they live within
By default components should fill the available space it lives within. Use max-width delarations where applicable. Refrain from using percentage max-width declarations and stick to px dimensions if necessary.
For example, if you declare your component to have a max-width of 25%, it makes it quite difficult to use that component within a smaller sidebar area.
3. Remove spatial styling from components
As hinted above, make use of the object layer to help control spacing, width, and height styling.
4. Contain component styles to a single file
Refrain from adding modifier classes to components outside of its CSS file. This will help when debugging component specific issues. Make use of parent selectors to add modifiers when needed.
5. Prefix component classes
Lastly, prefix components with .c-[component-name] for extra clarity.
Top comments (3)
Hi. I was wondering if step 5 is some sort of an industry standard or if this is 100% opinionated. It's because I started to use Vue components in my MVC apps and when I was thinking about good classnames for components, I came up with the same solution (c-* prefix). If it's more standard, it'll make life easier for me to convince my team to start using it too.
Hey Kevin, great question. Not sure if it is an industry standard but just something I picked up that have seen great value in.
Ok. Good to know either way. I'll send them to this post if I get any difficult questions or hesitation about it :)