by JUAN CARLOS MEDINA MTZ

@__jcmedina

         Styled

Components

WHO?

@__jcmedina

 

User Interface Engineer

Senior FrontEnd Developer

Mentor & Speaker

STYLED

COMPONENTS?

1. CSS es raro
2. Puedes aprenderlo en 15 minutos
3. Pero te puede tomar años encontrar una buena forma de organizar los estilos
4. Limitado pero permisivo
5. Hojas de Estilo Caóticas
6. Usar metodologías es completamente opcional

introduction

NEW WAVE OF CSS

• Automatic Critical CSS
• No class name bugs
• Easier deletion of CSS
• Simple dynamic styling
• Painless maintenance
• Automatic vendor prefixing

GETTING STARTED

INSTALAcION

npm install --save styled-components

USO

import styled from 'styled-components'

 

const Title = styled.h1`

    font-size: 1.5em;

    text-align: center;

    color: lightgrey;

`;

const Wrapper = styled.section`

    padding: 4em;

    background: purple;

`;

render(

    <Wrapper>

        <Title>

            Hello World!

        </Title>

    </Wrapper>

);

 

RESULTado

Disminuyendo la COMPLEjidad

“The basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.”

Max Stoiber - Styled-Components co-creator

PROPS sobre CLASSES

Manten la clase

WARNINGS

• Stilizar un Child component
• No se pueden PreRenderizar estilos
• Nombres de clases random

PROS

• Pensar en componentes
• Confiar el poder del ecosistema JS para optimizar el CSS
• Evita colisiones de estilos
• Prefixes segun el explorador automatico
• Limpieza del DOM
• Unit testing del CSS
• Y mas...

WHERE TO START?

conclusion

Questions?

Thanks!

@__jcmedina    |    @trcjs

about.me/jcmedinamartinez