css - styled - Organización de componentes de estilo

styled components react

Question

Quiero usar componentes de estilo en mi aplicación y me pregunto cómo organizarla.

Básicamente, los componentes de estilo se asignan a componentes específicos para su reutilización.

Pero ¿qué pasa con los componentes de estilo que me gustaría usar muchas veces en otros componentes (por ejemplo, componentes de animaciones)? ¿Debo crear un archivo donde guardaré estos componentes de estilo ''globales'' e importarlos a muchos componentes?

¿Es buena práctica?

Answer 1

Así es como se ve la mayoría de mis grandes aplicaciones de producción construidas con componentes de estilo:

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

La carpeta de la App contiene todos los componentes específicos que conforman su aplicación más grande. (podría estructurar eso por ruta en su aplicación real) Cada uno de esos componentes más grandes es una carpeta con un archivo index.js y un montón de componentes con estilos en archivos individuales.

Mientras estoy creando mi aplicación y me doy cuenta de que necesito un componente con estilo de un componente más grande en otro componente más grande, arrastro su archivo a la carpeta shared/ , actualizo todas las importaciones y ¡eso es todo! Con el tiempo, se shared/ convierte en una biblioteca de patrones improptu con todos los componentes que quiero / necesito reutilizar en toda la aplicación.

Otra forma que es bastante común es tener archivos style.js en las carpetas de componentes que contienen todos los componentes con estilo de ese componente. La ventaja es que tiene menos archivos que se interponen en su camino, pero con el inconveniente de que es más difícil notar la duplicación y mover componentes a la carpeta compartida es más trabajo.

Personalmente uso la primera versión más a menudo que no, pero eso es probablemente una cuestión de gustos: ¡pruébelos y vea cuál le gusta más!

Answer 2

La forma en que organizo mi proyecto con componentes de estilo es la siguiente:

src
├── Layout
│   ├── Header
│   │   ├── Logo.jsx    
│   │   ├── styled.js
│   │   ├── container.js
│   │   └── index.js
│   └── LeftPanel
│       ├── LeftPanel.jsx
│       ├── styled.js
│       └── index.js
└── index.js

Razonamiento:

• Cada carpeta es una característica.
• Cada archivo dentro de una carpeta tiene una responsabilidad.
  • .jsx representa un componente de presentación.
  • styled.js son componentes de estilo. Administre solo el aspecto de los componentes. También se debe importar aquí cualquier archivo relacionado con el tema, como colores, estilos de bordes, etc.
  • container.js Si estamos usando una administración estatal, deberíamos tener un artefacto que conecte nuestros componentes con esa biblioteca. En este caso Redux.
  • index.js exporta lo que sea relevante.

La ventaja que veo con este enfoque es que está bastante claro dónde se deben hacer los cambios si decide utilizar otra biblioteca CSSinJS.

Espero que tenga sentido para otra persona.

¡Aclamaciones!

Answer 3

También puedes probar Diseño atómico para estructurar tu aplicación. De esta manera podrás reutilizar tus componentes de estilo. Basado en la metodología de Diseño Atómico, usted organiza sus componentes en átomos, moléculas, organismos, páginas y plantillas.

Átomo

Un átomo es una etiqueta html nativa. Por ejemplo, un elemento de entrada puede ser un átomo.

const Input = props => <input {...props} />

Moléculas

El grupo de átomos es una molécula. Por ejemplo:

const Field = ({ label, ...inputProps }) => (
    <Label>
        {label}
        <Input {...inputProps} />
    </Label>
)

Organismos

Organismo es un grupo de átomos, moléculas y / u otros organismos. Por ejemplo:

const Form = (props) => (
    <form {...props}>
        <Field label="Name" type="text" />
        <Field label="Email" type="email" />
    </form>
)

Páginas

Una página es donde colocarás sobre todo organismos. Por ejemplo:

const HomePage = () => (
    <PageTemplate header={<Header />}>
        <Form />
    </PageTemplate>
)

Plantillas

Una plantilla es un diseño que se utiliza en las páginas. Por ejemplo:

const PageTemplate = ({ header, children }) => (
    <main>
        {header && <div>{header}</div>}
        {children}
    </main>
)

Ejemplo de Github

Hay un proyecto inicial React en Github que utiliza la metodología de diseño atómico con integración de componentes de estilo. Aquí está el Link .