componentes para diseñar mi aplicación de reacción, hasta ahora tenía una carpeta separada en la carpeta de cada página llamada Styles y almacené mis contenedores de componentes con estilo dentro (por ejemplo ThemeToggler.Style.js o Section.Style.js y ...).
Pero me di cuenta de que mi código se estaba complicando y el número de archivos del proyecto aumenta muy rápido porque crear un componente significa crear 2 archivos, además, algunos estilos eran tan simples y pequeños que decidí escribirlos dentro del archivo principal del componente, porque es más legible.
Pero sigo sintiendo que este enfoque tampoco es bueno porque algunos estilos son demasiado largos para colocarlos dentro del archivo del componente, también algunos estilos no son sobre el componente en sí mismo, tal vez tengo un estilo para mostrar la navegación adyacente de este div si el usuario hace clic en él. Pensé que los colocaría dentro de un archivo separado llamado DivOnHover.js pero parece que no es correcto :)
Me gustaría escuchar su enfoque para administrar estilos de componentes con estilo, ¿cómo los almacena en su estructura de carpetas?
Personalmente, tiendo a usar esta estructura con bastante frecuencia:
components/ | Button/ | | Button.js | | Button.styles.js | Navbar/ | | Navbar.js | | Navbar.styles.jsA costa de crear más archivos, le permite separar la lógica y los estilos de sus componentes.
Mi estructura de carpetas sería así
/app /pages ( React Router ) /styles ( CSS only ) /components ( Reusable Components ) /styled ( Styled Components ) /hooks ( React Hooks ) index.js app.js routes.js ( React Router )