Aké sú rozdiely medzi rôznymi prístupmi k pripájaniu…

Prístupy k CSS sa delia na:

Nativny CSS:
- Klasický CSS: Súbory .css, pripojené cez <link>. Globálna oblasť viditeľnosti, riziko konfliktov.
- CSS vlastnosti (CSS premenne): Použitie premenných v CSS na centralizované riadenie hodnôt.
```
:root {
    --main-color: blue;
}

.element {
    color: var(--main-color);
}
```
- CSS preprocessory (Sass, Less, Stylus): Rozširujú možnosti CSS pridaním premenných, mixínov, vnorenia, funkcií. Kompilujú sa do bežného CSS.
```
$primary-color: #333;

body {
    color: $primary-color;
}
```
- CSS postprocesory (Autoprefixer, cssnano): Spracovávajú CSS po napísaní, pridávajú prefixy, minimalizujú kód.

CSS-in-JS:

Štýly sa píšu v JavaScript alebo TypeScript. Inštancovanie štýlov, dynamické vytváranie štýlov. Príklady: Styled Components, emotion, JSS.

// Styled Components
import styled from 'styled-components';

const Button = styled.button`
    color: ${props => props.primary ? 'white' : 'palevioletred'};
    background: ${props => props.primary ? 'palevioletred' : 'white'};
`;

Metodológie (štruktúrovanie CSS):
- BEM (Block, Element, Modifier): Prísny prístup k pomenovaniu tried pre vytváranie nezávislých blokov.
```
.block {}
.block__element {}
.block--modifier {}
```
- OOCSS (Object Oriented CSS): Rozdelenie štruktúry (objektov) a vzhľadu (skínov).
- SMACSS (Scalable and Modular Architecture for CSS): Kategorizácia pravidiel CSS (Base, Layout, Module, State, Theme).

Hlavné rozdiely sú:

Oblasť viditeľnosti: Globálna (nativny) verzus lokálna (CSS-in-JS, CSS moduly).
Syntax: Dekoratívna (nativny) verzus programová (CSS-in-JS).
Inštancovanie: Slabé (klasický CSS) verzus silné (CSS-in-JS, CSS moduly).
Dynamika: Statická (nativny) verzus dynamická (CSS-in-JS).
Riadenie závislostí: Ťažšie v veľkom projekte s nativnym CSS, integrované v CSS-in-JS.

Výber prístupu závisí od veľkosti projektu, tímu, používaného frameworku a požiadaviek na inkapsuláciu a dynamiku štýlov.

Aké sú rozdiely medzi rôznymi prístupmi k pripájaniu štýlov (CSS) vo vývoji?