DEV Community

Alex Carpenter
Alex Carpenter

Posted on

5 tips for styling the component layer

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)

Collapse
 
keco39 profile image
Kevin Cocquyt

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.

Collapse
 
hybrid_alex profile image
Alex Carpenter

Hey Kevin, great question. Not sure if it is an industry standard but just something I picked up that have seen great value in.

Collapse
 
keco39 profile image
Kevin Cocquyt

Ok. Good to know either way. I'll send them to this post if I get any difficult questions or hesitation about it :)