css-in-js.js

// K čemu to je?
// Varianta 1. importování

import classes from './styles'


export default ({ visible }) => {
  return (
    <div className={visible ? classes.visible : classes.invisible}>This is some text</div>
  )
}

// na první pohled to samé, co klasická CSS, jo jasně je to tak, ale
// Krom toho, že pro selektování používají jen třídy bez zanoření, tak se vyhýbáte globálním selektorů - celé CSS jsou o trošku
// bezpečnější a neměly by se tak snadno rozsypat při další úpravě
// daleko větší výhoda je ale optimalizace
// 1. všechny nepoužité třídy se prostě ve výsledném CSS nepoužijí  - Třeba PurifyCSS slibuje 50% úsporu - tady je to out-of-the-box
// a s naprostou jistotou, že tam je vše, co je potřeba
// 2. a to je větší bomba - optimalizace selektorů
// třeba tyhle CSS
.bem-element__sublelement {
  width: 500px;
  height: 300px;
  color: white;
  font-weight: bold;
}

.bem-element__sublelement--mod {
  text-decoration: underline;
  font-size: 3rem;
}

// a použití
<div class="bem-element__sublelement bem-element__sublelement--mod">...</div>

// se mohou zoptimalizovat do
.bs {
  width: 500px;
  height: 300px;
  color: white;
  font-weight: bold;
}

.bsm {
  text-decoration: underline;
  font-size: 3rem;
}

// můžu si dovolit i upravit selectory v HTML - to při použití PHP nebo ve statickém HTML nelze
<div class="bs bsm">...</div>

// 3. optimalizace pravidel podle selektorů
// dělal jsem na to výzkum tady https://github.com/vojtatranta/css-property-selector-optimization
// idea je taková, že pokud se mi v CSS opakuje třeba 130x (to je normálka) pravidlo třeba font-weight: bold
// tak je lepší udělat selector .font-weigh-bold { font-weight: bold } a přidat ho k elemetům, které ho používají.
// tím se dá ušetřit dalších 50% CSS s minimálním nárůstem velikosti HTML díky zkárcení selektorů
// otázka je, jestli se to pak nepere s GZIPem ale nemělo by podle mých testů

// Je spousta dalších optimializacích CSS řešili jsme to tady: https://github.com/css-modules/css-modules/issues/193#issuecomment-262389236
// ale všechny končí u toho, že nedokážou změnit selectory, CSS in JS to dokáže a otevírá další prostory pro zrychlení načítání

// V Bodech
- nemusím řešit problémy s media query (ten zápis pro JS je dost děsivý)
  -- další megavýhodou CSS in JS je to, že Media queries fungujou na serveru, tudíž není potřeba dělat v PHP třeba tohle:

<?php if (resolution > iPhone < iPad) ?><div class="reklama-banner-big-screen"></div><?php endif; ?>
   -- tohle je potřádné Mobile First


- nemusím se učit zcela nový zápis (někdo s tím může mít problém)
   -- je hrozně těžké se naučit
      font-size: bold; a pak fontSize: 'bold', (nebo CSS jenom importovat)
        
   -- není přce důležité "jak se co píše", ale jaké to přináší výhody

- nemusím řešit problémy s :before a :after (pravděpodobně musím nahradit dalšíma elementama)
  -- :before a :after nejsou už potřeba, prostě tam dáte element navíc v JS, který může mít třídy
     a prostě je to lepší řešení než tenhl CSS hack

- nejde jednoduše řešit CSS fallbacky
  -- řeší se to naprosto stejně jako v CSS, žádný rozdíl v tom není
    -- opacity: 4, - '-ms-filter': 'alpha(40%)', 

- nejsem si jistý, jestli fungujou source mapy a zpětná editace
  -- je to Javascript, funguje to bez problémů  

- v samotném CSS je všechno v globálu, ale názvama tříd/selektorů jde simulovat jmenné prostory
 -- to je určitě pravda, ale pořád není jistota, že něco někam neutekla, s CSS in JS je to naprosto jistý
 
 
// Mám vvšechno přepsat do CSS in JS? Určitě ne. Pokud člověk seká komerční webíky, který není potřeba léta rozvíjet a udržovat,
 
Zkrátka si myslím, že tato myšlenka dlouho nevydrží. Něco jako Dart na JavaScript.
Zkrátka je to něco, v čem nevidím žádné výhody oproti samotnému CSS, ale všechno neznám.
/// pak se to určitě nevyplatí, protože je prostě rychlejší zapsat globální CSS a je to good-enough
// pokud ale mám projekt, který se rychle vyvíjí a chci mít jistotu, že ho se změnou nerozbiju, pak není jiné bezpečnější cesty
Jako jedinou výhodu vidim to, že to je přímo spojené s konkrétním kusem kódu v JS a že to může být víc dynamičtější...