CSS tips!

Bu sabah bir tweet benim html&css yazarken sıkça karşılaştığım sorunlarda aydılanmama yardımcı oldu :) Mesela bir menü yapısını oluşturmak için li, span, div yada sadece a elementi bile yeterli olabilir. Ama en iyi nerede hangisi ? 

WebDesignDev WebDesignDev ** Best Web Design Blog Posts of 2009: bit.ly/d3pCGm **

Bu ipuçlarından bazılarını bende aşağıda sıraladım;


CSS Tips

• Daima tek satır yazın,
• .someDiv { background: red; padding: 2em; border: 1px solid black; }  

• CSS framework kullanmaya başlayın,
• Reset.css kullanın. Bunun için yui yada kendi reset.css inizi kullanabilirsiniz,
• Yapıyı daima yukarıdan aşağı doğru oluşturun. #head, #menu, #content, #footer gibi
• Multiple Class kullanabilirsiniz, <div class="box right"></div>
• Shorthand kullanın. Yani ; margin-left:    5px; margin-top:    5px; margin-right:   7px;  yerine margin:8px 7px 0 5px; kullanın,
• Css içinie yorumlar yazın. İlk bakışta ne neredeydi bulmak için iyi bir yöntem.
• Bunu bende nasıl yazarım diye düşünmüştüm ! : ) Özellikleri alfabetik sıralayın
• #cotton-candy {  
•     color: #fff;  
•     float: left;  
•     font-weight:  
•     height: 200px;  
•     margin: 0;  
•     padding: 0;  
•     width: 150px;  
• }

• CSS sıkıştırıcıları kullanın; css compresser, css optimizer,
• Genel classlar kullanın. Kimi zaman çok yardımı dokunur tabi abartmamak lazım. margin-top: 10 px i .mt-10 diye bir class a atamak çok mantıklı bir yöntem değildir : )
• .left {float:left}  
• .right {float:righ}  

• Layout u ortalamak için "Margin: 0 Auto" kullanın, daha iyi bir yöntem bilen beri gelsin,
• H1 etiketlerini gizlemek için negative margin kullanmayın. Şu videoyu izlemek gerek,
• Tabiki positionların kullanımı,
• Yazdığınız css ve html i validasyondan geçirin. Css validator, html validator ,
• Hazırsanız object oriented css kullanın.

"OOCSS (object oriented css)" bu maddeyi başta görmüş olsaydım sadece bunun üzerine bir yazı yazmak isterdim . Yakın zamanda sadece oocss hakında biinlerce sayfalık bir web sitesi için nasıl ölçekli css yazarsınız ? Bunun üzerine kurulu diyebilirim oocss. Şu an için şu slaytı paylaşabilirim oocss hakkır yazmayı planlıyorum.

Javascript ve PHP için ipuçları;
http://net.tutsplus.com/tutorials/php/30-php-best-practices-for-beginners/ 
http://net.tutsplus.com/tutorials/javascript-ajax/24-javascript-best-practices-for-beginners/


Kaynaklar;
http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
http://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/