Najlepsze praktyki w stylu Inact.js

Wiem, że możesz określić style w klasach React, takie jak to:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Czy powinienem dążyć do stylizacji w ten sposób i nie mieć żadnych stylów określonych w moim pliku CSS?

Czy powinienem całkowicie unikać stylów wbudowanych?

To trochę dziwne i niechlujne, aby zrobić trochę obu - dwa miejsca musiałyby zostać sprawdzone podczas poprawiania stylu.

Nie ma jeszcze wielu „najlepszych praktyk”. Ci z nas, którzy używają stylów wbudowanych do komponentów React, nadal bardzo eksperymentują.

Istnieje wiele podejść, które są bardzo różne: React Tabela porównawcza lib w stylu wbudowanym

Wszystko albo nic?

To, co nazywamy „stylem”, zawiera w rzeczywistości sporo pojęć:

• Układ - jak element / komponent wygląda w relacji do innych
• Wygląd - charakterystyka elementu / komponentu
• Zachowanie i stan - jak element / komponent wygląda w danym stanie

Zacznij od stylów państwowych

React już zarządza stanem twoich komponentów, dzięki czemu style stanu i zachowania są w naturalny sposób dostosowane do kolokacji z logiką komponentów.

Zamiast budować komponenty do renderowania z warunkowymi klasami stanów, rozważ bezpośrednie dodanie stylów:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Zauważ, że używamy klasy do stylizowania wyglądu, ale nie używamy już żadnych .is-klas z prefiksem dla stanu i zachowania .

Możemy użyć Object.assign(ES6) lub _.extend(podkreślenie / lodash), aby dodać obsługę wielu stanów:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Personalizacja i możliwość ponownego użycia

Teraz, gdy Object.assigngo używamy , staje się bardzo proste, aby nasz komponent mógł być wielokrotnie wykorzystywany w różnych stylach. Jeśli chcemy, aby zastąpić style domyślne, możemy to zrobić w miejscu połączenia z rekwizytów, tak: <TodoItem dueStyle={ fontWeight: "bold" } />. Zaimplementowane w ten sposób:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

Układ

Osobiście nie widzę przekonującego powodu, aby wstawiać style układu. Istnieje wiele świetnych układów CSS. Po prostu użyłbym jednego.

To powiedziawszy, nie dodawaj stylów układu bezpośrednio do swojego komponentu. Zawiń komponenty komponentami układu. Oto przykład.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

W celu obsługi układu często próbuję zaprojektować komponenty, które będą 100% widthi height.

Wygląd

Jest to najbardziej kontrowersyjny obszar debaty „w stylu”. Ostatecznie, to zależy od twojego projektu i wygody twojego zespołu dzięki JavaScript.

Jedno jest pewne, będziesz potrzebować pomocy biblioteki. Stany przeglądarek ( :hover, :focus) i zapytania o media są bolesne w surowym React.

Lubię Radium, ponieważ składnia tych twardych części ma na celu modelowanie SASS.

Organizacja kodu

Często zobaczysz obiekt stylu na zewnątrz modułu. W przypadku komponentu listy zadań może wyglądać mniej więcej tak:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

funkcje gettera

Dodanie do szablonu kilku stylów logiki może być nieco nieporządne (jak pokazano powyżej). Lubię tworzyć funkcje pobierające do obliczania stylów:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Dalsze oglądanie

Omówiłem to wszystko bardziej szczegółowo na React Europe na początku tego roku: Style Inline i kiedy najlepiej „po prostu używać CSS” .

Cieszę się, że pomagam, gdy dokonujesz nowych odkryć po drodze :) Hit me up -> @chantastic

Atrybut stylu w React oczekuje wartości jako obiektu, tj. Pary wartości klucza.

style = {}będzie miał w środku kolejny przedmiot, {float:'right'}który sprawi, że będzie działać.

<span style={{float:'right'}}>{'Download Audit'}</span>

Mam nadzieję, że to rozwiązuje problem

Używam stylów wbudowanych w moich komponentach React. Kolokacja stylów w komponentach jest dla mnie o wiele bardziej przejrzysta, ponieważ zawsze jest jasne, jakie style ma dany komponent, a których nie. Dodatkowo posiadanie pełnej mocy Javascript naprawdę upraszcza bardziej złożone potrzeby stylizacji.

Na początku nie byłem przekonany, ale po kilku miesiącach zagłębiania się, jestem w pełni przekonwertowany i jestem w trakcie konwersji całego mojego CSS na wbudowane lub inne metody CSS oparte na JS.

