Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue: Refactor Inline Styles to External CSS/SCSS for Maintainability #4374

Open
4 tasks done
Vaibhav701161 opened this issue Feb 9, 2025 · 8 comments · May be fixed by #4454
Open
4 tasks done

Issue: Refactor Inline Styles to External CSS/SCSS for Maintainability #4374

Vaibhav701161 opened this issue Feb 9, 2025 · 8 comments · May be fixed by #4454
Labels
Issue-Bug

Comments

@Vaibhav701161
Copy link

Description

Currently, many components in the Music Blocks repository use inline styles for UI elements. This approach makes it difficult to maintain, scale, and enforce a consistent design system across the application. Inline styles also lack the flexibility of reusable CSS classes, leading to duplicated styles and inconsistent theming.

Expected Behavior

  • Migrate all inline styles to a structured CSS/SCSS approach.
  • Ensure styles are modular, reusable, and follow best practices.
  • Improve maintainability by following a consistent styling standard across all components.

Checklist

  • I have read and followed the project's code of conduct.
  • I have searched for similar issues before creating this one.
  • I have provided all the necessary information to understand the issue and the proposed fix.
  • I am actively working on this issue . Working on this issue by others will lead to unnecessary duplication of efforts.

Thank you for contributing to the project!

📚 See [contributing instructions](https://github.com/sugarlabs/musicblocks/blob/master/README.md).

🙋🏾🙋🏼 Questions? [Community Matrix Server](https://matrix.to/#/#sugar:matrix.org).
@omsuneri
Copy link
Member

omsuneri commented Feb 9, 2025

@Vaibhav701161 can you please lay down the idea of this implementation cause it is a bit lengthy task and i m curious about how you going to resolve this

@Vaibhav701161 Vaibhav701161 mentioned this issue Feb 9, 2025
Closed
@Vaibhav701161
Copy link
Author

Yeah, I get that it's a lengthy task, so I’m breaking it down into smaller steps. My approach is simple:

  1. Identify files with inline styles .
  2. Move those styles to external CSS files while keeping the structure clean and reusable.
  3. Ensure that everything looks the same after the refactor (no UI breakages).
  4. Make changes in batches and submit PRs gradually instead of doing it all at once.

This way, it stays manageable, and we can track progress easily. Let me know if you have any suggestions!

@omsuneri
Copy link
Member

omsuneri commented Feb 9, 2025

@Vaibhav701161 as per discussion in the meet with @walterbender we decided to keep this issue at low priority right now as this might took a lot time to understand and rebuild
you can too continue with your work on this i appreciate
but for time being its not on high requirement

@Vaibhav701161
Copy link
Author

I will work on this side by side to get my hands dirty on the codebase and contribute to other issues parallelly.

@omsuneri
Copy link
Member

omsuneri commented Feb 10, 2025 •
edited
Loading

I will work on this side by side to get my hands dirty on the codebase and contribute to other issues parallelly.

@Vaibhav701161 great

@yashvikram30
Copy link

i can work on this, but can you tell me that where should I place the external stylesheets to? Like should it be /css or /dist/css?

@yashvikram30
Copy link

i can work on this, but can you tell me that where should I place the external stylesheets to? Like should it be /css or /dist/css?

@Vaibhav701161

@yashvikram30
Copy link

i can work on this, but can you tell me that where should I place the external stylesheets to? Like should it be /css or /dist/css?

@walterbender

@Vaibhav701161 Vaibhav701161 linked a pull request Feb 23, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Issue-Bug
Projects
None yet
Milestone
No milestone
3 participants
@omsuneri @yashvikram30 @Vaibhav701161