Cea mai mișto chestie la React/Vue

Constă în… modulele CSS. Sigur, au implementări diferite, dar ideea este aceeași: legi CSS-ul doar de un anumit scope și nu ai grija vreunui conflict dubios între componente. Cum funcționează?

În Vue§

În Vue implementarea se numește „Scoped CSS” și mi se pare foarte simplă, poate și pentru că fiecare componentă este într-un singur fișier.

<template>
  <div class="foo"></div>
</template>

<style scoped>
  .foo {}
</style>

Compilarea înseamnă conversia în ceva de genul:

<div data-v-f94729a></div>

<style>
  [data-v-f94729a] {}
</style>

(există și opțiunea de module)

React§

În React este un pic diferit și nu atât de straight forward.

În componentă trebuie să imporți fișierul CSS:

import styles from 'component.module.css'

Și îl folosești așa:

<div className={ styles.foo } />

Rezultatul este un pic mai citibil decât Vue și este o combinație între numele fișierului CSS, numele componentei și un hash. Șmecheria este că fișierul CSS trebuie să conțină particula .module

Mi se pare o treabă foarte mișto, pentru că e greu să ai conflicte în felul ăsta și reușești să izolezi componentele complet. Mă oftic un pic că nu există posibilitatea de a implementa așa ceva în PHP. Oh well..

Btw, Vueschool are o reducere consistentă zilele astea.