React.js satır içi stili en iyi uygulamaları

React sınıflarında aşağıdaki gibi stiller belirtebileceğinizin farkındayım:

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

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

Tüm stilleri bu şekilde yapmayı hedeflemeli miyim ve CSS dosyamda hiç stil belirtilmemiş mi?

Yoksa satır içi stillerden tamamen kaçınmalı mıyım?

Her ikisinden de biraz yapmak garip ve dağınık görünüyor - şekillendirme yaparken iki yer kontrol edilmelidir.

Henüz pek çok "En İyi Uygulama" yok. React bileşenleri için satır içi stiller kullanan bizler hala çok deney yapıyoruz.

Çılgınca değişen bir takım yaklaşımlar vardır: Satır içi tarzı lib karşılaştırma çizelgesine tepki verin

Ya hep ya hiç?

"Stil" olarak adlandırdığımız şey aslında birkaç kavram içerir:

• Düzen - bir öğenin / bileşenin diğerleriyle ilişkide nasıl göründüğü
• Görünüm - bir elemanın / bileşenin özellikleri
• Davranış ve durum - bir öğenin / bileşenin belirli bir durumda nasıl göründüğü

Durum stilleriyle başlayın

React zaten bileşenlerinizin durumunu yönetiyor, bu durum ve davranış stillerini bileşen mantığınızla birlikte oturmak için doğal bir uyum haline getiriyor.

Koşullu durum sınıflarıyla oluşturulacak bileşenler oluşturmak yerine, doğrudan durum stilleri eklemeyi düşünün:

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

Görünümü.is- stilleştirmek için bir sınıf kullandığımızı, ancak artık durum ve davranış için önceden eklenmiş bir sınıf kullanmadığımızı unutmayın .

Birden çok durum için destek eklemek üzere Object.assign(ES6) veya _.extend(alt çizgi / lodash) kullanabiliriz:

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

Özelleştirme ve yeniden kullanılabilirlik

Şimdi kullandığımız Object.assigniçin, bileşenimizi farklı stillerle tekrar kullanılabilir hale getirmek çok basit hale geliyor. Biz varsayılan stilleri geçersiz kılmak istiyorsak, sahne ile çağrı yerinde yapabilirsiniz, böylece gibi: <TodoItem dueStyle={ fontWeight: "bold" } />. Bu şekilde uygulandı:

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

Yerleşim

Şahsen, satır içi düzen stilleri için zorlayıcı bir neden görmüyorum. Orada bir dizi harika CSS mizanpaj sistemi var. Sadece birini kullanırdım.

Bununla birlikte, düzen stillerini doğrudan bileşeninize eklemeyin. Bileşenlerinizi mizanpaj bileşenleriyle sarın. İşte bir örnek.

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

Düzen desteği için, sık sık olmaya bileşenleri tasarlamak için deneyin 100% widthve height.

Görünüm

Bu, "satır içi stil" tartışmasının en tartışmalı alanıdır. Sonuçta, JavaScript ile tasarımınızın bileşenine ve ekibinizin rahatlığına bağlıdır.

Kesin olan bir şey var, bir kütüphanenin yardımına ihtiyacınız olacak. Tarayıcı durumları ( :hover, :focus) ve medya sorguları ham Tepkimede acı vericidir.

Radium'u seviyorum çünkü bu sert parçaların sözdizimi SASS modelini modellemek için tasarlandı.

Kod organizasyonu

Genellikle modülün dışında bir stil nesnesi görürsünüz. Yapılacaklar listesi bileşeni için şöyle görünebilir:

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

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

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

alıcı işlevleri

Şablonunuza bir grup stil mantığı eklemek biraz dağınık olabilir (yukarıda görüldüğü gibi). Stilleri hesaplamak için alıcı işlevleri oluşturmayı seviyorum:

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

Daha fazla izleme

Bunların hepsini bu yılın başlarında React Europe'da daha ayrıntılı olarak tartıştım: Satır İçi Stiller ve 'sadece CSS kullanmak' en iyisi olduğunda .

Yol boyunca yeni keşifler yapmak gibi ben yardım mutluyum :) Hit me up -> @chantastic

React içindeki style özelliği, değerin bir nesne olmasını bekler, yani Anahtar değer çifti.

style = {}içinde {float:'right'}çalışmak gibi başka bir nesneye sahip olacak .

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

Umarım bu sorunu çözer

React bileşenlerimde satır içi stilleri yaygın olarak kullanıyorum. Bileşenlerin içindeki stilleri yerleştirmeyi çok daha net buluyorum çünkü bileşenin hangi stilleri yaptığını ve sahip olmadığını her zaman açık. Ayrıca, Javascript'in tüm gücüne sahip olmak daha karmaşık stil ihtiyaçlarını basitleştirir.

İlk başta ikna olmadım, ancak birkaç ay boyunca uğraştıktan sonra, tamamen dönüştürüldüm ve tüm CSS'imi satır içi veya diğer JS güdümlü css yöntemlerine dönüştürme sürecindeyim.

Facebook çalışanı ve React katılımcısı "vjeux" tarafından yapılan bu sunum da gerçekten yararlı - https://speakerdeck.com/vjeux/react-css-in-js

Stil özelliğinin temel amacı dinamik, duruma dayalı stillerdir. Örneğin, ilerleme durumu çubuğunda bazı durumlara dayalı bir genişlik stiliniz veya başka bir şeye göre konum veya görünürlük olabilir.

JS'deki stiller, uygulamanın yeniden kullanılabilir bir bileşen için özel stil sağlayamadığı sınırlamasını getirir. Bu, yukarıda belirtilen durumlarda mükemmel kabul edilebilir, ancak görünür özellikleri, özellikle rengi değiştirdiğinizde değil.

James K Nelson "Neden JavaScript ile Reaksiyon Bileşenlerini Stil Etmemeniz Gerekiyor" mektubunda , satır içi stilleri olumsuz yönleriyle kullanmaya gerek olmadığını belirtiyor. Onun ifadesi daha az / scss ile eski sıkıcı css en iyi çözümdür. Tezlerinin css lehine bölümü:

• harici olarak uzatılabilir
• kaldıraçlı (satır içi stiller her şeyi aşar)
• Tasarımcı dostu

JSX'te biçimlendirme, HTML'deki stile çok benzer.

HTML Örneği:

div style = "arka plan rengi: kırmızı; renk: beyaz"

JSX Kılıfı:

div style = {{backgroundColor: 'kırmızı', renk: 'beyaz'}}

Yaptığım şey, yeniden kullanılabilir bileşenimin her birine benzersiz bir özel öğe adı vermek ve daha sonra bu bileşen için, özellikle bu bileşen için tüm stil seçenekleriyle (ve yalnızca bu bileşen için) bir css dosyası oluşturmaktır.

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

Ve 'custom-component.css' dosyasında, her giriş özel bileşen etiketi ile başlar:

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

Bu, endişeyi ayırma kritik fikrini kaybetmediğiniz anlamına gelir. Stil vs görüntüleyin. Bileşeninizi paylaşırsanız, başkalarının web sayfalarının geri kalanıyla eşleşmesi için teması daha kolaydır.

Webpack gibi paketleyicileri kullanmak istiyorsanız, uygulamanızın ne kadar büyük olduğuna bağlıdır. ve CSS ve JS birlikte kullanmak ve uygulama akışınızı nasıl ! Günün sonunda, durumunuza bağlıdır, karar verebilirsiniz!

Dosyaları büyük projelerde organize etme tercihim CSS ve JS dosyalarını ayırmak , paylaşmak daha kolay olabilir, UI kullanıcılarının sadece CSS dosyalarından geçmesi daha kolay olabilir, ayrıca tüm uygulama için çok daha düzenli dosya düzenleme!

Her zaman bu şekilde düşünün, geliştirme aşamasında her şeyin olması gereken yerde olduğundan emin olun, uygun şekilde adlandırın ve diğer geliştiricilerin bir şeyler bulması kolay olsun ...

Şahsen onları karıştırıyorum ihtiyacım var, örneğin ... Harici css kullanmaya çalışın, ancak gerekirse React stili de kabul edecek, bunu aşağıdaki gibi bir değere sahip bir anahtar olarak geçirmeniz gerekiyor:

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 sözdiziminde boole tabanlı stil :

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

Genellikle her React bileşeniyle ilişkili scss dosyası var. Ancak, bileşeni neden mantıkla kapsüllemek ve ona bakmak istememenizin nedenini göremiyorum. Yani, web bileşenleri ile benzer bir şey var.

Yapılandırmanıza bağlı olarak satır içi stil size Sıcak yeniden yükleme sunabilir. Stil her değiştiğinde web sayfası hemen yeniden oluşturulur. Bu, bileşenleri daha hızlı geliştirmeme yardımcı oluyor. Bunu söyledikten sonra, CSS + SCSS için bir Hot reload ortamı ayarlayabileceğinizden eminim.

Satır içi stilleri kullanabilirsiniz, ancak bunları tüm stillerinizde kullanıyorsanız bazı sınırlamalarınız olacaktır, bazı bilinen sınırlamalar orada CSS sözde seçicileri ve medya sorgularını kullanamayacağınızdır .

Bunu çözmek için Radium'u kullanabilirsiniz , ancak yine de, projenin büyüdüğünü hissediyorum, hantal olacak.

CSS modüllerini kullanmanızı tavsiye ederim .

CSS Modülleri kullanarak CSS dosyasına CSS yazma özgürlüğüne sahip olacaksınız ve ad çakışmaları konusunda endişelenmenize gerek yok, CSS Modülleri tarafından ilgilenilecektir.

Bu yöntemin bir avantajı, belirli bir bileşene şekillendirme işlevselliği sağlamasıdır. Bu, bir sonraki geliştiricinin projenizde çalışması için çok daha sürdürülebilir bir kod ve okunabilir proje mimarisi oluşturacaktır.

Bazı bileşenler için satır içi stiller kullanmak daha kolaydır. Ayrıca, bileşen stillerini canlandırmak için (CSS değil Javascript kullanıyorum) daha kolay ve daha özlü buluyorum.

Bağımsız bileşenler için, 'Spread Operator' veya '...' kullanıyorum. Benim için açık, güzel ve dar bir alanda çalışıyor. Faydalarını göstermek için yaptığım küçük bir yükleme animasyonu:

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

KASIM 2019 DÜZENLE

Endüstride çalışıyorum (A Fortune 500 şirketi), herhangi bir satır içi stil yapmama izin verilmiyor. Ekibimizde, satır içi stilin okunamaz olduğuna ve sürdürülemez olduğuna karar verdik. Ve, ilk elden inline stillerin bir uygulamayı desteklemeyi nasıl tamamen dayanılmaz hale getirdiğini gördükten sonra, katılıyorum. Satır içi stilleri tamamen caydırıyorum.

Satır içi stillerdeki sorun, İçerik Güvenliği İlkeleri'nin (CSP) gittikçe yaygınlaşmasına neden oluyor. Bu nedenle, satır içi stillerden tamamen kaçınmanızı öneririm.

Güncelleme: Daha ayrıntılı açıklamak için CSP, sunucu tarafından gönderilen ve sayfada hangi içeriğin görünebileceğini kısıtlayan HTTP üstbilgileridir. Bu, geliştiricinin siteyi kötü bir şekilde kodlaması durumunda, bir saldırganın yaramaz bir şey yapmasını durdurmak için bir sunucuya uygulanabilen başka bir azaltıcı etkidir.

