Airbnb CSS/Sass Rehberi

CSS ve Sass için makul bi yaklaşım

İçindekiler

Terminoloji
CSS
Sass
Çeviri
Lisans

Terminoloji

Kural Bildirimi

Bir kural bildirimi, bir grup seçiciye verilen addır. Örneğin:

.listing {
  font-size: 18px;
  line-height: 1.2;
}

Seçiciler

Bir seçici, DOM ağacındaki elementlerin tanımlı özellikler tarafından biçimlendirilmesini sağlar. Seçiciler, HTML elementlerinin yanı sıra sınıfı, id'yi yada property ile eşleşebilir. İşte bazı örnekler:

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

Propertyler

Bir seçicinin stillerini içerir. Propertyler, key-value çiftleridir (Örneğin color: turquoise;). Propertyler şu şekilde görünür:

/* herhangi bir seçici */ {
  background: #f1f1f1;
  color: #333;
}

⬆ yukarı çık

CSS

Biçimlendirme

Girintiler için 2 boşluk kullanın
Class adlarında camelCasing yerine tire (-) kullanın.
- BEM kullanıyorsanız PascalCasing kullanabilirsiniz. (OOCSS ve BEM).
ID seçici kullanmayın
Birden çok seçici kullandığınızda, her seçiciye yeni satır verin
{ parantezinden önce bir boşluk bırakın
:dan önce boşluk kullanmayın fakat sonrasında bir boşluk kullanın
} parantezinden sonra yeni bir satıra geçin
Kural bildirimleri arasına bir boş satır kullanın

Kötü Kod

.avatar{
  border-radius:50%;
  border:2px solid white; }
.no, .nope, .not_good {
  // ...
}
#lol-no {
  // ...
}

İyi Kod

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

Yorum Satırları

Tek satır yorumlar için // tercih edin.
Yorum satırlarını yeni satırda yazın. Satır sonuna yazmaktan kaçının.
Kendi kendini belgeleyen kodlar için ayrıntılı yorumlar yazın: - z-index kullanımı - Tarayıcı uyumluluğu veya tarayıcıya özgü hackler

OOCSS ve BEM

OOCSS ve BEM kombinasyonlarını teşvik etme nedenlerimiz şunlar:

CSS ve HTML arasında net, sıkı ilişkiler oluşturulmasına yardımcı olur
Yeniden kullanılabilir, bileşilebilir componentler oluşturmamıza yardımcı olur
Daha az yuvalanma (nesting) ve daha düşük özgüllük sağlar
Ölçeklenebilir stil sayfalarının oluşturulmasına yardımcı olur

OOCSS veya Obje Yönelimli CSS, stil sayfalarınızı objeler topluluğu olarak düşünmenizi teşvik eden CSS yazmak için bir yaklaşımdır; bir web sitesinde bağımsız olarak kullanılabilen yeniden kullanılabilir, tekrarlanabilir snippetlerdir.

Nicole Sullivan'ın OOCSS wiki hakkında makalesi
Smashing Magazine'ın OOCSS hakkında makalesi

BEM veya Block-Element-Modifier, HTML ve CSS classları için bir _naming kuralıdır. Orijinal olarak Yandex tarafından büyük kod esasları ve ölçeklenebilirlik göz önünde bulundurularak geliştirildi ve OOCSS'yi uygulamak için sağlam bir dizi kural olarak kullanılabilir.

CSS Trick'in BEM 101 hakkında makalesi
Harry Roberts'in BEM hakkında makalesi

Özellikle componentlerle birleştirildiğinde (örneğin React) iyi çalışan PascalCased blokları ile BEM'in bir varyantını öneriyoruz. Alt çizgiler ve kısa çizgiler hala değiştiriciler ve childlar için kullanılır.

Örnek

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

.ListingCard blocktur ve en yüksek seviyeli componenti temsil eder
.ListingCard__title elementtir ve bloğu bir bütün olarak oluşturmaya yardımcı olan .ListingCardın bir soyunu temsil eder.
.ListingCard--featured modifierdır ve .ListingCard bloğunda farklı bir durumu veya varyasyonu temsil eder.

ID Seçiciler

CSS'te id seçiciler kullanılabilsede, kullanmaktan kaçınmalıyız. Id seçiciler kural bildirimine gereksiz derecede yüksek bir özgüllük seviyesi getirir ve tekrar kullanılamazlar.

Bu konu hakkında daha fazla bilgi için, CSS Sihirbazının makalesini okuyun.

JavaScript kancası

CSS ve JavaScriptinizde aynı classa bağlanmaktan kaçının. Başka bir developer class adında değişiklik yaptığında çalışan sistemi bozabilir. (o class javascriptte kullanılıyor olabilir.)

