Hızlı css prototiplemede html5 yaklaşımı
veya: <style>etiketler artık sadece kafa için değil!
Hacking CSS
Hata ayıkladığınızı ve page-css'nizi değiştirmek istediğinizi varsayalım, belirli bir bölümün daha iyi görünmesini sağlayın. Stillerinizi hızlı ve kirli ve bakımsız bir şekilde oluşturmak yerine, bu günlerde yaptığım şeyi yapabilir ve aşamalı bir yaklaşımda bulunabilirsiniz.
Satır içi stil özelliği yok
Asla css inline'ınızı asla oluşturmayın, yani: <element style='color:red'>hatta <img style='float:right'>çok uygundur, ancak daha sonra gerçek bir css dosyasındaki gerçek seçici özgüllüğü yansıtmaz ve tutarsanız, bakım yükünden sonra pişman olursunuz.
<style>Bunun yerine prototip
Satır içi css kullanacağınız yerde, sayfa içi <style> öğeleri kullanın . Deneyin! Tüm tarayıcılarda iyi çalışır, bu yüzden test için harikadır, ancak istediğiniz zaman / ihtiyaç duyduğunuzda bu css'yi küresel css dosyalarınıza nazikçe taşımanıza izin verir! (* sadece seçicilerin site düzeyinde özgüllük yerine yalnızca sayfa düzeyinde özgünlüğe sahip olacağını unutmayın, bu yüzden çok genel olmaya dikkat edin) Css dosyalarınızdaki kadar temiz:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
Başkalarının satır içi css'ini yeniden düzenleme
Bazen problem bile değilsin ve başka birinin inline css'si ile uğraşıyorsun ve onu yeniden düzenlemelisin. Bu, <style>sayfa içi için başka bir harika kullanımdır , böylece inline css'yi doğrudan şeritleyebilir ve yeniden düzenleme sırasında sınıflara, kimliklere veya seçicilere doğrudan sayfaya yerleştirebilirsiniz. Seçicilerinize giderken yeterince dikkatli olursanız, son sonucu yalnızca bir kopyala & yapıştır ile sonunda global css dosyasına taşıyabilirsiniz.
Bu transfer etmek biraz zor her küresel css dosyasına derhal css bit, ancak sayfa içi ile <style>elementlerin, şimdi alternatifleri var.