CSS yazarken nasıl organize kalabilirim?

Question

Olası Çoğalt: Ben organize benim stil tutuyor bulmak en zor şeylerden
How to Manage CSS Explosion

biri. Genelde küçük bir sıfırlama bölümü yazarak başlarım. Sonra mizanpaj bloklarını yazarım ve HTML bloklarımı yazarken stillerimi aşamalı olarak eklemeye devam ediyorum.

İlk iki adımdan sonra, her şey bir karmaşaya dönüşüyor. Stiller sık ​​sık değiştirilen kaprisli HTML kodlamasına dayanarak eklenir, kaldırılır, unutulur. CSS'mi ayırmak ve sınıflandırmak için mantıklı bir yol bulamıyorum.

Kendimi varsayılan stil, gezinme ve düzen için ayrı sayfalar oluştururken buldum.

Ayağımın CSS'sini yazdıktan sonra, varsayılan stil sayfasına, gezinme bölümüne veya düzen dosyasına gitmesi gerekip gerekmediğini anlayamadım. Kapsayıcı kesinlikle düzenin bir parçasıydı, navigasyon menüleri bölüm navigasyonuydu, ancak temel stil sayfasına girmesi gereken stilleri vardı. Kendimi CSS'yi buna göre ayırmayı düşündüğümü buldum ama bu doğru olamaz.

Fikirlerimi düzenli sınıflara ayırmanın mantıklı bir yolunu bulamıyorum.

Birisi bana herhangi bir fikir verebilir mi?

Answer 1

edelim yaklaşımı bu web sitenizin düzeni.

Bir çerçeve kullanmanın daha iyi, daha soyutlama, daha fazla öğrenme eğrisi oluşturup oluşturmayacağından emin değilim.

Sanırım kuruluşunuzla doğru yoldasınız.

Genellikle varsayılan yazı tipleri, renkler, bağlantı stilleri vb. Için biçimlendirmeyi içeren bir default.css dosyası oluşturuyorum. Bu dosyada, gömülü resimler içeren oldukça biçimlendirilmiş metinlerden oluşan büyük bir yığın olması durumunda web sitesine davranıyorum. Burada <div> etiket tasarımı yok. Genellikle bu, içerik için bir çok biçimlendirmenin var olduğu anlamına gelir. Ancak haber sayfasındaki bu özel buton, kendi başına bir news.css alır.

Genellikle web siteleri parçalara bölünebilir. Üstbilgi, altbilgi, kenar çubuğu, ön sayfa, gazeteler, ajanda, vb. Örneğin altbilgi kırmızı renkteyse, arka plan rengini içeren footer.css dosyasını görmek güzel.

Altbilgideki bağlantı stili, kenar çubuğundakiyle aynıysa, stil bildirimlerini her iki dosyaya da koyun. Altbilgideki bağlantı stili, ana gövde metni ile aynıysa, default.css içine yerleştirilir. İlk olarak yeni bir geliştirici olarak görüneceğinden emin olun.

Answer 2

Sorunuza doğrudan bir yanıt olmasa da, less.js veya onun birkaç sunucu klonuna baktınız mı? Belki de daha az stil koduna sahip olmak, düzenlemeyi kolaylaştırır.

Answer 3

Şahsen xhtml çıktım için küçük bir php-template-script'im var. bu yüzden xhtml şablonum sepreate .tpl dosyalarında. Bu dosyalar birbirlerini içerebilir. Bu yüzden başlangıçta head.tpl ve en sonunda foot.tpl dahil olmak üzere bir main.tpl olabilir ve sayfanızın dinamik kısmını belirli bir şablonda kodlayın.

Bu genellikle yapılır ve artık her şablona bir stil sayfası atayabilirsiniz. Yani bir foot.css ve bir head.css var (bunu istediğiniz gibi genişletebilirsiniz). Web sayfaları tasarlanırken açık bir sahile sahip olmamı sağlar.

Umut, bu yardımcı olur.

Answer 4

Böyle Pusula olarak bir çerçeve kullanarak CSS bazı bölümlerini basitleştirmek olabilir: O, size değişkenler oluşturmak için katmalar verir ve genel Alabileceğiniz CSS sorunların çoğunun bir oldukça harika bir çözümdür http://compass-style.org/

.

böyle LDŞÖ veya istemci tarafı eşdeğer AZ Js gibi diğer çözümler vardır (http://lesscss.org/) bazı değişiklikler yapmak isteyen yeni bir programcının açıdan