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.

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

Transitioning from Traditional CSS, and Inline Styles to theme.json #20

Open
alexdeborba opened this issue Oct 22, 2023 · 0 comments
Open
Assignees
Labels
[Component] Style Variations Issues related to different theme style options. [Component] theme.json Issues related to the theme.json configuration file. [Type] Code Quality Issues related to the cleanliness, efficiency, or maintainability of the code. [Type] Performance Speed or efficiency improvements.

Comments

@alexdeborba
Copy link
Collaborator

Description:

The theme is partially reliant on the style.css file and sporadic inline styles, can benefit significantly from a strategic move to theme.json. The evolution of WordPress and the emergence of the theme.json offer a modern method of managing styles that promises performance enhancements, easier maintenance, and an overall cohesive design experience.

Benefits of Transitioning to theme.json:

1. Performance Improvements:

  • Reduced website load times due to efficient parsing and rendering.
  • Optimized CSS delivery by serving only necessary styles.
  • A performance boost by minimizing inline styles, leading to cleaner HTML markup.

2. Enhanced Maintenance and Development:

  • Centralized styling in theme.json for simpler management.
  • Consistency in design elements across the theme.
  • Easier theme updates without the risk of overriding custom styles.

3. Better Integration with Blocks:

  • Seamless integration with Block's global styles.
  • Enhanced user control over theme styles directly from the block editor.

4. Future-Proofing:

  • Prepares the theme for future WordPress developments, ensuring longevity and compatibility.

5. Minimization of Inline Styles:

  • Cleaner and more readable HTML markup.
  • Reduced discrepancies and unexpected design changes by ensuring design elements' consistency.

Suggested Next Steps:

  1. Audit both style.css and existing inline styles to catalog all styles.
  2. Translate these styles into theme.json, ensuring the specificity and intent of inline styles are captured.
  3. Extensively test the theme to ensure visual consistency post-transition.
  4. Iteratively refine the theme.json, recognizing that certain inline styles might still be necessary for specific design intricacies.
@alexdeborba alexdeborba added [Type] Code Quality Issues related to the cleanliness, efficiency, or maintainability of the code. [Component] Style Variations Issues related to different theme style options. [Component] theme.json Issues related to the theme.json configuration file. [Type] Performance Speed or efficiency improvements. labels Oct 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Style Variations Issues related to different theme style options. [Component] theme.json Issues related to the theme.json configuration file. [Type] Code Quality Issues related to the cleanliness, efficiency, or maintainability of the code. [Type] Performance Speed or efficiency improvements.
Projects
None yet
Development

No branches or pull requests

3 participants