React - css w js.

IMO CSSy w JS to rak, a Material-UI razem z nimi (miałem okazję tykać jednego i drugiego na projekcie).

PS
Wystarczy przeczytać ich oficjalną dokumentację, żeby zobaczyć jakie rakowe to jest: http://www.material-ui.com/#/customization/styles

@Maciej Cąderek: a co sadzisz o nowej wersji 1? No i jesli mowisz, ze to jest rak, to co jest lepsze ? Chodzi mi rapid development, komponenty latwo rozszerzalne, bo chce korzystac z jednej biblioteki do kilku projektow i tylko customizowac wyglad jesli bedzie bardzo odbiegal.

Ogólnie co jest lepsze? IMO customowe style w CSS(SCSS) + BEM + PostCSS. Dla mnie CSSowe frameworki to zaciąganie długu technologicznego - fajne jak robisz prototyp albo niepubliczny panel administracyjny, niefajne jak projekt ma dalsze perspektywy.

@Maciej Cąderek: do tego trzeba ninja cssa. Tylko nie rzezbiarza, bo porobi ci takie widoki, ze nawet jednej klasy nie przeniesiesz. Im dluzej siedze w IT tym bardziej widze ze malo jest ogarniaczy w cssie, przeciez tego nie idzie przeniesc na zden projekt :D.

A co do watku, w takim razie co bys polecal ? Nie lubie sie babrac w cssie, backend mam juz obcykany, moge sobie tylko refactorowac zeby bylo slicznie + testy, a z frontem sie jeszcze bujam. Logike tez juz napisalem, ale brakuje porzadnego opiecia tego na widoki.

do tego trzeba ninja cssa. Tylko nie rzezbiarza, bo porobi ci takie widoki, ze nawet jednej klasy nie przeniesiesz. Im dluzej siedze w IT tym bardziej widze ze malo jest ogarniaczy w cssie, przeciez tego nie idzie przeniesc na zden projekt

Jakby framework CSS tutaj pomagał - jak wspomniany "rzeźbiarz" weźmie się za dostosowywanie frameworka do wizji grafika to dopiero jest płacz i magia !importantów ;) Jak ktoś nie zna języka to żaden framework nie pomoże (to tak jak programista Angulara, który nie zna JSa).

A co do watku, w takim razie co bys polecal ? Nie lubie sie babrac w cssie, backend mam juz obcykany, moge sobie tylko refactorowac zeby bylo slicznie + testy, a z frontem sie jeszcze bujam. Logike tez juz napisalem, ale brakuje porzadnego opiecia tego na widoki.

Jak koniecznie chcesz jakiś framework to serio nie wiem co Ci z czystym sumieniem polecić ;)

@Maciej Cąderek: dzieki - za szczerosc :D Mimo wszystko caly czas stoje przy material-ui (w wersji 1+). Po prostu z tego co widze szybko mozna stworzyc widoki, latwa customizacja.

@Desu:

Co do styled components - porównajmy dwie wersje:

a) html + classes

const Post = ({ title, content }) => (
  <article className="post">
    <img className="post__title-image" src="" />
    <h2 className="post__title">{title}</h2>
    {content.split('\n').map(thought => <p className="post__thought">{thought}</p>)}
  </article>
)

.post {
  ...styles
}

.post__title-image {
  ...styles
}

.post__title {
  ...styles
}

.post__thought {
  ...styles
}

b) styled components

const Post = ({ title, content }) => (
  <PostContainer>
    <TitleImage src="" />
    <Title>{title}</Title>
    {content.split('\n').map(thought => <Thought>{thought}</Thought>)}
  </PostContainer>
)

const PostContainer = styled.article`
  ...styles
`

const TitleImage = styled.img`
  ...styles
`

const Title = styled.h2`
  ...styles
`

const Thought = styled.p`
  ...styles
`

Twórcy styled components zachwycają się jaki kod jest piękny, semantyczny - no cóż, może i wygląda ładnie na pierwszy rzut oka, ale:

• ukrywa semantykę tworzonego HTMLa - a ta z punktu widzenia końcowego produktu jest dużo ważniejsze - weź zrób code review czegoś takiego pod kątem wynikowego kodu ;/
• to, że nie widzisz rzeczywistej struktury to jedno, jak już się dopatrzysz błedów to refaktorowanie znaczników skacząc po poszczególnych "styled components" to udręka (pół biedy jak są chociaż w tym samym pliku) - niepotrzebna fragmentaryzacja kodu (właściwie to całkowite rozczłonkowanie opisu struktury dokumentu i wymieszanie jej z definicjami stylów),
• w wersji klasycznej masz widoczną zarówno strukturę HTMLa jak i warstwę abstrakcji zawartą w nazwach klas,

Podsumowując - uważam styled components za zbędną warstwę abstrakcji, a co ważniejsze - jest to "leaky abstraction" i zaciemnianie kodu.

Nie wiem, może czegoś nie rozumiem ;/

W jednym z projektów rozważaliśmy użycie ostylowanych komponentów (i poczyniliśmy kilka eksperymentów), ale zrezygnowaliśmy z nich na rzecz zwykłego CSS-a. Część powodów pokrywała się z tym, co zostało napisane w poprzednim poście. Doszliśmy do wniosku, że istnieje już zupełnie wystarczający meta-język do reprezentacji CSS-ów i nazywa się on: CSS. Źródłową postać zapisywaliśmy w SASS i skupiliśmy się na zastanowieniu się, jak zorganizować sobie mixiny i klasy, aby nie mieć problemów z utrzymaniem i przy okazji nie uzależniać strony wizualnej od Reacta.

Zaleta CSS w JS to szybkie prototypowanie, jeśli nie wiesz co dokładnie chcesz zrobić. Też fakt, że nie musisz myśleć nad wymyślaniem nazwy dla klasy jest też big win.

Inna zaleta to jak style zależą mocno od stanu aplikacji (np. animacja obiektów), to możesz łatwo zrobić data-binding (bo inline style to taki data-binding między wartościami JS a stylami w DOM). I mieć w łatwy sposób coś zanimowane, gdzie wartości stylów idą np. ze stanu komponentu (oczywiście w CSS3 też są animacje, ale chodzi mi o te przypadki, gdzie łatwiej coś zanimować JSem niż CSSem).

Ale wady to brak elastyczności (choćby brak możliwości hover, bez zaciągania dodatkowych bibliotek, które to jakoś symulują), zaśmiecanie komponentów stylingiem, większa specyficzność w CSS inline-stylów (więc trudniej nadpisać), brak łatwej możliwości podmiany jakiegoś stylu globalnie we wszystkich komponentach (np. żeby zrobić odpowiedni temat graficzny). Generalnie stylowanie staje się bardziej toporne po prostu, style w JS to taka partyzantka (którą sam często uprawiam, co nie zmienia tego, że jest to partyzantka).

Zdecydowalem sie jednak na: https://react-md.mlaursen.com/
Ma najlepsze komponenty na start moim zdaniem (poza material-ui), kod jest znacznie krotszy, jest responsywne.
Bralem pod uwage react-toolbox, material-ui i wlasnie react-md. Wypadl najlepiej mimo, ze jest rozwijany przez 1 osobe.

Zbudowalem sobie jeden widoczek w material-ui, troche bardziej skomplikowany - zgroza :)