Bardzo przydatna jest również prezentacja pracownika Facebooka i współpracownika React „vjeux” - https://speakerdeck.com/vjeux/react-css-in-js

Głównym celem atrybutu style są dynamiczne style oparte na stanie. Na przykład możesz mieć styl szerokości na pasku postępu w oparciu o jakiś stan, lub pozycję lub widoczność w oparciu o coś innego.

Style w JS nakładają ograniczenie, że aplikacja nie może zapewnić niestandardowego stylu dla komponentu wielokrotnego użytku. Jest to całkowicie dopuszczalne w wyżej wymienionych sytuacjach, ale nie w przypadku zmiany widocznych cech, zwłaszcza koloru.

James K Nelson w swoim liście „Dlaczego nie należy stylizować reagowania na komponenty za pomocą JavaScriptu” stwierdza, że ​​tak naprawdę nie ma potrzeby stosowania stylów wewnętrznych z jego wadami. Stwierdził, że stare nudne css z less / scss jest najlepszym rozwiązaniem. Część jego tez na korzyść css:

• z możliwością rozszerzenia na zewnątrz
• dźwignia (style inline nakładają się na wszystko)
• przyjazny dla projektantów

Stylowanie w JSX jest bardzo podobne do stylu w HTML.

Sprawa HTML:

div style = "kolor tła: czerwony; kolor: biały"

Obudowa JSX:

styl div = {{backgroundColor: „czerwony”, kolor: „biały”}}

To, co robię, to nadanie każdemu z moich komponentów wielokrotnego użytku unikalnej niestandardowej nazwy elementu, a następnie utworzenie pliku css dla tego komponentu, w szczególności ze wszystkimi opcjami stylizacji dla tego komponentu (i tylko dla tego komponentu).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

W pliku „custom-component.css” każdy wpis zaczyna się od tagu custom-component:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

Oznacza to, że nie tracisz krytycznego pojęcia oddzielenia troski. Zobacz kontra styl. Jeśli udostępniasz swój komponent, innym łatwiej jest dopasować go do reszty strony.

To naprawdę zależy od tego jak duża aplikacja jest, jeśli chcę użyć bundlers jak WebPack i wiązki CSS i JS razem w budowie i jak chce Ci mange przepływ aplikacji! Pod koniec dnia, w zależności od sytuacji, możesz podjąć decyzję!

Preferuję organizowanie plików w dużych projektach, oddzielając pliki CSS i JS , może być łatwiejsze udostępnianie, łatwiejsi użytkownicy interfejsu użytkownika mogą po prostu przeglądać pliki CSS, a także znacznie bardziej uporządkowane organizowanie plików dla całej aplikacji!

Zawsze myśl w ten sposób, upewnij się, że na etapie opracowywania wszystko jest tam, gdzie powinno być, odpowiednio nazwane i być łatwe dla innych programistów, aby znaleźć rzeczy ...

Osobiście mieszam je w zależności od moich potrzeb, na przykład ... Spróbuj użyć zewnętrznego css, ale w razie potrzeby React zaakceptuje również styl, musisz przekazać go jako obiekt o kluczowej wartości, coś takiego:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Oto stylizacja boolowska w składni JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}

Zwykle mam plik scss powiązany z każdym komponentem React. Ale nie widzę powodu, dla którego nie zamkniesz komponentu logiką i nie spojrzysz na to. Mam na myśli, że masz podobne rzeczy z komponentami internetowymi.

W zależności od konfiguracji wbudowany styl może zaoferować Ci przeładowanie na gorąco. Strona internetowa jest natychmiast ponownie renderowana przy każdej zmianie stylu. Pomaga mi to szybciej opracowywać komponenty. Mimo to jestem pewien, że możesz skonfigurować środowisko Hot Reload dla CSS + SCSS.

Możesz używać stylów wbudowanych, ale będziesz mieć pewne ograniczenia, jeśli używasz ich we wszystkich swoich stylach, niektóre znane ograniczenia to to, że nie możesz używać pseudo selektorów CSS i zapytań o media .

Możesz użyć Radium, aby rozwiązać ten problem, ale wydaje mi się, że projekt staje się nieporęczny.

Polecam korzystanie z modułów CSS .

używając modułów CSS będziesz mieć swobodę pisania CSS w pliku CSS i nie będziesz musiał martwić się o konflikty nazw, zajmą się tym Moduły CSS.

Zaletą tej metody jest to, że zapewnia funkcjonalność stylizacji dla konkretnego komponentu. Spowoduje to utworzenie znacznie łatwiejszego do utrzymania kodu i czytelnej architektury projektu dla następnego programisty, który będzie mógł pracować nad Twoim projektem.

