question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use BEM for Styles

See original GitHub issue

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

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

Templates

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

Components

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

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
rluedercommented, Nov 21, 2016

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).

1reaction
marinebcommented, Dec 3, 2016

Taking on _code.scss with issue #829.

Read more comments on GitHub >

github_iconTop Results From Across the Web

BEM 101 - CSS-Tricks
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by ......
Read more >
BEM — Introduction
BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
Read more >
How to Use BEM Methodology - Toptal
BEM stands for Block Element Modifier. The main idea behind it is to speed up the development process, and ease the teamwork of...
Read more >
Creating clean CSS with BEM methodology - Devbridge
BEM is a front-end naming method for organizing and naming CSS classes. The Block, Element, Modifier methodology is a popular naming convention ...
Read more >
CSS / Methodology / BEM - BEM Info
The BEM methodology achieves the same results by using mixes, or by creating an additional block element. You don't need to create additional...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found