Bu kısıtlamaların çoğunun amacı XSS ​​(siteler arası komut dosyası oluşturma) saldırılarını durdurmaktır. XSS, bir saldırganın kendi javascript'ini sayfanıza dahil etmenin bir yolunu bulduğu yerdir (örneğin, kullanıcı adımı yapar bob<SCRIPT>alert("hello")</SCRIPT>ve sonra bir yorum gönderir ve sayfayı ziyaret ederseniz, bir uyarı göstermemelidir). Geliştiriciler, bir kullanıcının siteye böyle bir içerik eklemesini engellemelidir, ancak bir hata yapmaları durumunda CSP sayfanın yüklenmesini engelliyorsascript> etiket .

CSP, geliştiricilerin bir hata yapıp yapmadıklarını, bir saldırganın bu siteyi ziyaret edenlere sorun çıkaramayacağından emin olmak için ekstra bir koruma düzeyidir.

Her şey XSS olsun, ancak saldırgan <script>etiketleri içeremez, ancak etiketleri ekleyebilir <style>veya style=bir etikete parametre ekleyebilirse ne olur ? Ardından, sitenin görünümünü, yanlış düğmeyi veya başka bir sorunu tıklatmak için kandırıldığınız şekilde değiştirebilir. Bu çok daha az endişe verici, ama yine de kaçınılması gereken bir şey ve CSP bunu sizin için yapıyor.

Bir siteyi CSP için test etmek için iyi bir kaynak https://securityheaders.io/

CSP hakkında daha fazla bilgiyi şu adreste bulabilirsiniz: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Stillerinizi bir css dosyasına yazmayla karşılaştırıldığında React'in style özniteliğinin aşağıdaki avantajları vardır :

1. Javascript araçlarını programlama dili olarak kullanabilme, öğelerinizin stilini kontrol etmenizi sağlar. Bu, değişkenleri gömmeyi, koşulları kullanmayı ve stilleri bir alt bileşene geçirmeyi içerir.
2. "Bileşenli" bir yaklaşım. Bileşen için yazılmış HTML, JS ve CSS kodlarının ayrılması gerekmez. Bileşenin kodu birleştirilir ve tek bir yerde yazılır.

Bununla birlikte, React'in stil niteliği birkaç dezavantajla gelir - yapamazsınız

1. Medya sorguları kullanılamıyor
2. Sahte seçiciler kullanılamaz,
3. CSS sınıflarına göre daha az verimlidir.

JS'de CSS kullanarak, bu dezavantajlar olmadan bir stil etiketinin tüm avantajlarını elde edebilirsiniz . Bugün itibariyle, js-kütüphanelerinde birkaç popüler iyi desteklenen css var: Emotion, Styled-Components ve Radium. Bu kütüphaneler React'in HTML'ye ne tür olduğunu css. CSS'nizi yazmanıza ve CSS'nizi JS kodunuzda kontrol etmenize izin verir.

basit bir öğeyi şekillendirmek için kodumuzun nasıl görüneceğini karşılaştıralım. Masaüstünde büyük, mobil cihazlarda daha küçük görünecek şekilde "merhaba dünya" div tarzını oluşturacağız.

Stil niteliğini kullanma

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

Bir stil etiketinde medya sorgusu mümkün olmadığından, öğeye bir className ve bir css kuralı eklememiz gerekir.

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

Emotion'ın 10 css etiketini kullanma

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

Emotion ayrıca şablon dizelerini ve stilize edilmiş bileşenleri de destekler. İsterseniz yazabilirsiniz:

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

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

"Css in JS" başlıklarının arkasında css sınıfları kullanılır. Duygu özellikle performans göz önünde bulundurularak oluşturuldu ve önbelleğe alma özelliğini kullanıyor. React stili nitelikleriyle karşılaştırıldığında JS'deki Css daha iyi performans sağlayacaktır.

En İyi Uygulamalar

İşte size önerdiğim birkaç en iyi uygulama:

1. Öğelerinizi satır içi veya JS'nizde biçimlendirmek istiyorsanız bir css-in-js kitaplığı kullanın, stil niteliği kullanmayın.

Tüm stilleri bu şekilde yapmayı hedeflemeli miyim ve CSS dosyamda hiç stil belirtilmemiş mi?