W przypadku niektórych komponentów łatwiej jest używać stylów wbudowanych. Ponadto uważam, że łatwiej i bardziej zwięźle (ponieważ używam Javascript, a nie CSS) do animowania stylów komponentów.

W przypadku komponentów autonomicznych korzystam z „Spread Operator” lub „...”. Dla mnie jest czysty, piękny i działa w ciasnej przestrzeni. Oto mała animacja ładowania, którą wykonałem, aby pokazać jej zalety:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

EDYCJA LISTOPADA 2019

Pracując w branży (firma z listy Fortune 500), NIE wolno mi tworzyć żadnych stylizacji. W naszym zespole zdecydowaliśmy, że styl wbudowany jest nieczytelny i niemożliwy do utrzymania. Po tym, jak zobaczyłem z pierwszej ręki, w jaki sposób style wbudowane sprawiają, że wspieranie aplikacji jest całkowicie nie do zniesienia, musiałbym się zgodzić. Całkowicie odradzam style inline.

Problem ze stylami wbudowanymi polega na tym, że polityki bezpieczeństwa treści (CSP) stają się coraz bardziej powszechne, co na to nie pozwala. Dlatego zalecam całkowite unikanie stylów wbudowanych.

Aktualizacja: aby wyjaśnić dalej, CSP to nagłówki HTTP wysyłane przez serwer, które ograniczają zawartość, która może pojawić się na stronie. Jest to po prostu kolejne ograniczenie, które można zastosować na serwerze, aby powstrzymać atakującego przed zrobieniem czegoś niegrzecznego, jeśli programista źle koduje witrynę.

Celem większości tych ograniczeń jest powstrzymanie ataków XSS (cross-site scripting). XSS jest miejscem, w którym atakujący wymyśla sposób umieszczenia własnego javascript na twojej stronie (na przykład, jeśli utworzę moją nazwę użytkownika, bob<SCRIPT>alert("hello")</SCRIPT>a następnie opublikuję komentarz, a ty odwiedzisz stronę, nie powinien wyświetlać alertu). Programiści powinni odmówić możliwości dodania przez użytkownika takiej treści do witryny, ale na wypadek, gdyby popełnili błąd, CSP blokuje ładowanie strony, jeśli znajdzie jakieś script>tagi.

CSP to tylko dodatkowy poziom ochrony dla programistów, aby zapewnić, że jeśli popełnią błąd, osoba atakująca nie może powodować problemów osobom odwiedzającym tę witrynę.

Czyli wszystko to jest XSS, ale co jeśli atakujący nie może dołączyć <script>tagów, ale może dołączyć <style>tagi lub style=parametr w tagu? Wtedy może być w stanie zmienić wygląd strony w taki sposób, że jesteś zmuszony kliknąć niewłaściwy przycisk lub inny problem. Jest to o wiele mniej niepokojące, ale wciąż jest coś, czego należy unikać, a CSP robi to za Ciebie.

Dobrym źródłem do testowania witryny pod kątem CSP jest https://securityheaders.io/

Możesz przeczytać więcej o CSP na: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

W porównaniu do pisania stylów w pliku css, atrybut stylu React ma następujące zalety :

1. Możliwość korzystania z narzędzi javascript jako języka programowania zapewnia kontrolę nad stylem elementów. Obejmuje to osadzanie zmiennych, używanie warunków i przekazywanie stylów do komponentu potomnego.
2. Podejście „elementarne”. Nigdy więcej rozdzielania kodu HTML, JS i CSS napisanego dla komponentu. Kod komponentu jest skonsolidowany i zapisany w jednym miejscu.

Jednak atrybut stylu React ma kilka wad - nie możesz

1. Nie można używać zapytań o media
2. Nie można używać pseudo selektorów,
3. mniej wydajny w porównaniu do klas CSS.

Używając CSS w JS, możesz uzyskać wszystkie zalety tagu stylu, bez tych wad . Na dzień dzisiejszy istnieje kilka popularnych, dobrze obsługiwanych css w bibliotekach js, w tym: Emotion, Styled-Components i Radium. Te biblioteki mają css, czym jest React dla HTML. Pozwalają Ci pisać CSS i kontrolować CSS w kodzie JS.

porównajmy, jak nasz kod będzie wyglądał na stylizację prostego elementu. Zmodyfikujemy styl „hello world”, aby był duży na komputerze, a mniejszy na telefonie komórkowym.

