search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
229.29k stars 46.96k forks source link

Naming convention #28624

Closed MiloosN5 closed 7 months ago

MiloosN5 commented 7 months ago

Hello to everyone! I know that naming convention for the React components are not fixed, but I have situation that confuse me. I want my projects to have multiple different buttons. I prefer using BEM naming convention, but I don't know is it good to use for Component naming or just for CSS className? For me, the following will be acceptible:

project/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button--1.jsx
│   │   │   ├── Button--2.jsx
│   │   │   └── Button--3.jsx

I saw it quite frequently that people use something like "PrimaryButton", "SecondaryButton", but for me this look inexhaustible -> for me better will be "ButtonPrimary", "ButtonSecondary" since the "Button" is BASE.

Also, should BLOCK be used in naming convention instead of MODIFIER, like:

project/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Form__button.jsx
│   │   │   ├── Sidebar__button.jsx
│   │   │   └── Footer__button.jsx
rickhanlonii commented 7 months ago

Unfortunately, this issue tracker is for reporting bugs in React, and is not a support forum for using React and we don't offer opinions on patterns like naming conventions. We want you to find the answer you're looking for, so we suggest posting one of the Community Forums: https://react.dev/community