It's easy to organize styles by page when the app is small, but a year from now we'll probably have 50+ pages and having a separate stylesheet for each page will result in tons of duplication.
The grid has a ton of feature and it's really customizable from variables.scss. Anywhere you're doing multi-column layouts, try to use the grid.
It's easy to want to reuse your components for things that might actually be different things. It's ok to duplicate styles at first and unify things later on. It's easier to combine two components into one than it is to pull apart an overly complex component.
Much of the basic styling can be accomplished with utility classes. Things like padding, centering text, highlighting can be done with utility classes. It's totally ok to add utility classes yo your component elements.
See our blog post
A component with the class .search-box should live in a file called
components/search-box.scss. All subelements (ex: search-box__input) should
live in that file as well. By keeping a one-to-one mapping of components to files,
it's easy for a developer to inspect the DOM and know exactly where to find
the file for a given component.
See the CSS Tricks BEM tutorial
For an element with the class .search-box--highlighed. search-box is the
block and highlighed is the modifier.
An element cannot have a modifier class without also having it's corresponding block class.
Invalid:
<div class="search-box--highlighed"></div>
Valid:
<div class="search-box search-box--highlighed"></div>
An element that uses subelement notation (__) must be within an element of
the corresponding component. .search-box__input must descend from an element
with the class .search-box
Invalid:
<div class="search-box">
<input class="form__input"></input>
</div>`
This is invalid because the form__input must live within a component with the
class form
Valid:
<div class="search-box">
<input class="search-box__input"></input>
</div>`