CSS Academy · Ders

Emotion: css() ve styled()

Emotion'ın css() yardımcısı ve styled() bileşen oluşturucusuyla dinamik stiller uygulayın.

Emotion: css() ve styled(), CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Emotion nedir

Emotion, esnek bir API'ye sahip CSS-in-JS kitaplığıdır. İki temel yaklaşım sunar: css() işlevi (çerçeveden bağımsız) ve styled-components'a benzer styled() API'si. Her ikisi de kapsamlı sınıf adlarını otomatik olarak oluşturur.

Emotion kurulumu

İhtiyaçlarınıza bağlı olarak iki paket seçeneği vardır:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

css() işlevi

css() işlevi, bir CSS nesnesinden veya şablon dizgesinden bir sınıf adı oluşturur:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

css() ile CSS nesneleri

Nesne söz dizimi, şablon dizgelerine bir alternatiftir ve TypeScript otomatik tamamlama özelliğinden yararlanmak için kullanışlıdır:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

styled() API'si

Emotion'ın styled özelliği, aralarında geçişi kolaylaştırmak için styled-components ile aynı şekilde çalışır:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

css özelliği (satır içi stillendirme)

Emotion'ın css özelliği, stilleri ek bir bileşene ihtiyaç duymadan doğrudan JSX öğeleri üzerinde yazmanızı sağlar. @emotion/react paketini ve bir Babel/SWC eklentisini gerektirir:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Emotion ile dinamik stiller

Her iki API de dinamik değerler için özellikleri alan işlevleri kabul eder:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Genel stiller

Genel CSS için @emotion/react içindeki Global özelliğini kullanın:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion ve styled-components karşılaştırması

Emotion ve styled-components neredeyse aynı API'lere sahiptir. Emotion, karşılaştırma testlerinde biraz daha iyi performans ve daha küçük bir paket boyutu sunar; ayrıca ek bir API olarak css özelliğine sahiptir. Her ikisi de React uygulamaları için üretimde kendini kanıtlamış seçeneklerdir.

Emotion'da kare kare animasyonlar

Animasyonları keyframes yardımcı işleviyle tanımlayın:

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

Sunucu taraflı işleme

Emotion, Next.js gibi React çerçevelerinde sunucu taraflı işleme sırasında kritik CSS'yi toplamak ve eklemek için extractCriticalToChunks() aracılığıyla SSR'yi destekler.

Hızlı kontrol

Emotion'ın css() işlevi ile styled() API'si arasındaki temel fark nedir?

Özet

Emotion iki temel stillendirme API'si sunar: css() sınıf adları oluşturur (bunları className aracılığıyla uygulayın), styled() ise stillendirilmiş React bileşenleri oluşturur. css özelliği, CSS'nin tüm gücünü koruyarak satır içi stil yazımına benzer bir kullanım sağlar. Emotion, API kapsamı bakımından styled-components ile son derece uyumludur ve çoğu zaman daha hızlıdır. Her iki yaklaşım da oluşturulan sınıf adlarıyla stilleri otomatik olarak kapsamlandırır.

Sıkça Sorulan Sorular

“Emotion: css() ve styled()” dersi ücretsiz mi?

Evet — “Emotion: css() ve styled()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Emotion: css() ve styled()” dersinde ne öğreneceğim?

Emotion'ın css() yardımcısı ve styled() bileşen oluşturucusuyla dinamik stiller uygulayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Emotion: css() ve styled()” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Styled-components: Etiketli Şablon Değişmezleri
Emotion: css() ve styled()
CSS Modules: Kapsamlandırılmış Stiller
Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS

← CSS Academy Sayfasına Dön