# Styling & CSS-in-JS (React / Next.js)

> CSS Modules, styled-components, Tailwind CSS, satır içi stiller, theming

- 18 mülakat soruları
- Mid-Level
- [Mülakat Soruları: React / Next.js](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari.md)

## 1. React'te CSS Module nedir?

**Cevap**

CSS Modules, sınıf adına hash ekleyerek otomatik olarak benzersiz sınıf adları oluşturur; bu da bileşenler arasındaki stil çakışmalarını önler. Her CSS Module dosyasının, geleneksel global stil sayfalarından farklı olarak kendi yerel scope'u vardır. Bu yaklaşım, diğer bileşenlerde yanlışlıkla üzerine yazma riski olmadan modüler stiller yazmaya olanak tanır.

## 2. styled-components'in temel avantajı nedir?

**Cevap**

Styled-components, template literals kullanarak doğrudan JavaScript dosyalarına CSS yazmayı sağlar ve bu da bileşen props'larına dayalı dinamik stiller oluşturmayı kolaylaştırır. Bu yaklaşım CSS sınıfları ile bileşenler arasındaki manuel eşlemeyi ortadan kaldırır ve yalnızca mount edilmiş bileşenlerin stillerinin sayfaya enjekte edilmesini sağlar. Stillerin bileşen mantığıyla birlikte konumlandırılması kod bakımını da iyileştirir.

## 3. React bileşenine CSS Module nasıl dahil edilir?

**Cevap**

CSS Module'ü içe aktarmak için, .module.css ile biten dosya adıyla standart JavaScript import sözdizimini kullanın ve sonucu dönüştürülmüş sınıf adlarını içeren bir nesneyi tutacak değişkene atayın. Geleneksel olarak bu değişken genellikle 'styles' olarak adlandırılır. Sınıflar daha sonra nesne notasyonu kullanarak className niteliği aracılığıyla uygulanabilir. Bu yaklaşım, sınıf adlarının benzersiz ve bileşene özgü olmasını sağlar.

## 15 soru daha mevcut

- Tailwind CSS'in temel özelliği nedir?
- React'te inline stillerin temel dezavantajı nedir?

Ücretsiz kaydol: https://sharpskill.dev/tr/login

## Diğer React / Next.js mülakat konuları

- [JavaScript Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/javascript-essentials.md): 25 soru, Junior
- [React Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-fundamentals.md): 20 soru, Junior
- [React Hooks](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-hooks.md): 22 soru, Junior
- [Bileşen yaşam döngüsü](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/component-lifecycle.md): 18 soru, Junior
- [React Router](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-router.md): 20 soru, Junior
- [Context ile state yönetimi](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/state-management-context.md): 18 soru, Junior
- [Formlar ve Controlled Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/forms-controlled-components.md): 20 soru, Mid-Level
- [Veri Çekme ve API](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/fetching-data-api.md): 20 soru, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-query-tanstack.md): 20 soru, Mid-Level
- [Next.js Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-fundamentals.md): 25 soru, Mid-Level
- [React ile TypeScript](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/typescript-react.md): 20 soru, Mid-Level
- [Next.js Veri Çekme](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-data-fetching.md): 24 soru, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-server-actions.md): 20 soru, Mid-Level
- [Next.js Routing ve Navigasyon](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-routing-navigation.md): 22 soru, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-api-routes.md): 20 soru, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-metadata-seo.md): 18 soru, Mid-Level
- [Next.js Middleware ve Auth](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-middleware-auth.md): 22 soru, Mid-Level
- [React Testing](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-testing.md): 20 soru, Mid-Level
- [Zustand State Management](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/zustand-state-management.md): 18 soru, Mid-Level
- [React Performans Optimizasyonu](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-performance-optimization.md): 22 soru, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-error-boundaries.md): 18 soru, Senior
- [Advanced React Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/advanced-react-patterns.md): 20 soru, Senior
- [Next.js Gelişmiş Özellikler](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-advanced-features.md): 24 soru, Senior
- [Next.js Dağıtım & Üretim](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-deployment-production.md): 20 soru, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-architecture-patterns.md): 22 soru, Senior
- [React Server Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-server-components.md): 26 soru, Senior
- [Next.js Uluslararasılaştırma](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-internationalization.md): 20 soru, Senior
- [React Güvenlik & En İyi Uygulamalar](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-security-best-practices.md): 22 soru, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/styling-css-in-js