JavaScript ile class'ları seçmek için, js'ye özgü .js- ön ekli classlar oluşturmanızı öneririz. Bu refactoring sırasında boşa harcanan süreyi en aza indirecektir.

<button class="btn btn-primary js-kitap-istemek">Kitap İstemek</button>

Border

Border'ın olmadığı durumlarda none yerine 0 kullanın.

Kötü Kod

.foo {
  border: none;
}

İyi Kod

.foo {
  border: 0;
}

⬆ yukarı çık

Sass

Syntax

.scss syntaxı kullanın, orijinal .sass syntaxını kullanmayın.
CSS ve @includeları düzenli kullanın (aşağı bakın).

Düzen

Property bildirimleri

Tüm standart propertyleri, @include veya nested bir seçici olmayan herhangi bir şeyi listeleyin.

.btn-green {
  background: green;
  font-weight: bold;
  // ...
}

@include bildirimleri

@includeların propertylerin sonunda olması, tüm seçiciyi okumayı kolaylaştırır.

.btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

İç içe seçiciler

Kural bildirimleriniz ve iç içe geçmiş seçiciler ile bitişik iç içe geçmiş seçiciler arasında boşluk ekleyin. İç içe geçmiş seçicilerinize yukarıdaki aynı yönergeleri uygulayın.

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

Değişkenler

camelCased veya snake_cased değişken adları yerine dash-cased değişken isimlerini tercih edin (örneğin, $my-variable). Aynı dosya içinde yalnızca bir alt çizgi (örneğin, $_my-variable) ile kullanılması amaçlanan değişken adlarını önek kabul etmek mümkündür.

Mixin

Temiz ve daha anlaşılır kod yazımı için iyi adlandırılmış mixinler kullanılmalıdır. Ancak css kodlarını gereksiz yere çoğaltmayacağınızdan emin olun.

Extend

@extendten kaçınılmalıdır, çünkü özellikle iç içe geçmiş seçicilerle kullanıldığında beklenmedik ve potansiyel olarak tehlikeli davranışları vardır. Üst düzey placeholder seçicilerini genişletmek bile, seçici sırasının daha sonra değişmesiyle sorunlara neden olabilir. Gzipping, @extend kullanarak elde edeceğiniz tasarrufların çoğunu üstlenmeli ve stil sayfalarınızı mixinlerle güzelce canlandırabilirsiniz.

İç içe geçmiş seçiciler

İç içe seçicileri en fazla 3 seviye kullanın!

.page-container {
  .content {
    .profile {
      // DUR!
    }
  }
}

Seçiciler bu kadar uzun olduğunda, CSS'iniz:

HTML'e çok sıkı bağlanır
Aşırı spesifiktir
Yeniden kullanılamaz, refactoringi zor hale gelir

Tekrar: Hiçbir zaman ID seçiciyi iç içe seçicilerde kullanmayın!

Bir ID seçiciyi ilk etapta kullanmanız gerekiyorsa, asla iç içe seçicilerde kullanılmamalıdır. Bunu yaptığınızda, kodunuzu tekrar gözden geçirmeniz veya bu kadar güçlü özgüllüğün neden gerekli olduğunu bulmanız gerekir. İyi oluşturulmuş bir HTML ve CSS yazıyorsanız, bunu asla yapmanıza gerek yoktur.

⬆ yukarı çık

Çeviri

Bu rehberin diğer dillerde çeviriside mevcuttur:

English: airbnb/css
Bahasa Indonesia: mazipan/css-style-guide
Chinese (Traditional): ArvinH/css-style-guide
Chinese (Simplified): Zhangjd/css-style-guide
French: mat-u/css-style-guide
Japanese: nao215/css-style-guide
Korean: CodeMakeBros/css-style-guide
Portuguese (Brazil): felipevolpatto/css-style-guide
Portuguese (Portugal): SandroMiguel/airbnb-css-style-guide
Russian: Nekorsis/css-style-guide
Spanish: ismamz/guia-de-estilo-css
Vietnamese: trungk18/css-style-guide
Italian: antoniofull/linee-guida-css

⬆ yukarı çık

Lisans

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ yukarı çık

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

omergulcicek / css-stil-rehberi

Labels

Projects that are alternatives of or similar to css-stil-rehberi

Airbnb CSS/Sass Rehberi

İçindekiler

Terminoloji

Kural Bildirimi

Seçiciler

Propertyler

CSS

Biçimlendirme

Yorum Satırları

OOCSS ve BEM

ID Seçiciler

JavaScript kancası

Border

Sass

Syntax

Düzen

Değişkenler

Mixin

Extend

İç içe geçmiş seçiciler

Çeviri

Lisans