CartoDB / cartodb

Location Intelligence & Data Visualization tool
http://carto.com
BSD 3-Clause "New" or "Revised" License
2.75k stars 650 forks source link

Refactor New Dashboard's common CSS styles #14670

Open jesusbotella opened 5 years ago

jesusbotella commented 5 years ago

Currently, our CSS styles are split into two folders of the repository: CSS in .vue files within components and common styles for the application which are located in /assets/stylesheets/new-dashboard.

Given that our New Dashboard project is a self-contained project within cartodb JavaScript assets, it makes sense to move those separated styles to the New Dashboard folder and have them located all together.

Leveraging that change, we can set up a proper CSS scaffolding following any of the architectures that make sense for us (like 7-1 CSS architecture). Separating styles by concerns, instead of them being unorganized.

As an extra ball, it could be great if we could use BEM for all those common styles which are not scoped and may require a bit of effort when naming them to avoid classes collision.

To summarize:

  1. As a first step, we need to move the styles from /assets/stylesheets/new-dashboard to lib/assets/javascripts/new-dashboard/styles folder.
  2. Setup a CSS scaffolding to create a good CSS separation.
  3. Rewrite the CSS classes naming to be BEM compliant.
VictorVelarde commented 5 years ago

IMO it would be nice to split our work for this issue in at least two PRs: