Reaguj.najlepsze praktyki w stylu js inline

Atrybut style w Reaccie oczekuje, że wartość będzie obiektem, czyli parą wartości klucza.

style = {} będzie miał w sobie inny obiekt jak {float:'right'}, aby to działało.

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

Używam stylów wbudowanych w komponenty Reactowe. Uważam, że kolokacja stylów w komponentach jest o wiele wyraźniejsza, ponieważ zawsze jest jasne, jakie style komponent ma, a jakich nie ma. Plus posiadanie pełnej mocy Javascript pod ręką naprawdę upraszcza bardziej złożone potrzeby stylizacji.

Na początku nie byłem przekonany, ale po kilku miesiącach, jestem w pełni przekonwertowany i jestem w trakcie konwersji całego mojego CSS do inline lub innego css opartego na JS metody.

Ta prezentacja pracownika Facebook i współpracownika React "vjeux" jest również bardzo pomocna - https://speakerdeck.com/vjeux/react-css-in-js

Głównym celem atrybutu style jest dynamiczne style oparte na stanie. Na przykład styl szerokości na pasku postępu może zależeć od jakiegoś stanu lub położenia lub widoczności 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 wtedy, gdy zmienisz widoczne cechy, zwłaszcza kolor.

James K Nelson w liście"Dlaczego nie powinieneś stylizować komponentów Reactowych za pomocą JavaScript" stwierdza, że nie ma potrzeby używania stylów inline z ich wadami. Jego stwierdzenie jest takie, że stary nudny css z less / scss jest najlepszym rozwiązaniem. Część jego słów na korzyść css:

• rozszerzalny zewnętrznie
• leverable (inline style overleap everything)
• designer-friendly

To, co robię, to nadaję każdemu komponentowi wielokrotnego użytku unikalną nazwę niestandardową elementu, a następnie tworzę plik 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>;
  }
});

Oraz 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; 
}

To naprawdę zależy od tego, jak duży jest Twoja aplikacja, jeśli chcesz użyć bundlerów, takich jakwebpack i połączyć CSS i JS razem w build i jak chcesz mange swój przepływ aplikacji! Pod koniec dnia, zależy od twojej sytuacji, możesz podjąć decyzję!

Moje preferencje do organizowania plików w dużych projektach to oddzielanie plików CSS i JS, może być łatwiejsze do udostępniania, łatwiejsze dla użytkowników interfejsu, aby po prostu przejść przez pliki CSS, a także znacznie ładniejsze organizowanie plików dla całej aplikacji!

Zawsze myśl w ten sposób, upewnij się, że w fazie rozwoju wszystko jest tam, gdzie powinno być, nazwane poprawnie i łatwe do znalezienia dla innych programistów...

Ja osobiście miksuję je w zależności od mojej potrzeby, na przykład... Spróbuj użyć zewnętrznego css, ale w razie potrzeby React zaakceptuje również styl, musisz przekazać go jako obiekt z wartością klucza, coś takiego poniżej:

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;

Zazwyczaj mam plik scss powiązany z każdym komponentem Reactowym. Ale nie widzę powodu, dla którego nie zamknąłbyś komponentu logiką i nie zajrzał do niego. Mam na myśli, że masz podobne rzeczy z web components.

W zależności od konfiguracji inline styling może zaoferować Hot reload. Strona internetowa jest natychmiast ponownie renderowana za każdym razem, gdy zmieni się styl. Pomaga mi TO szybciej tworzyć komponenty. Mimo to, jestem pewien, że możesz skonfigurować środowisko hot reload dla CSS + SCSS.

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

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 dalsze łagodzenie, które można zastosować na serwerze, aby powstrzymać atakującego przed zrobieniem czegoś niegrzecznego, jeśli programista źle koduje witrynę.

Cel większość z tych ograniczeń polega na powstrzymywaniu ataków XSS (cross-Site scripting). XSS to miejsce, w którym atakujący wymyśla sposób na umieszczenie własnego javascript na twojej stronie (na przykład, jeśli zrobię swoją 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 dodawania przez użytkownika treści takich jak ta do witryny, ale na wypadek, gdyby popełnił błąd, CSP blokuje ładowanie strony, jeśli znajdzie jakieś tagi script>.

CSP są po prostu dodatkowy poziom ochrony dla programistów, aby upewnić się, że jeśli popełnią błąd, atakujący nie może powodować problemów dla odwiedzających tę witrynę.

Tak, że wszystko jest XSS, ale co jeśli atakujący nie może zawierać znaczników <script>, ale może zawierać znaczniki <style> lub zawierać parametr style= na znaczniku? Wtedy może być w stanie zmienić wygląd strony w taki sposób, że zostaniesz oszukany, klikając niewłaściwy przycisk lub jakiś inny problem. Jest to o wiele mniej niepokojące, ale nadal coś, czego należy unikać, a CSP robi to za Ciebie.

Dobrym źródłem do testowania strony dla CSP jest https://securityheaders.io/

Dla niektórych komponentów łatwiej jest używać stylów wbudowanych. Ponadto łatwiejsze i bardziej zwięzłe (ponieważ używam Javascript, a nie CSS) animowanie stylów komponentów.

Dla samodzielnych komponentów, używam' Operator Spread 'lub'...'. Dla mnie jest przejrzysty, piękny i działa w ciasnej przestrzeni. Oto mała animacja ładowania, którą zrobił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
  }
}

Następnie w componentWillMount () ustawiam interwał w ten sposób...

this.interval = setInterval(() => {
  let colors = this.state.colors;
  let opacity = this.state.opacity;

  if(this.props.reverse) {
    let color = colors[colors.length-1];
    colors.pop();
    colors.unshift(color)
  } else {
    let color = colors[0];
    colors.shift();
    colors.push(color);
  }

  opacity['opacity'] < 1 ? opacity['opacity']+=0.06 : null;

  this.setState({colors, opacity});
}, this.speed);

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

Źródło: https://github.com/jeffreylanters/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>;
  }
}

Możesz używać stylów inline, ale będziesz miał pewne ograniczenia, jeśli używasz ich we wszystkich swoich stylach, znane są pewne ograniczenia: nie możesz używać pseudo selektorów CSS i zapytań o media tam.

Możesz użyć Radu https://github.com/FormidableLabs/radium aby rozwiązać ten problem, ale mimo to, czuję, że projekt rośnie jego będzie uciążliwy.

Polecam użycie modułów CSS https://github.com/css-modules/css-modules

Używając modułów CSS będziesz miał swobodę pisania CSS w pliku CSS i nie musisz się martwić o konflikty nazw, o to zadbają Moduły CSS.

Zaletą tej metody jest to, że daje ona funkcjonalność stylizacji do określonego komponentu. Stworzy to o wiele bardziej łatwy do utrzymania kod i czytelną architekturę projektu dla następnego dewelopera do pracy nad projektem.