vyhody.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,
/// 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
 
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.
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ší...

// Nejsem odborník na DART, ale světem JS se třeba šíří Elm, který prostě přináší praktické užitky a řeší konkrétní problémy.
// CSS in JS také řešení konkrétní problémy, pokud má ten který projekt velké ambice musí prostě použít nástroje, které přinesou co
// nejvíc možností.
// Výhod oproti klasickému CSS je řada, předně
 -- kolokace - to je kokotina, to není nijak důležitý
 -- obrovská optimalizace přes selektory (výše)
 -- obrovská optimalizace přes selektory a pravidla (výše)
 -- jistota, která CSS byla použita
 -- media queries na serveru - totálně bez práce, prostě to funguje viz. Aphrodite
 -- Kritická CSS - co kdybyste měli prostě kritická CSS rovnou zabudovaná? Tohle prostě je přirozená feature CSS in JS
   -- každá komponenta má svoje CSS tudíž, když se renderuje, tak CSS která se stáhnou jsou jenom ta, co jsou potřeba, vždy
 -- minimální CSS pro stránku
 -- cachování celého CSS asynchronně - pak není třeba stahovat už žádná CSS a díky kritické cestě je to pořád superrychlé
 -- víte přesně, která komponentá používá jaká CSS, žádný globální stav, jednoduchý refaktor
 -- žádný BEM OOCSS SMACSS není potřeba, nikdo se nic nemusí učit, prostě píše styly.