Найкращі практичні стилі React.js

Мені відомо, що ви можете вказати стилі в межах класів React, наприклад, такий:

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

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

Чи повинен я ставити собі за мету займатися всім стилем, а стилі взагалі не вказані у моєму CSS-файлі?

Або я повинен уникати стилів вбудованої форми повністю?

Здається дивним і безладним, щоб трішки зробити обидва - потрібно змінити два місця під час налаштування стилів.

"Кращих практик" поки що не багато. Ті з нас, хто використовує вбудовані стилі для компонентів React, ще дуже експериментують.

Існує ряд підходів, які різко відрізняються: Реагуйте діаграму порівняння ліній в стилі inline

Все або нічого?

Те, що ми називаємо "стилем", насправді включає в себе досить багато понять:

• Макет - як елемент / компонент виглядає по відношенню до інших
• Зовнішній вигляд - характеристики елемента / компонента
• Поведінка та стан - як виглядає елемент / компонент у заданому стані

Почніть з державних стилів

React вже керує станом ваших компонентів, це робить стилі стану та поведінки природними придатними для колонізації з вашою логікою компонента.

Замість того, щоб створювати компоненти для візуалізації з умовними класами стану, розгляньте можливість додавання стилів стану безпосередньо:

// 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 : {}} />

Зауважте, що ми використовуємо клас для стильового вигляду, але більше не використовуємо жодного .is-префіксованого класу для стану та поведінки .

Ми можемо використовувати Object.assign(ES6) або _.extend(підкреслення / подача), щоб додати підтримку для кількох станів:

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

Настроювання та повторне використання

Тепер, коли ми використовуємо Object.assignце стає дуже просто зробити наш компонент для багаторазового використання з різними стилями. Якщо ми хочемо , щоб перевизначити стилі за замовчуванням, ми можемо зробити це в колл-сайту з реквізитом, наприклад , так: <TodoItem dueStyle={ fontWeight: "bold" } />. Реалізовано так:

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

Макет

Особисто я не бачу переконливих причин вбудовувати стилі компонування. Існує ряд чудових систем компонування CSS. Я б просто скористався.

При цьому не додайте стилів компонування безпосередньо до свого компонента. Оберніть свої компоненти компонентами компонування. Ось приклад.

// 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>

Для підтримки верстки я часто намагаюся створити компоненти, які будуть 100% widthі height.

Зовнішній вигляд

Це найбільш суперечлива область дебатів "в стилі інлайнеру". Зрештою, це залежить від компонента вашого дизайну та комфорту вашої команди з JavaScript.

Одне певне, вам знадобиться допомога бібліотеки. Стани браузера ( :hover, :focus) та медіа-запити є болісними в необробленій React.

Мені подобається Radium, тому що синтаксис для цих твердих частин призначений для моделювання SASS.

Організація коду

Часто ви бачите об’єкт стилю поза модулем. Для компонента списку тодо може виглядати приблизно так:

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

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

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

функції геттера

Додавання до логічного шаблону стику логіки може стати трохи безладним (як це було показано вище). Мені подобається створювати функції Getter для обчислення стилів:

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

Подальше перегляд

Я обговорював все це більш докладно в React Europe на початку цього року: Inline Styles та коли найкраще "просто використовувати CSS" .

Я радий допомогти, коли ви робите нові відкриття по дорозі :) Відіжміть мене -> @chantastic

Атрибут стилю в React очікує, що значення буде об'єктом, тобто пара значень Key.

style = {}буде інший об’єкт всередині нього, як, {float:'right'}щоб він працював.

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

Сподіваюся, це вирішує проблему

Я широко використовую стилі вбудованих програм у своїх компонентах React. Мені здається, що колонізувати стилі в компонентах набагато зрозуміліше, оскільки завжди зрозуміло, які стилі має компонент, а яких немає. Плюс наявність під рукою всієї потужності Javascript справді спрощує більш складні потреби в стилі.

Спочатку я не був переконаний, але після того, як я пробував це протягом декількох місяців, я повністю перетворений і зараз перетворюю всі мої CSS на вбудовані чи інші JS-методи, керовані JS.

Ця презентація співробітника Facebook та співавтора React "vjeux" також дуже корисна - https://speakerdeck.com/vjeux/react-css-in-js

Основне призначення атрибуту стилів - це динамічні стилі, засновані на стані. Наприклад, ви можете мати стиль ширини на панелі прогресу на основі певного стану, або позицію чи видимість на основі чогось іншого.

Стилі в JS накладають обмеження, що програма не може забезпечити користувацький стиль для багаторазового використання компонента. Це цілком прийнятно у вищезгаданих ситуаціях, але не тоді, коли ви змінюєте видимі характеристики, особливо колір.

Джеймс К Нельсон у своєму листі "Чому ти не повинен стильово реагувати на компоненти за допомогою JavaScript" стверджує, що фактично не потрібно використовувати вбудовані стилі з його недоліками. Його твердження полягає в тому, що старий нудний css з меншою кількістю / scss - найкраще рішення. Частина його тез на користь css:

• розширюється зовні
• підбірний (вбудовані стилі перекривають усе)
• дизайнерські

Стилізація в JSX дуже схожа на стилізацію в HTML.

Корпус HTML:

div style = "фон-колір: червоний; колір: білий"

Справа JSX:

div style = {{backgroundColor: 'червоний', колір: 'білий'}}

Що я роблю, це надати кожному моєму компоненту для багаторазового використання унікальне спеціальне ім’я елемента, а потім створити файл css для цього компонента, зокрема, з усіма параметрами стилізації для цього компонента (і лише для цього компонента).

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

І у файлі 'custom-компонент.css' кожен запис буде починатися з тегу спеціального компонента:

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

Це означає, що ви не втрачаєте критичного поняття про розмежування проблеми. Перегляд проти стилю. Якщо ви надаєте спільний доступ до свого компонента, іншим легше надати тему, щоб він відповідав решті їх веб-сторінки.

Це дійсно залежить від того, наскільки великим є ваш додаток, якщо ви хочете використовувати такі пакети, як webpack та пакет CSS та JS, і як ви хочете керувати потоком вашої програми! Зрештою, залежно від вашої ситуації, ви можете прийняти рішення!

Мої переваги щодо організації файлів у великих проектах - це розділення CSS та JS файлів , це може бути простіше поділитися, простішим користувачам інтерфейсу просто пройти файли CSS, а також набагато акуратніше організувати файли для всієї програми!

Завжди думайте так, переконайтеся, що у фазі розробки все там, де вони повинні бути, названі правильно і бути легким для інших розробників, щоб знайти речі ...

Я особисто їх змішую, залежно від моєї потреби, наприклад ... Спробуйте використовувати зовнішній css, але якщо потрібно, React також сприйме стиль, вам потрібно передати його як об'єкт з ключовим значенням, приблизно так:

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;

Ось булевий стиль на основі синтаксису JSX :

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

У мене зазвичай файл scss асоціюється з кожним компонентом React. Але я не бачу причини, чому ви б не інкапсулювали компонент логікою і не заглянули в нього. Я маю на увазі, у вас є аналогічна річ із веб-компонентами.

Залежно від конфігурації, вбудований стиль може запропонувати вам гаряче перезавантаження. Веб-сторінка оновлюється негайно щоразу, коли змінюється стиль. Це допомагає мені швидше розробляти компоненти. Сказавши це, я впевнений, що ви можете налаштувати середовище гарячого перезавантаження для CSS + SCSS.

Ви можете використовувати вбудовані стилі, але у вас будуть деякі обмеження, якщо ви використовуєте їх у всіх своїх стилях, деякі відомі обмеження: ви не можете використовувати псевдоселектори CSS та медіа-запити там.

Можна використовувати Radium для вирішення цього питання, але все-таки я вважаю, що проект зростає громіздким.

Я рекомендую використовувати модулі CSS .

за допомогою модулів CSS ви матимете свободу писати CSS у файл CSS і не потрібно турбуватися про зіткнення з іменами, про це подбають модулі CSS.

Перевагою цього методу є те, що він надає функціональності для стилізації конкретного компонента. Це створить набагато більш доступний код і читабельну архітектуру проекту для наступного розробника, який буде працювати над вашим проектом.

Для деяких компонентів простіше використовувати вбудовані стилі. Крім того, мені здається, що простіше і стисліше (оскільки я використовую Javascript, а не CSS) анімувати стилі компонентів.

Для автономних компонентів я використовую "Оператор розповсюдження" або "...". Для мене це зрозуміло, красиво і працює в тісному просторі. Ось невелика анімація для завантаження, яку я зробив, щоб показати, що це переваги:

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

РЕДАКЦІЯ НОВОБРЯННЯ 2019 року

Працюючи в галузі (компанія Fortune 500), мені НЕ дозволяється робити будь-які вбудовані стилі. У нашій команді ми вирішили, що стиль інлайнера не читабельний і не піддається технічному обслуговуванню. І, побачивши з перших рук, як вбудовані стилі роблять підтримку програми абсолютно нестерпною, я повинен би погодитися. Мене повністю відштовхують стилі inline.

Проблема стилів вбудованих програм - це політика безпеки вмісту (CSP), яка стає все більш поширеною, що не дозволяє. Тому я рекомендую повністю уникати стилів інлайну.

Оновлення: для подальшого пояснення CSP - заголовки HTTP, що надсилаються сервером, які обмежують вміст, який може відображатися на сторінці. Це просто подальше пом'якшення, яке може бути застосоване до сервера, щоб зупинити зловмисника робити щось неслухняне, якщо розробник погано кодує сайт.

Мета більшості цих обмежень - зупинити атаки XSS (міжсайтовий скрипт). XSS - це те, коли зловмисник з'ясовує спосіб включити свій власний JavaScript на вашу сторінку (наприклад, якщо я введу своє ім’я користувача, bob<SCRIPT>alert("hello")</SCRIPT>а потім опублікую коментар, і ви завітаєте на сторінку, він не повинен показувати попередження). Розробники повинні заперечувати можливість користувачеві додавати такий вміст на сайт, але на всякий випадок, якщо вони помилилися, тоді CSP блокує завантаження сторінки, якщо вона знаходить якісь script>теги.

CSP - це лише додатковий рівень захисту для розробників, щоб переконатися, що вони помилилися, що зловмисник не може викликати проблем у відвідувачів цього сайту.

Так що все є XSS, але що робити, якщо зловмисник не може включати <script>теги, але може включати <style>теги або включатиstyle= параметр на тег? Тоді він, можливо, зможе змінити вигляд сайту таким чином, щоб вас обдурили натиснути неправильну кнопку чи якусь іншу проблему. Це набагато менше турбує, але все-таки чого слід уникати, і CSP робить це за вас.

Хороший ресурс для тестування сайту на CSP - це https://securityheaders.io/

Докладніше про CSP можна прочитати на веб-сайті : http://www.html5rocks.com/en/tutorials/security/content-security-policy/

У порівнянні з написанням ваших стилів у файл css, атрибут стилю React має такі переваги :

1. Можливість використання інструментів javascript як мови програмування забезпечує контроль стилю ваших елементів. Це включає вбудовування змінних, використання умов та стилів передачі дочірньому компоненту.
2. "Компонентний" підхід. Більше не відокремлено код HTML, JS та CSS, написаний для компонента. Код компонента консолідований і записується в одному місці.

Однак атрибут стилю React має кілька недоліків - ви не можете

1. Неможливо використовувати медіа-запити
2. Неможливо використовувати псевдоселектори,
3. менш ефективні порівняно з класами CSS.

Використовуючи CSS в JS, ви можете отримати всі переваги тегу стилю, без цих недоліків . На сьогоднішній день у js-бібліотеках є декілька популярних добре підтримуваних css, зокрема: Emotion, Styled-Components та Radium. Ці бібліотеки мають передати css те, що реагує на HTML. Вони дозволяють писати свій CSS і керувати CSS у своєму JS-коді.

порівняємо, як буде виглядати наш код для стилізації простого елемента. Ми будемо стилем "привіт світ", щоб він відображався як на робочому столі, так і на мобільному.

Використання атрибуту стилю

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

Оскільки медіа-запит неможливий у тезі стилю, нам доведеться додати елемент className до елемента та додати правило css.

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

