Cea mai mișto chestie la React/Vue

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.

2 Comentarii

Adaugă un comentariurăspuns pentru

Poți adăuga bucăți de cod folosind [code]codul tău aici[/code], [js][/js], [php][/php] etc.

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter