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.