Використовуючи тег 10 css Emotion

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

Emotion також підтримує рядки шаблону, а також стильові компоненти. Тож якщо ви віддаєте перевагу, ви можете написати:

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

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

За капотами "Css в JS" використовується класи css. Емоція спеціально була побудована з врахуванням продуктивності та використовує кешування. Порівняно з атрибутами стилю React Css в JS забезпечить кращу продуктивність.

Кращі практики

Ось кілька найкращих практик, які я рекомендую:

1. Якщо ви хочете стилізувати елементи в рядку або у своєму JS, використовуйте бібліотеку css-in-js, не використовуйте атрибут стилю.

Чи повинен я ставити собі за мету займатися всім стилем, а стилі взагалі не вказані у моєму CSS-файлі?

2. Якщо ви використовуєте рішення css-in-js, немає необхідності писати стилі у файли Css. Писати свій css в JS - це найкраще, тому що ви можете використовувати всі інструменти, якими використовується програма програмування, як надає JS.

Чи варто уникати стилів вбудованих версій повністю?

3. Структурування коду стилю в JS дуже схоже на структурування коду в цілому. Наприклад:
   • розпізнайте стилі, які повторюються, і запишіть їх в одне місце. Є два способи зробити це в 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>
   )
}

• Шаблон кодування React складається з інкапсульованих компонентів - HTML і JS, який управляє компонентом, записуються в один файл. Саме тут належить ваш код css / style до стилю цього компонента.

• За необхідності додайте у ваш компонент опору для стилізації. Таким чином ви можете повторно використовувати код і стиль, написаний у дочірньому компоненті, і налаштувати його під ваші конкретні потреби батьківським компонентом.

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>
)

Ви також можете використовувати StrCSS, це створює ізольовані назви класів та багато іншого! Приклад коду виглядатиме так. Ви можете (за бажанням) встановити розширення VSCode з Visual Studio Marketplace для підтримки виділення синтаксису!

джерело: 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>;
  }
}

Деякий час нам потрібно стилізувати якийсь елемент з компонента, але якщо нам доведеться відображати лише цей компонент, або стиль є таким меншим, то замість того, щоб використовувати клас CSS, ми переходимо до стилю вбудованого в реакцію js. Стиль inline в реактиві такий же, як і стиль вбудованого HTML, лише назви властивостей дещо відрізняються

Напишіть свій стиль у будь-який тег, використовуючи 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;

Оновлення 2020 року: найкраща практика - використовувати бібліотеку, яка вже зробила важку роботу для вас і не вбиває вашу команду, коли ви переходите на перемикання, на що вказує спочатку прийнята відповідь у цьому відео (це все ще актуально). Крім того, просто, щоб зрозуміти тенденції, це дуже корисна діаграма . Провівши власні дослідження з цього питання, я вирішив використовувати Emotion для своїх нових проектів, і він виявився дуже гнучким та масштабованим.

Зважаючи на те, що найбільш прихильною відповіддю з 2015 року рекомендується Radium, який зараз переведений на режим обслуговування . Тому здається доцільним додати список альтернатив. Після припинення Radium пропонує кілька бібліотек. Кожен із пов’язаних сайтів має приклади, які легко доступні, тому я не буду копіювати та вставляти код тут.

• Емоція, яка "натхненна" стильовими компонентами серед інших, використовує стилі у js та може бути рамковою агностикою, але, безумовно, просуває свою бібліотеку React. Емоція постійно оновлювалася станом на цій посаді.
• стильові компоненти є порівнянними і пропонують багато тих же функцій, що і Emotion. Також активно підтримується. І Емоція, і стильові компоненти мають подібний синтаксис. Він створений спеціально для роботи з компонентами React.
• JSS Ще одна опція для стилів у js, яка є агностичною рамкою, хоча у неї є декілька пакетів фреймворків, серед яких React-JSS.

У будь-якому випадку inline css ніколи не рекомендується. Ми використовували стильові компоненти в нашому проекті, який базується на JSS. Він захищає переосмислення css, додаючи імена динамічних класів на компоненти. Ви також можете додати значення css на основі переданих реквізитів.