Generally, I break the front end down into two parts. Re-usable components, and page specific code.
This is an extremly flexible model in that it allows us to handle:
-
Completely unique pages
-
Pages that consist entirely of re-usable components
-
Pages that use components, but need their style & behavior tweaked slightly.
Traditionally, that last one has been the hardest.
This is just a naming convention for CSS classes and filenames. Results in a super clean CSS namespace, which we then make use of in JS to implement behaviors.
-
Each page is namespaced to the controller & action. ie, <body class=“controller-name action-name”>
-
All styles for that page are wrapped in a body.controller-name.action-name { .. } block
-
Any styles specific to that page go in stylesheets/controller_name/_action_name.scss
-
Any images go in images/controller_name/action_name/
-
All components have class names like ‘.component.dialog`
-
Their CSS rules are namespaced to .component.dialog { … }
-
Their Stylesheets go in stylesheets/components/_component_name.scss
-
Any images go in images/components/component_name/
-
Javascript behaviors are “attached” to a particular component & only modify its child nodes
-
Page specific JS checks for the presence of the correct body.class_name.action_name before running
├── images │ ├── components │ │ └── help │ │ └── background.png │ ├── content │ │ └── feature │ │ └── geisha.png │ └── rails.png ├── javascripts │ ├── application.js │ └── components │ └── help.js.coffee └── stylesheets ├── application.scss ├── components │ ├── _article_container.scss │ ├── _feature_container.scss │ ├── _footer.scss │ ├── _header.scss │ └── _help.scss ├── content │ ├── _article.scss │ └── _feature.scss └── styleguide ├── _layout.scss ├── _reset.scss └── _text.scss