CSS ve Sass için makul bi yaklaşım
Bir kural bildirimi, bir grup seçiciye verilen addır. Örneğin:
.listing {
font-size: 18px;
line-height: 1.2;
}
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] {
/* ... */
}
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;
}
- 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 {
// ...
}
- 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 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.
Ö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
block
tur ve en yüksek seviyeli componenti temsil eder.ListingCard__title
element
tir ve bloğu bir bütün olarak oluşturmaya yardımcı olan.ListingCard
ın bir soyunu temsil eder..ListingCard--featured
modifier
dır ve.ListingCard
bloğunda farklı bir durumu veya varyasyonu temsil eder.
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.
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'ın olmadığı durumlarda none
yerine 0
kullanın.
Kötü Kod
.foo {
border: none;
}
İyi Kod
.foo {
border: 0;
}
.scss
syntaxı kullanın, orijinal.sass
syntaxını kullanmayın.- CSS ve
@include
ları düzenli kullanın (aşağı bakın).
- 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
@include
ları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;
}
}
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.
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
ten 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 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.
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
(The MIT License)
Copyright (c) 2015 Airbnb
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.
css-stil-rehberi's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.