Korzystanie z atrybutu stylu

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Ponieważ zapytanie o media nie jest możliwe w tagu stylu, będziemy musieli dodać nazwę elementu do elementu i dodać regułę css.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Za pomocą tagu 10 css Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion obsługuje również ciągi szablonów, a także komponenty w stylu. Więc jeśli wolisz, możesz napisać:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

Za „Css in JS” używa klas css. Emocje zostały opracowane specjalnie z myślą o wydajności i wykorzystują buforowanie. W porównaniu z atrybutami stylu React, Css w JS zapewni lepszą wydajność.

Najlepsze praktyki

Oto kilka najlepszych praktyk, które polecam:

1. Jeśli chcesz stylizować elementy w tekście lub w JS, użyj biblioteki css-in-js, nie używaj atrybutu style.

Czy powinienem dążyć do stylizacji w ten sposób i nie mieć żadnych stylów określonych w moim pliku CSS?

2. Jeśli używasz rozwiązania css-in-js, nie ma potrzeby pisania stylów w plikach CSS. Pisanie css w JS jest lepsze, ponieważ możesz używać wszystkich narzędzi języka programowania, jak zapewnia JS.

czy powinienem całkowicie unikać stylów wbudowanych?

3. Strukturyzacja kodu stylu w JS jest bardzo podobna do ogólnej struktury kodu. Na przykład:
   • rozpoznawaj powtarzające się style i pisz je w jednym miejscu. Istnieją dwa sposoby, aby to zrobić w Emotion:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• Wzorzec kodowania React składa się z enkapsulowanych komponentów - HTML i JS, które kontrolują komponent, są zapisane w jednym pliku. To jest miejsce, w którym należy twój kod css / style do stylu tego komponentu.

• W razie potrzeby dodaj rekwizyt do stylizacji do swojego komponentu. W ten sposób możesz ponownie użyć kodu i stylu zapisanego w komponencie potomnym, a także dostosować go do własnych potrzeb przez komponent macierzysty.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Możesz także używać StrCSS, tworzy izolowane nazwy klas i wiele więcej! Przykładowy kod wyglądałby. Możesz (opcjonalnie) zainstalować rozszerzenie VSCode z Visual Studio Marketplace w celu obsługi podświetlania składni!

źródło: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

Czasami potrzebujemy stylizować jakiś element z komponentu, ale jeśli musimy wyświetlić ten komponent tylko te, lub styl jest o wiele mniej, niż zamiast używać klasy CSS, wybieramy styl wbudowany w reakcji js. styl wbudowany reagjs jest taki sam jak styl wbudowany HTML, tylko nazwy właściwości są nieco inne

Napisz swój styl w dowolnym tagu, używając style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Aktualizacja 2020: najlepszą praktyką jest korzystanie z biblioteki, która wykonała już ciężką pracę za Ciebie i nie zabija twojego zespołu, gdy dokonasz zmiany, jak wskazano w pierwotnie zaakceptowanej odpowiedzi w tym filmie (nadal jest aktualna). Jest to bardzo pomocna tabela, aby zorientować się w trendach . Po przeprowadzeniu własnych badań nad tym postanowiłem wykorzystać Emotion do moich nowych projektów i okazało się ono bardzo elastyczne i skalowalne.

Biorąc pod uwagę, że zalecana jest najbardziej pozytywna odpowiedź z 2015 r Radium, które obecnie zostało przeniesione do trybu konserwacji . Wydaje się więc rozsądne dodanie listy alternatyw. Po odstawieniu Radium sugeruje kilka bibliotek. Każda z podlinkowanych stron ma przykłady łatwo dostępne, więc powstrzymam się od kopiowania i wklejania kodu tutaj.

• Emocje, które są „inspirowane” między innymi stylizowanymi komponentami , wykorzystują style w js i mogą być niezależne od frameworka, ale zdecydowanie promują bibliotekę React. Emocje były aktualizowane od tego postu.
• stylizowane elementy są porównywalne i oferują wiele takich samych funkcji jak Emotion. Również aktywnie utrzymywany. Składniki Emotion i styled mają podobną składnię. Jest zbudowany specjalnie do pracy z komponentami React.
• JSS Kolejna opcja dla stylów w js, która jest niezależna od frameworka, chociaż ma wiele pakietów frameworka, w tym React-JSS.

W każdym razie wbudowane css nigdy nie jest zalecane. W naszym projekcie wykorzystującym stylizowane komponenty wykorzystaliśmy JSS. Chroni przesłonięcie css przez dodanie dynamicznych nazw klas w komponentach. Możesz także dodać wartości css na podstawie przekazanych rekwizytów.