Stiven Castillo

Frontend Dev / UI Designer

at LaManicurista App 💅

https://stiven.dev

CSS-in-JS

with React and Styled-components

😒

😍

Elementos aislados

Nuevas tecnologías

  • React
  • Angular
  • Vue
  • Svelte
  • Sass
  • Less
  • PostCSS
  • BEM
  • BEMIT
  • npm
  • Yarn
  • Grunt
  • Webpack
  • Gulp
  • TypeScript
  • Redux
  • Rxjs
  • Bootstrap
  • Flexbox
  • Css Grid
  • Graphql
  • Jsx
  • Mobx
  • Babel
  • y Más...

CSS

<style>
  .button {
    background: red;
    padding: 16px;
    color: white;
    border: none;
  }

  .button-rounded {
    border-radius: 8px;
  }
</style>

<button class="button button-rounded">My Fucking Button</button>

Begginers and some 'Experts' 🤫

Important!

Cascada

Herencia

Especificidad

Cascada

Herencia

Especificidad

Es el mecanismo que controla el resultado final de un elemento cuando se le aplican varias reglas.

<style>
  p {
    color: red;
  }

  p {
    color: green;
  }
</style>

<p>Mi vieja mula ya no es lo que era, ya no es lo que era, ya no es lo que era</p>

Cascada

Herencia

Especificidad

Es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos

<style>
  .container {
    color: green;
    font-size: 20px;
    width: 960px;
    padding: 20px;
  }

  .paragraph {
    font-family: sans-serif;
  }
</style>

<div class="container">
  Sonó, sonó, sonó. Me llaman del bar de Moe
  
  <p class="paragraph">En ese buen lugar, me gusta beber alcohol</p>
</div>

Cascada

Herencia

Especificidad

Son los medios por los que el navegador decide qué valores de una propiedad de CSS son más relevantes para un elemento y, por lo tanto, serán aplicados

body.container > #title:hover {}

CSS-in-JS with React and Styled-Components

By Stiven Castillo

CSS-in-JS with React and Styled-Components

Cuando aprendimos HTML, CSS y Javascript en la universidad o en cualquier otro lugar, nos dijeron que estas eran cosas totalmente aisladas y que se debían manejar de manera separada, cada tecnología en archivos diferentes (Html en archivos html, css en css y javascript en js. Hasta podríamos decir que la estructura de carpetas también se debía manejar separado).

  • 66