[wp-trac] [WordPress Trac] #60064: Edit no-js CSS in bundled themes

[WordPress Trac]

#60064: Edit no-js CSS in bundled themes
---------------------------+------------------------------
 Reporter:  shawfactor     |       Owner:  (none)
     Type:  enhancement    |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  minor          |  Resolution:
 Keywords:  2nd-opinion    |     Focuses:
---------------------------+------------------------------

Comment (by nuanjuxn96):

 Updating the CSS directive in the Twenty Fifteen theme's style.css file to
 account for the possibility of other plugins adding their own no-js
 classes to the body is a prudent step to avoid conflicts and ensure better
 compatibility. Let's walk through the process of making this adjustment:

 ### Step 1: Locate the CSS

 Navigate to the `style.css` file of the Twenty Fifteen theme. This file is
 typically located within the theme's directory, often found at `wp-
 content/themes/twentyfifteen/style.css`.

 ### Step 2: Identify the CSS Directive

 Locate the CSS directive you mentioned in the `style.css` file:

 ```css
 .no-js .main-navigation ul ul {
     /* Existing styles */
 }
 ```

 ### Step 3: Modify the CSS Directive

 Alter the CSS directive to include the `html` element as well, ensuring a
 more specific selector:

 ```css
 html.no-js .main-navigation ul ul {
     /* Updated styles */
 }
 ```

 ### Step 4: Save Changes

 Save the changes you made to the `style.css` file.

 ### Step 5: Testing

 After saving the changes, it's essential to test the theme thoroughly to
 ensure that the modification hasn't introduced any unintended side
 effects. Test the navigation functionality, both with JavaScript enabled
 and disabled, to verify that everything works as expected.

 ### Step 6: Communication with Buddypress

 It's commendable that you've raised the issue with Buddypress directly.
 Communicating with them about potential conflicts and suggesting a
 standardized approach for adding no-js classes can help improve
 compatibility across themes and plugins.

 ### Step 7: Broader Ticket Proposal

 Consider proposing a broader ticket or discussion within the WordPress
 community regarding a standardized way of adding no-js classes. This could
 lead to better practices and guidelines for theme and plugin developers,
 ultimately enhancing the overall user experience and reducing conflicts.

 ### Conclusion

 By updating the CSS directive in the Twenty Fifteen theme's style.css file
 and communicating with Buddypress about potential conflicts, you're taking
 proactive steps to ensure better compatibility and smoother user
 experiences. Additionally, proposing a broader discussion on standardized
 practices for adding no-js classes can contribute to the improvement of
 WordPress themes and plugins ecosystem.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60064#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform