CSS'de başlık yazma
Sadece bölümleri dosyalara ayırın. Herhangi bir CSS yorumu, sadece bu olmalı, yorumlar.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
Bunları birleştirmek için bir komut dosyası kullanın; Eğer gerekliyse. Hatta güzel bir dizin yapısına sahip olabilir ve betiğinizin .cssdosyaları tekrar tekrar taramasını sağlayabilirsiniz .
Başlık yazmanız gerekiyorsa, dosyanın başında bir İçindekiler oluşturun
İçindekiler'deki başlıklar daha sonra yazacağınız başlıklara tam olarak eşit olmalıdır. Başlık aramak acı verici. Soruna eklemek için, ilk başlığınızdan sonra başka bir başlığınızın olduğunu tam olarak nasıl bilebilirsiniz? ps. İçindekiler yazarken her satırın başına doc benzeri * (yıldız) eklemeyin, metni seçmeniz daha can sıkıcı olur.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
Blok dışında veya kuralların içinde veya dışında yorum yazın
Öncelikle, komut dosyasını düzenlediğinizde, kural bloğunun dışında olanlara dikkat edin (özellikle büyük bir metin küresi;)). İkincisi (neredeyse) dışında bir "yorum" ihtiyacınız olacağını hiçbir durumda yoktur. Dışarıda ise, bir unvanın% 99'udur, bu yüzden böyle tutun.
Sayfayı bileşenlere bölme
Bileşenler olmalıdır position:relativehayır paddingve hayır margin, çoğu zaman. Bu basitleştirir% çok, hem de çok daha basit sağlayan kuralları absolute:positionbir mutlak konumlu konteyner varsa hesaplanırken mutlak konumlu eleman kabı kullanacağından, elementlerin ing' top, right, bottom, leftözellikleri.
HTML5 belgesindeki çoğu DIV genellikle bir bileşendir.
Bileşen aynı zamanda sayfada bağımsız bir birim olarak kabul edilebilecek bir şeydir. Laymen'in terimleriyle, bir kara kutu gibi bir şeyi tedavi etmek mantıklıysa, bir bileşen gibi davranın .
KG sayfası örneğiyle tekrar gitmek:
#navigation
#question
#answers
#answers .answer
etc.
Sayfayı bileşenlere bölerek, çalışmanızı yönetilebilir birimlere böldünüz.
Aynı satıra kümülatif etkisi olan kurallar koyun.
Örneğin border, marginve padding(ancak outline) sen stil olan elemanın boyutları ve boyutuna tüm eklenti.
position: absolute; top: 10px; right: 10px;
Bir satırda o kadar okunabilir değillerse, en azından onları yakın bir yere koyun:
padding: 10px; margin: 20px;
border: 1px solid black;
Mümkün olduğunca steno kullanın:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
Asla bir selektörü tekrarlamayın
Aynı seçiciden daha fazla örneğiniz varsa, aynı kuralların birden fazla örneğiyle kaçınılmaz olma şansınız yüksektir. Örneğin:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
İd / sınıflarını kullanabildiğinizde, TAG'leri seçici olarak kullanmaktan kaçının
İlk olarak DIV ve SPAN etiketleri istisnadır: bunları asla kullanmamalısınız! ;) Bunları yalnızca bir sınıf / kimlik eklemek için kullanın.
Bu...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
Bu şekilde yazılmalıdır:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Çünkü orada sarkan ekstra DIV'ler seçiciye hiçbir şey katmıyor. Ayrıca gereksiz bir etiket kuralını zorlarlar. Eğer, örneğin, bir değişim olursa .answerbir gelen divbir etmek articleiçin stil kırar.
Veya daha fazla açıklık istiyorsanız:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
border-collapseMülkiyet olmasının sebebi , sadece a'ya uygulandığında mantıklı olan özel bir özelliktir table. Eğer .statisticsolmayan bir tablezaman uygulama olmamalıdır.
Genel kurallar kötülüktür!
- mümkünse genel / büyü kuralları yazmaktan kaçının
- CSS sıfırlama / sıfırlama için değilse, tüm genel sihiriniz en az bir kök bileşene uygulanmalıdır
Size zaman kazandırmazlar, başınızı patlatırlar; bakım yapmak da bir kabus. Kuralı yazarken, nerede uygulandıklarını biliyor olabilirsiniz, ancak bu kuralınızın daha sonra sizinle uğraşmayacağının garantisi yoktur.
Bu jenerik kurallara eklemek kafa karıştırıcı ve okunması zor, şekillendirdiğiniz belge hakkında bir fikriniz olsa bile. Bu, genel kurallar yazmamanız gerektiği anlamına gelmez, sadece genel olmasını istemediğiniz sürece bunları kullanmayın ve hatta seçiciye olabildiğince çok kapsam bilgisi ekleyin.
Bunun gibi şeyler ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... global değişkenleri bir programlama dilinde kullanmakla aynı soruna sahiptir. Onlara kapsam vermelisin!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
Temel olarak şu şekilde okunur:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
Bildiğim bir bileşen bir sayfada bir tekil olduğunda kimlikleri kullanmayı seviyorum; ihtiyaçlarınız farklı olabilir.
Not: İdeal olarak, yeterince yazmalısınız. Ancak seçicide daha fazla bileşenden bahsetmek, daha az bileşenden bahsetmeye kıyasla daha affedici bir hatadır.
Bir paginationbileşeniniz olduğunu varsayalım . Sitenizdeki birçok yerde kullanıyorsunuz. Bu, ne zaman genel bir kural yazacağınıza iyi bir örnek olacaktır. Size display:blockbireysel sayfa numarası bağlantılarını söyleyelim ve onlara koyu gri bir arka plan verelim. Görünür olmaları için aşağıdaki kurallara sahip olmanız gerekir:
.pagination .pagelist a {
color: #fff;
}
Şimdi çağrılarınızı yanıtların bir listesi için kullandığınızı varsayalım, böyle bir şeyle karşılaşabilirsiniz
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
Bu, beyaz bağlantılarınızı istemediğiniz siyah yapar.
Bunu düzeltmenin yanlış yolu:
.pagination .pagelist a {
color: #fff !important;
}
Düzeltmenin doğru yolu:
#answers .header .pagination .pagelist a {
color: #fff;
}
Karmaşık "mantık" yorumları çalışmıyor :)
"Bu değer blah-blah'ın blah-blah'ın yüksekliğiyle birleşimine bağlıdır" gibi bir şey yazarsanız, bir hata yapmanız kaçınılmazdır ve hepsi bir kart evi gibi düşecektir.
Yorumlarınızı basit tutun; "mantıksal işlemlere" ihtiyacınız varsa SASS veya LESS gibi CSS şablonlama dillerinden birini düşünün .
Renk paletini nasıl yazarım?
Bunu sonuna kadar bırak. Tüm renk paletiniz için bir dosyaya sahip olun. Bu dosya ile stiliniz hala kurallarda kullanılabilir bir renk paletine sahip olmalıdır. Renk paletinizin üzerine yazılmalıdır. Seçicileri çok yüksek seviyeli bir üst bileşen (örn. #page) Kullanarak zincirlendirir ve stilinizi kendi kendine yeterli bir kural bloğu olarak yazarsınız. Sadece renk veya daha fazlası olabilir.
Örneğin.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
Fikir basittir, renk paletiniz, içine bastığınız temel stilden bağımsız bir stil sayfasıdır .
Daha az ad, daha az bellek gerektirir ve kodun okunmasını kolaylaştırır
Daha az isim kullanmak daha iyidir. İdeal olarak çok basit (ve kısa!) Kelimeler kullanın: metin, gövde, başlık.
Ayrıca basit kelimelerin kombinasyonunu anlamak daha kolay, sonra uzun "uygun" kelimelerin bulunduğu bir çorbaya sahip olmak: postbody, posthead, userinfo, vb.
Kelime haznesini küçük tutun, bu şekilde biraz yabancı bir kişi stil çorbanızı okumak için gelse bile (birkaç hafta sonra kendiniz gibi), her seçicinin kullanıldığı yerde kelimelerin nerede kullanıldığını anlaması yeterlidir. Örneğin .this, bir öğenin sözde "seçilen öğe" veya "geçerli öğe" vb.
Kendinizden sonra temizleyin
CSS yazmak yemek gibidir, bazen geride bir karmaşa bırakırsınız. Bu karışıklığı temizlediğinizden emin olun, yoksa çöp kodu yığılır. Kullanmadığınız sınıfları / kimlikleri kaldırın. Kullanmadığınız CSS kurallarını kaldırın. Her şeyin güzel olduğundan ve çakışan veya yinelenen kuralların olmadığından emin olun.
Önerdiğim gibi, bazı kapları stilinizde kara kutular (bileşenler) olarak ele aldıysanız, bu bileşenleri seçicilerinizde kullandıysanız ve her şeyi tek bir dosyada tuttuysanız (veya bir TOC ve başlıklarla bir dosyayı düzgün bir şekilde böldüyseniz), o zaman iş çok daha kolay ...
Css nukes ve carnies gizli gizli önemsiz bazı bulmanıza yardımcı olmak için firefox uzantısı Dust-Me Selectors (ipucu: sitemap.xml adresine yönlendirin) gibi bir araç kullanabilirsiniz.
unsorted.cssDosya tut
Bir KG sitesi oluşturduğunuzu ve "yanıtlar sayfası" için arayacağımız bir stil sayfanız olduğunu varsayalım answers.css. Şimdi çok fazla yeni css eklemeniz gerekiyorsa, unsorted.cssstil sayfasına ekleyin ve ardından answers.cssstil sayfanıza yeniden bakın .
Bunun birkaç nedeni:
- bitirdikten sonra yeniden düzenlemek daha hızlıdır, o zaman kuralları aramak (muhtemelen mevcut değildir) ve kod enjekte etmek
- kaldıracağınız şeyler yazacaksınız, kod enjekte etmek sadece bu kodu kaldırmayı zorlaştırıyor
- orijinal dosyaya kolayca eklemek kural / seçici çoğaltmasına yol açar
simplicity,complexity,maintenance,structureverefactoring.