CSS Kullanımına Genel Bakış
Selamlar, bu yazımda sizlere bir web site oluşturmak için olmazsa olmazlardan biri olan CSS’den bahsedeceğim. CSS nedir ile başlayıp, CSS’i nasıl entegre edip yazabileceğinize kadar detayları bu makalemde bulabilirsiniz.🙌
CSS Nedir?
Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları) kısaltması olan CSS, web sitelerinin görsel olarak şekillendirilmesi sağlayan bir işaretleme dilidir. Bir HTML öğesinin biçimlendirilmesinden tutun, farklı cihazlarda nasıl görüneceğine kadar bir çok işlemde CSS kullanırız. Kullanıcı konforu odaklı bir site oluşturmak istediğimizde CSS büyük bir önem taşır.
CSS’in Teknik Özellikleri
CSS’in teknik özellikleri, W3C(World Wide Web Konsorsiyumu) tarafından belirlenir. Bu teknik özellikler 3 sürümü ile karşımıza çıkmaktadır.
İlk CSS sürümü CSS’dir. Metin, arka planlar ve diğer öğelerin vurgu rengi, yazı tipi gibi özelliklerini eklemek için kullanılır.
CSS2'de CSS’e ek olarak sayfa düzeni, konumlandırma, medya türleri gibi özellikler eklenmiştir.
Yeni seçiciler, metin efektleri, animasyon gibi özellikler ise CSS3 ile birlikte kullanılmaya başlanmıştır, bunun yanı sıra Google Yazı Tipleri ve TypeCast’te bulunan özel yazı tipleri de kullanılabilir hale gelmiştir.
Günümüzde kullanılan CSS sürümü son sürüm olan CSS3tür.
CSS’i Nasıl Yazabiliriz?
CSS yazmak için 3 yöntem vardır.
- External(Dış) CSS, Bir HTML dosyasına bağlı ayrı bir dosyada yazılmış style sheet yani stil dosyasıdır.
- Internal(İç) CSS, Bir HTML dosyasının <head> bölümünde yazılmış bir style sheet’tir.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h2 {
color: maroon;
text-align: center;
}
p {
color: gray;
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<p>Lorem ipsum</p>
</body>
</html>- Inline(Satır içi) CSS, Doğrudan bir HTML öğesinin style yani stil özelliğinde yazılmış bir style sheet’tir.
<!DOCTYPE html>
<html>
<body>
<h2 style="color:maroon;text-align:center;">Hello World!</h2>
<p style="color:gray;">Lorem ipsum</p>
</body>
</html>En çok kullanılan CSS çeşiti External CSS’dir. Kod karmaşıklığını önler ve daha düzenli bir görünüm sağlar.
Style sheets yazmak için en yaygın kullanılan dil CSS’dir buna ek olarak Sass/SCSS ve Less dillerinden de faydalanabiliriz. Bu dilleri kullanarak variable declaration(değişken atama), function(fonksiyon) ve kod bloğu yazıp gerekli yerlerde çağırma gibi işlemler yapabilir ve iç içe CSS yazabiliriz. Küçük bir örnek ile daha anlaşılır olmasını sağlayalım.
$neutral: #555555;
@mixin reset-div {
margin: 0;
padding: 0;
}
@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
div {
@include reset-div;
h2,
p {
color: $neutral;
}
h2 {
margin-left: sum(5px, 10px, 15px);
}
}Burada SCSS kullanarak, ilk olarak renk kodumuzu neutral isimli bir variable’a atadık. Bu renk kodunu birden fazla yerde kullanacağımız zaman tekrar tekrar yazmak yerine bir variable’a atıyoruz ki data stabil bir yapı oluşsun. Çoğu projede bütün variable değerleri variables isimli bir dosyada tanımlanıp, ardından CSS dosyasında import edilerek kullanılır. Bu da kodun okunurluğunu arttırır ve daha düzenli bir kod yapısı oluşturmamızı sağlar. Birden fazla class yani sınıf adında aynı CSS’ler kullanılıcak veya aynı function işlemleri yapılıcak ise mixin ve function ile çok daha temiz ve okunur bir CSS yazabiliriz.
Detaylı bilgi için https://sass-lang.com/documentation/ ve https://lesscss.org/ dokümanlarını inceleyebilirsiniz.
Class İsimlendirmeleri için BEM Metodolojisi
Block, Element ve Modifier’ın baş harfleri kullanılarak oluşturulmuş bir kısaltmadır. BEM’in amacı kullanıcı arayüzünü bağımsız bloklara bölmektir. BEM ile hem ortak bir yapı kurmuş oluruz hem de kod okunurluğunu arttırabiliriz. Kısaca Block, Element ve Modifier’dan bahsedelim.
Block: Yeniden kullanılabilir, işlevsel olarak bağımsız bir sayfa bileşenidir.
button, menu, header, footer bu gruba dahil edilebilir.
Element: Block’un içerisindeki child yani alt bileşenlerdir. Block isminden sonra iki alt çizgi ile birlikte kullanılır. button__price, menu__item gibi.
Modifier: Block veya elementlerin varyasyonlarını oluşturmak için yazılır. Birlikte kullanıldığı bileşene tema veya style uygulamamızı sağlar. İki tire eklenerek kullanılır. button — orange, menu__item — active gibi.
Hep birlikte kullanılırsa şu şekilde görünür:
[block]__[element] — [modifier]
Bunların dışında projelerimizde kullanabileceğimiz bazı CSS yazma yöntemlerine değinelim.
Styled components
Styled components JavaScript dosyalarında CSS yazmamızı sağlar. React componentlerinde sıklıkla kullanılır, component içinde herhangi bir elemente odaklanır ve benzersiz classlar oluşturur. Style’larınızı bulmak için farklı dosyalarda arama yapmanız gerekmez, direkt component’inizin olduğu dosyada styled.HTMLElementAdı şeklinde elementler oluşturarak kullanabilirsiniz. Bir component silindiyse ya da kullanılmıyorsa tüm style’ı onunla birlikte silinir. Kodun herhangi bir yerinde class kullanılıp kullanılmadığını aramak zorunda kalmazsınız.
- kurulum ve import etme işlemleri:
# with npm
npm install --save styled-components
# with yarn
yarn add styled-componentsimport styled from 'styled-components';- kullanım şekli:
import styled from `styled-components`
const Title = styled.h1`
color: pink;
text-align: center;
text-decoration: underline;
`;
const Wrapper = styled.section`
background: gray;
padding: 20px 50px;
`;
const App = () => {
return (
<Wrapper>
<Title>
Lorem Ipsum
</Title>
</Wrapper>
)
}Wrapper component’i için section elementi, title component’i için ise h1 elementi oluşturup onlara özel CSS yazmış olduk.
Peki ya bulunduğumuz component dışında bütün componentleri etkileyen yani global bir CSS yazmak istediğimizde ne yapmalıyız? Bunun için styled-components’in createGlobalStyle özelliğini kullanabiliriz. Küçük bir örnek ile anlaşılır olmasını sağlayalım.
import styled, { createGlobalStyle } from `styled-components`
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
}
`;
const Title = styled.h1`
color: pink;
text-align: center;
text-decoration: underline;
`;
const App = () => {
return (
<>
<GlobalStyle />
<Title>
Lorem Ipsum
</Title>
</>
)
}Detaylı bilgi için https://styled-components.com/docs dökümanını inceleyebilirsiniz.
Module CSS
Module CSS yönteminin de React componentlerinde sıklıkla kullanıldığını görebilirsiniz. styled components’de olduğu gibi Module CSS yöntemi ile de seçtiğimiz component’e özel CSS yazabiliriz. Bir component için yazılan CSS, o component’e özel olarak isimlendirilir. Böylelikle diğer class isimlendirmeleri ile çakışmaz. Bunun için local scope kavramını kullanır. Component ismi, class ismi ve random hash değeri birleşerek benzersiz bir seçici oluşturur. Bir örnek ile isimlendirmeyi daha anlaşılır kılalım.
import styles from './styles.module.css';
export default Header() => {
return (
<p className={styles.title}>
Hello World!
</p>
);
};.title {
font-size: 20px;
color: red;
text-align: center;
}Yukarıdaki kod bloğunun çıktısında p class’ı “header_title_2PYij” şeklinde gözükücektir. Bu şekilde benzersiz bir class oluşturmuş olduk.🎉
Peki ya global CSS yazmak istediğimizde ne yapmalıyız? İşte bu noktada karşımıza :global flag’i çıkıyor. Module CSS ile global seçiciler oluşturmak için :global flag’ini kullanabiliriz. Çok küçük bir CSS ile daha anlaşılır olmasını sağlayalım.
:global(body.dark) .header {
color: blue;
}Özet olarak bu yazımda bir web sitesinin olmazsa olmazlarından biri olan CSS hakkında genel bilgi edinip, CSS’i projemize nasıl entegre edebiliriz, hangi yöntemler ile CSS yazabiliriz gibi başlıca konulara değinmiş oldum. Umarım faydalı olmuştur.🙌
Bahsetmiş olduğum yöntemler dışında bootstrap, UIkit, Semantic UI, material UI, tailwind gibi CSS kütüphanelerini projenize import edip kullanabilirsiniz. Bu kütüphaneler fazladan CSS yazmak yerine içerdiği isimlendirmeler ile direkt bir yapı oluşturmanızı sağlar. Bu kütüphanelere bir sonraki yazımda değineceğim. Sevgiler.
