Use BEM for Styles

[rileytaylor]

Problem

We want to standardize our stylesheets using BEM. This is a master issue to track all needed refactoring.

The lists below correspond to stylesheets. Each stylesheet (except those with _ in front of the name) correspond to a .hbs template file. General styles will need to be renamed to fit the naming conventions, which then need to be changed everywhere they exist in templates. Take one _name.scss file at a time. Create a separate issue and reference this master issue. Take advantage of git grep to find all references to that style. If you are making changes to styles within components or templates, feel free to create a grouped issue and pull request (as in #673) Once each issue and it's related PR's are complete, check off the files refactored on this list. Make sure you make changes in both the .scss and .hbs!

Files to Refactor

General

• [x] _alerts.scss
• [x] _animations.scss
• [ ] _buttons.scss
• [x] _code.scss
• [x] _colors.scss
• [x] _fonts.scss
• [ ] _forms.scss
• [x] _header.scss
• [x] _icons.scss
• [ ] _images.scss
• [ ] _inputs.scss
• [x] _misc.scss
• [x] _pace.scss
• [x] _retina.scss
• [x] _settings.scss

Templates

• [x] app.scss
• [x] dropdown-menu.scss
• [x] index.scss
• [x] main.scss
• [x] start.scss
• [x] task.scss
• [ ] task.scss
• [ ] task-new.scss
• [ ] templates/about.scss
• [ ] templates/team.scss
• [x] templates/project/index.scss
• [x] templates/project/settings/contributors.scss
• [x] templates/start/expertiese.scss
• [x] templates/start/hello.scss
• [x] templates/start/skills.scss

Components

• [ ] donations/donation-progress.scss
• [ ] donations/donation-status.scss
• [x] categories-list.scss
• [x] category-item.scss
• [ ] code-theme-selector.scss
• [ ] create-comment-form.scss
• [ ] donation-goal-edit.scss
• [ ] donation-goal.scss
• [ ] donation-payment.scss
• [x] drag-zone.scss
• [ ] editor-with-preview.scss
• [ ] error-wrapper.scss
• [x] image-drop.scss
• [x] login-form.scss
• [x] member-list-item.scss
• [x] navigation-menu.scss
• [ ] organization-header.scss
• [ ] organization-members.scss
• [ ] pager-control.scss
• [x] progress-bar.scss
• [ ] project-card-members.scss
• [ ] project-card-skills.scss
• [ ] project-card.scss
• [x] project-details.scss
• [x] project-header.scss
• [ ] project-item.scss
• [x] project-list.scss
• [x] project-long-description.scss
• [x] project-menu.scss
• [ ] project-task-list.scss
• [ ] role-item.scss
• [x] settings-menu.scss
• [x] signup-form.scss
• [x] site-footer.scss
• [ ] stripe-connect-button.scss
• [x] task-comment-list.scss
• [ ] task-details.scss
• [ ] task-header.scss
• [ ] task-item.scss
• [ ] task-new-form.scss
• [ ] task-status-button.scss
• [ ] task-status.scss
• [ ] task-title.scss
• [x] user-details.scss
• [x] user-menu.scss
• [ ] user-organizations-list.scss
• [ ] user-sidebar.scss
• [ ] user-skills-input.scss

[rlueder]

I'd like to help with the CSS refactoring efforts, I'm thinking _buttons.scss and any of the donation components still left (mainly because I spent time on them last night).

[rlueder]

I started looking into refactoring _colors.scss I'll have a PR later tonight.

[marineb]

Taking on _alerts.scss at #826

[marineb]

Taking on _code.scss with issue #829.

[rlueder]

I checked quite a few boxes on the list. I have four small integrations tests failing mainly due to renamed css classes, I'll fix those tomorrow at some point before moving on to projects and tasks.

[samserif]

Working on #673