2. Bir css-in-js çözümü kullanırsanız, Css dosyalarına stil yazmaya gerek yoktur. JS'nin sağladığı bir programlama dilini kullanabileceğiniz için css'nizi JS'de yazmak daha üstündür.

satır içi stillerden tamamen kaçınmalı mıyım?

3. Stil kodunuzu JS'de yapılandırmak, genel olarak kodunuzu yapılandırmaya oldukça benzer. Örneğin:
   • tekrar eden stilleri tanır ve tek bir yerde yazar. Bunu Duygu'da yapmanın iki yolu vardır:

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

• Reaksiyon kodlama modeli kapsüllenmiş bileşenlerden oluşur - Bir bileşeni kontrol eden HTML ve JS tek bir dosyada yazılır. Bu bileşeni biçimlendirmek için css / style kodunuz aittir.

• Gerektiğinde, bileşeninize bir stil desteği ekleyin. Bu şekilde, bir alt bileşende yazılan kodu ve stili yeniden kullanabilir ve üst bileşen tarafından özel ihtiyaçlarınıza göre özelleştirebilirsiniz.

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'yi de kullanabilirsiniz, yalıtılmış sınıf isimleri ve çok daha fazlasını yaratır! Örnek kod şöyle görünecektir. Sözdizimi vurgulama desteği için Visual Studio Market'ten VSCode uzantısını (isteğe bağlı) yükleyebilirsiniz!

Kaynak: 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>;
  }
}

Bir süre, bir bileşenden bazı öğeleri biçimlendirmemiz gerekir, ancak bu bileşeni görüntülemek zorunda kalırsak veya stil çok daha az ise, CSS sınıfını kullanmak yerine, js reaktifinde satır içi stile gideriz. reaktjs satır içi stili HTML satır içi stili ile aynıdır, sadece özellik adları biraz farklıdır

Style = {{prop: "value"}} kullanarak stilinizi herhangi bir etikete yazın

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 Güncellemesi: En iyi uygulama, sizin için çok çalışmış olan ve bu videodaki orijinal kabul edilen cevabın işaret ettiği gibi geçiş yaptığınızda ekibinizi öldürmeyen bir kütüphane kullanmaktır (hala alakalı). Ayrıca sadece trendler hakkında bir fikir edinmek için bu çok yararlı bir grafiktir . Bu konuda kendi araştırmamı yaptıktan sonra yeni projelerim için Duygu kullanmayı seçtim ve çok esnek ve ölçeklenebilir olduğu kanıtlandı.

2015'ten en çok oylanan cevabın tavsiye edildiği göz önüne alındığında Radyum şimdi havale edilmiş bakım modunda . Yani bir alternatifler listesi eklemek mantıklı görünüyor. Sonrası durdurulan Radyum birkaç kütüphaneleri önerir. Bağlanan sitelerin her biri kolayca kopya örnekleri ve burada kodu yapıştırarak kaçınacak örnekler vardır.

• Diğerleri arasında stil bileşenlerinden "esinlenilen" duygu , js stilleri kullanır ve çerçeve agnostik olabilir, ancak React kütüphanesini kesinlikle teşvik eder. Duygu, bu yazı itibariyle güncel tutuldu.
• tarz-bileşenler karşılaştırılabilir ve Emotion ile aynı özelliklerin çoğunu sunar. Ayrıca aktif olarak korunur. Hem Duygu hem de stil bileşenleri benzer sözdizimine sahiptir. React bileşenleri ile çalışmak için özel olarak üretilmiştir.
• JSS Yine de çerçeve agnostik olan js stilleri için başka bir seçenek, aralarında React-JSS bir dizi çerçeve pakete sahip olmasına rağmen.

Neyse inline css asla tavsiye edilmez. JSS tabanlı projemizde stil bileşenleri kullandık. Bileşenlere dinamik sınıf adları ekleyerek css geçersiz kılmayı korur. Ayrıca, geçen desteklere göre css değerleri de ekleyebilirsiniz.