Yoğun olarak üzerinde çalıştığım bir web sitesi için CSS güvenerek olmuştur. Şu anda, tüm CSS stilleri bir başına tag olarak uygulanıyor ve herhangi bir gelecek değişiklikleri ile yardımcı olmak için harici bir stil, daha fazla taşımak için çalışıyorum şimdi.

Ama şimdi sorun alıyorum fark ettim ki "CSS Patlama". Beni en iyi organize ve CSS dosyası içinde soyut verileri nasıl karar vermek zor oluyor.

Site içinde div etiketleri çok sayıda kullanarak, bir ağır tablo tabanlı web sitesi taşınıyorum. Bu gibi CSS seçiciler bir sürü alıyorum

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

Henüz çok kötü değil, ama ben bir acemi olarak, eğer öneriler CSS dosyası çeşitli parçaları düzenlemek için nasıl yapılabilir diye merak ediyordum. Web sitemde her element için ayrı bir CSS özniteliği istemiyorum, ve ben her zaman CSS dosyasını okumak için oldukça sezgisel ve kolay olmasını istiyorum.

Benim nihai hedefi kolay CSS dosyaları kullanmak ve web geliştirme hızını artırmak için güçlerini göstermek için yapmak. Bu şekilde, gelecekte bu sitede olabilecek diğer bireylerin de iyi kodlama uygulamalarını kullanarak, yerine yaptığım yol almak zorunda kalmadan uygulamaya alacak.

Bu çok iyi bir soru. Her yerde bir takım içinde çalışırken, CSS dosyaları, kontrolden eğilimindedir bir süre sonra - özellikle, ama sadece bakıyorum.

Aşağıdaki uymak için kendi kendime çalışıyorum kuralları (ben her zaman için yönetmek.)

• Erken, sık sık yeniden Düzenle yeniden Düzenle.Sık sık CSS dosyaları, aynı sınıfın birden çok tanımının sigorta temiz. Eski tanımlar çıkarınhemen.

• Hata düzeltme sırasında CSS eklerken, bu değişiklik ne gibi bir Yorum bırak ("Bu kutu IE < sola hizalı olduğundan emin olun; 7")

• Örneğin .classname .classname:hover aynı şeyi tanımlama işten çıkarmalar önlemek.

• 12* *yorum açık bir yapı inşa etmek için kullanın.

• Sabit bir tarzı sürdürmek yardımcı olur prettifier bir araç kullanın. Hangi ($maliyeti 15 ama para iyi geçirdi) çok mutluyum Polystyle, kullanıyorum. Eminim orada özgür olanlar çevresinde de (Güncelleme: örneğin Code Beautifier dayalı CSS Tidy bir açık kaynak aracı olmadım. eskiden ben henüz ama çok ilginç duruyor.)

• Mantıklı sınıfları oluşturmak. Bunun üzerine bir kaç not için aşağıya bakınız.

• Kullanım anlambilim, DİV çorbası - örneğin menüler için <ul>s kaçının.

• Mümkünse mümkün olduğunca düşük bir seviyede (body varsayılan yazı tipi ailesi, renk ve boyut gibi) her şeyi tanımlamak ve inherit kullanın

• Eğer çok karmaşık CSS varsa, belki bir CSS ön-derleyici yardımcı olur. Aynı sebepten xCSS yakında içine bakmayı planlıyorum. Birkaç diğerleri vardır.

• Eğer çalışan bir takım, CSS dosyaları için de kalite ve standartların gereğini vurgulamak. Herkes kendi programlama dilinde kodlama standartları(s) büyük, ama bu da CSS için gerekli olan küçük bir farkındalık var.

• Eğer çalışan bir takımyapınSürüm Kontrolü kullanmayı düşünün. Bitkiler çok fazla parça ve çok daha kolay düzenleme çatışmaları çözmek daha kolay yapar. Gerçekten "HTML ve CSS içine. sen bile buna değer.

• !important ile çalışmıyor. Sadece =< çünkü YANİ; 7 bunu kaldıramıyor. Karmaşık bir yapı, kullanımı !önemli sık sık bulunamayacak olan bir davranışı değiştirmek için cazip bir teklif, amazehiruzun süreli bakım için.

Mantıklı sınıfları bina

Bu mantıklı sınıfları inşa etmeyi seviyorum.

Genel Ayarlar ilk uyguluyorum:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

Daha sonra, sayfanın düzeni ana bölümleri - mesela, üst bölgede, menü, içerik ve altbilgi tanımlayın.Eğer iyi biçimlendirme yazsam, bu alanlar HTML yapısı ile aynı olacaktır.

Daha sonra, CSS dersleri bina, soy olarak mümkün ve mantıklı belirterek, mümkün olduğunca yakından ilgili sınıfları gruplandırma başlıyorum.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

Bir bütün olarak CSS yapısını düşünağaçgiderek daha özel tanımlar daha uzakta kökünden. Sınıfların sayısını mümkün olduğunca düşük tutmak istiyorum, ve kendinizi olabildiğince nadir tekrarlamak istiyorum.

Örneğin, diyelim ki navigasyon menüleri için üç seviye var. Bu üç menüler farklı görünüyor, ama onlar da bazı özellikleri paylaşır. Örneğin, hepsi <ul> hepsi aynı yazı tipi boyutu ve tüm öğelerdir birbirinize yakın (karşıt olarak varsayılan render ul). Ayrıca, menülerin hiçbiri herhangi bir mermi puan (list-style-type) vardır.

İlk olarak, tanımlamakortakmenu adında bir sınıf içine özellikleri

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

sonra, üç menülerin her biri kendine has özelliklerini tanımlayın. 40 piksel yüksekliğinde ve Seviye 1 ve 3 20 piksel seviyesi 2.

Not:bu da ancak Internet Explorer 6 has problems with multiple classes, yani bu örnek için birden çok sınıfları kullanabilirsin kullanır idler.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

Menü biçimlendirme bu gibi görünecektir:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

Eğer anlamsal olarak benzer öğeleri sayfa gibi bu üç menüleri - denemek için işe ortak ilk ve koymak onları içine bir sınıf; sonra, işe özgü özellikleri ve onları uygulamak için sınıfları veya, eğer varsa, destek Internet Explorer 6, ID.

Çeşitli HTML ipuçları

Eğer HTML çıktı bu anlambilim eklerseniz, tasarımcılar daha sonra web siteleri ve/veya uygulamalar görünümünü büyük bir avantaj olan saf CSS, kullanma ve zaman tasarrufu özelleştirebilirsiniz.

• Mümkünse, her sayfanın gövde benzersiz bir ders vermesi: <body class='contactpage'> Bu çok kolay stil sayfası için sayfa özel düzenlemeler eklemek için yapar:

  body.contactpage div.container ul.mainmenu li { color: green }
  

• Otomatik menüler oluşturulurken, mümkün olduğunca CSS bağlamında kapsamlı bir stil daha sonra izin vermek için ekleyin. Örneğin:

  <ul class="mainmenu">
   <li class="item_first item_active item_1"> First item </li> 
   <li class="item_2"> Second item </li> 
   <li class="item_3"> Third item </li> 
   <li class="item_last item_4"> Fourth item </li> 
  </ul>
  

  Bu şekilde, her bir menü öğesi erişilebilir stil göre olan semantik bağlam: Olsun ilk veya son öğeyi listede; Olsun bu etkin madde; sayı.

Notdoes not work properly in IE6 yukarıdaki örnekte belirtildiği gibi birden fazla sınıflar bu atama. IE6 birden fazla sınıflar ile başa çıkmak için mümkün yapmak için workaround var; Henüz denemedim ama çok umut verici, Dean Edwards gelen görünüyor. O zamana kadar, sizin için en önemli olan sınıf (ürün numarası, aktif ya da ilk/son) ya da Kimliklerini kullanarak başvurmak zorunda olacak. (booo IE6!)