[New] jsx-sort-props: add className to RESERVED_PROPS_LIST

[saimonkat]

This PR brings a new className prop to RESERVED_PROPS_LIST at jsx-sort-props rule. Related to this issue: #3175

Context
In many organizations, including ours, there is a coding standard that requires the className prop to be listed before all other props. This practice enhances code readability and consistency, making it easier for developers to quickly identify the styling-related aspects of a component.

Justification
While the current RESERVED_PROPS_LIST is designed to include only React's reserved props (children, dangerouslySetInnerHTML, key, ref), the addition of className aligns with a common industry practice that prioritizes styling props for better visibility. This change would provide flexibility for teams that adhere to this convention without impacting those who do not.

@ljharb, I completely understand the importance of maintaining the integrity of the reserved props list. However, given the widespread adoption of this convention, I believe that including className could benefit many teams. I hope you will consider this addition to support a broader range of coding standards.

Thank you for considering this request. 🙏

[ljharb]

I think the problem is that it's a harmful convention - see https://medium.com/@JanPaul123/don-t-pass-css-classes-between-components-e9f7ab192785.

[saimonkat]

@ljharb Thank you for your feedback. I understand your concerns about complexity, but I believe the use of className has evolved since 2015.

Today, utility-first CSS frameworks like Tailwind CSS have made className a standard for styling components efficiently. It allows for quick, consistent styling and is widely adopted in the React community.

Prioritizing className in prop sorting can enhance readability and maintainability, especially in large codebases. It aligns with modern practices where component-based styling is key.

[ljharb]

To support this, the only mechanism that would make sense is a new option to add an explicit list of prop names that should appear below reserved, above "the rest", and otherwise sorted in the same way as "the rest" are within that group.

Adding a non-reserved prop to the reserved props list is just wildly incorrect.

[saimonkat]

Ok @ljharb I see. Would you mind if I update this PR with such additional props list?

As I remember it has been mentioned in a couple of more issues: #3639 #3193

[ljharb]

Sure, let's do that.

[ljharb]

@saimonkat by deleting the fork, this PR is now unrecoverable :-/ please don't delete forks.

[saimonkat]

@saimonkat by deleting the fork, this PR is now unrecoverable :-/ please don't delete forks.

@ljharb I have misspelled the fork name and will open a new one with the properly name, referring to this thread

[ljharb]

For future reference, you can rename the fork without deleting it. You basically never need to delete a repo, to fix almost anything.