Refactor/138 Addressing CSS Refactoring in Phoenix Live Dashboard

In contribution to the Phoenix Live Dashboard repository, I tackled an issue initially described by José Valim, the creator of Elixir. This project provided an excellent opportunity to demonstrate my skills in CSS refactoring and component-based design.

The Challenge

Encouraged by my mentor and colleague @MachinesAreUs, I set out to resolve a problem highlighted by José Valim:

👉 https://github.com/phoenixframework/phoenix_live_dashboard/issues/138

The goal was to refactor the CSS to decouple specific elements from their containers, thereby allowing for more modular and reusable components.

My Approach

I began by decoupling the classes in color_bar_component, color_bar_legend, and table_component from their parent containers. The aim was to maintain semantic relationships while ensuring each class stood independently. Here’s an example of the restructuring:

👉 Accepted PR

1.color-bar {
2  &-progress {
3    border-radius: 2px;
4    ...
5    &-title {
6      color: $color-gray-700;
7      ...
8    }
9  }
10}
11
Copy

The output classes were color-bar-progress and color-bar-progress-title.

Additionally, I:

• Split resource_usage.scss into color_bar.scss and color_bar_legend.scss, aligning these files with their respective components (color_bar_component.ex and color_bar_legend.ex).
• Renamed tabular_page.scss to table.scss, using a phx prefix to avoid clashes with Bootstrap's classes.
• Moved styles that only override Bootstrap into the extends folder and utility/helper styles into the utils folder.

Feedback and Finalization

José Valim reviewed the pull request and provided positive feedback, along with a minor suggestion 😱:

I addressed this feedback by refining the class naming strategy, leading to the approval and merging of the PR into the master branch.

Done! 🎉

This experience was invaluable, allowing me to deepen my understanding of component-based architecture and CSS management in large projects. It’s a great addition to my portfolio, showcasing my ability to contribute to and improve open-source projects.