29 Ekim 2012 Pazartesi

CSS Kodlarını Azaltma Yöntemleri

http://www.akblog.net/2012/10/css-kodlarn-azaltma-yontemleri.html
CSS Kodlarını Azaltma Yöntemleri CSS Kodlarını Azaltma, CSS Codes Reduction, CSS Kod Düzeltme Kısaltma, Css, Css Code, Css Code Search, Css kodları azaltmak kısaltmak
CSS KODLARININ DÜZENLENMESİ VE CSS KODLARINI AZALTMA YÖNTEMLERİ
Css ye yeni başlayan, css bilen veya css kodlarıyla haşır neşir olan herkes bu dokümandan faydalanabilecektir.
Makalenin amacı css kodlaması yapan herkese css kodlarını düzenlemeyi, modüler hale getirmeyi ve en önemlisi kodları azaltarak kod karmaşasından kurtulmayı kodlamacılara göstermektir Özellikle büyük projelerde kod azaltmak ve aynı işi daha az kodla yapmak önem arz etmektedir.
Her şeyden önce hangi dilde kodlama yaparsak yapalım ister css ister php ister .net olsun temiz, düzenli ve anlaşılır bir kodlama yapmamız şarttır. Bu tür bir kodlama yapmak kodlamacının kaliteli bir kodlama yaptığını göstermesinin yanı sıra gerek kodların anlaşılmasında gerek büyük projelerde karışıklığın önüne geçerek iş verimini ve kalitesini önemli ölçüde artıracaktır.


,
akblog net gibi bir sitenin css kodlamasını yaptığınızı düşünün, düzenli çalışmazsanız saçlarınızın ağıracağı kesindir. Ayrıca diğer önemli bir husus ise proje bittikten sonra proje üzerinde değişiklik yapmak istediğimizde düzenli bir kod yapısını mı görmek istersiniz yoksa karmakarışık bir kod yapısımı. Elbette düzenli bir kod yapısı görmek isteriz. Şu da unutulmamalıdır ki kodlama evrensel olmalıdır yani sizin yaptığınız bir kodlamayı başka bir kodlamacı açtığı zaman kodların arasında kaybolmaması gerekir. Karmaşık bir kodlamada yeni kodlamacının yapabileceği tek şey bazen tüm kodları yeniden yazmak gibi bir durumla karşı karşıya kalmasıdır.

Bundan sonraki bölüm kodların nasıl düzenleneceği maddeler halinde incelenecek ve gösterilecektir.

1-CSS KODLAMA DÜZENİ

Yanda css kodlama düzenini görmekteyiz. Görüldüğü üzere düzenli bir kodlama ve gruplama yapılarak kısaltmada yapılmış. Burada sizlere göstermek istediğim kod düzenidir. Kısaltmalarla ilgili bilgi daha sonra verilecektir.

Kodlamada da görüldüğü üzere kodlar belli bir düzen dahilindedir ve karmaşaya izin vermemektedir. Taglar birbirinden düzenli bir şekilde ayrılmıştır. Css kodlarıda aynı düzendedir.

Öncelikle html kodlarına bakınız gerekli açıklama bilgisi verilmiş html tagları belli bir düzenle oluşturulmuştur. Css kodları ise yine aynı şekilde gerekli açıklama metni girilerek genel site iskeleti için gruplama yapılarak kodlamaya başlanmıştır. Aslına bakarsanız yukarıdaki resimde bu makalenin tüm ayrıntıları yer almaktadır. Ancak biz daha detaylı anlatıma gideceğiz.

Css kodlama düzenini gördükten sonra konumuza devam edelim.

2. CSS DOSYALARINI VE KODLARINI BÖLÜMLERE AYIRMAK

Büyük bir site kodlaması yaptığımızı varsayalım. Bu sitede elektronik, giysi, oem bilgisayar, diye ürünleriniz yer alsın. Bu site bu bölümler üzerinde satış yapmaktadır. Biz bu siteyi tek bir css dosyası olarak değil 3 tane css dosyasına ayırarak karmaşıklıktan kurtulmuş oluruz. Bunun yöntemi ise şudur.

Html dosyamıza yada php, öncelikle
<link href= "style.css" rel="stylesheet" type="text/css"> bu yöntemle ana css dosyamızı aktarmış oluruz.
Daha sonra import yöntemiyle bu style.css dosyamıza bölümlere ayrılmış css dosyalarımızı aktarıyoruz. Oem.css dosyasında yazdığımız tüm kodlar html kodlarımıza uygulanacaktır. Aşağıda örnek yapıyı görebilirsiniz.

Css dosyamızın içeriği ve oluşturulan css dosyaları da şu şekilde olmalıdır. 

3-CSS KODLARINDA GRUPLAMA YAPMAK
Resimde görüldüğü üzere css kodları gruplama yapılarak hem kod kısaltması yapılmış hem de her html tagında aynı kodun kullanılmasının önüne geçilmiştir.
Örnek olarak ul, li html taglarının gruplamasına bakarsak. Bütün sitede yer alan ul ve li taglarına atanan ( list-style:none; float:left; margin:0 auto; padding:0;}) bu değerler sitede yer alan tüm ul li taglarına uygulanacaktır. Böylece her ul, li tagında ayrı ayrı bu değerler yazılmayarak hem kod karmaşası önlenecek, hem kodlar azaltılacak, hem daha hiyerarşik bir düzen sağlanacaktır.

Aklınıza şöyle bir soru gelebilir. Bütün siteye uygulandı ancak ben bir (li) tagında bu özellikleri kullanmayacağım. Bunun çözümü basittir o (li ) tagına tekrar değer atayarak yukarıdaki değerleri geçersiz kılabilirsiniz. Örnek (margin:50 auto;) değeri atandığında yukarıdaki genel gruplama kodları geçersiz olacaktır.

4-GEREKSİZ (DİV) KULLANIMINDAN KAÇINMAK
Bazen farkında olmadan bazen de bilmeden gereksiz div kullanımı yaparız. Aşağıda soldaki kısımda gereksiz div kullanımı yapılmıştır. Solda gördüğünüz üzere ustmenu id sinin atandığı div gereksizdir. Sağdaki kısımda ise gereksiz olan div kaldırılmış ve kod sadeleştirilmesi sağlanmıştır.

5. CSS NİN KALITSALLIK ÖZELLİĞİNİ KULLANMAK

p {
font-family:Arial, Helvetica, sans-serif;
}
Yukarıdaki kodda görüldüğü gibi kalıtsallık özelliği kullanılmış ve tüm paragrafların fontu arial olarak atanmıştır. Başka bir örnek daha verecek olursak.

h3 {font-size:25px;} burada da görüldüğü üzere tüm h3 tagları yazı büyüklükleri 25px olarak ayarlanmıştır.

Bununla birlikte body tagına tek bir yazı fontu atayarak tüm sitede yer alan yazı stilinin aynı olmasını sağlamış oluruz. Buda bize sitede yer alan tüm yazıların tek font olmasını sağlayarak font karmaşasını ortadan kaldırır.

6. BENZERLİK GÖSTEREN CSS STİLLERİNİ AYIRMAK
Yanda 1. Kısımda görülen kodlar 2. Kısımdaki hale getirilmiştir. Burada yapılan benzerlik gösteren kodların gruplanması benzer olmayan kodların ise ayrılması yapılmış. Kodlar sade ve daha anlaşılır hale getirilmiştir.



7- CSS KISALTMALARINI KULLANMAK
7-1 Font:
Yanda görüldüğü üzere font kodunun kullanımı açık bir şekilde gösterilmiştir. Kısaltma yaparken sıralamalar önemlidir arkadaşlar.




7-2 Border:


Yanda da gördüğünüz üzere bir tagın alt kısmına uygulanacak olan border özellikleri kısaltılmıştır. Kısaltma yaparken sıralamalar önemlidir arkadaşlar.







7-3 Background:












7-3 Renkler:


Css de hex-decimal denk düzeni kullanılmaktadır.

color:#0099CC şeklindedir bu kod düzeni. Css de ise bunu kısaltarak kullanabiliriz. Bu renk düzeni 00-99-cc olarak kodlanır arkadaşlar. Biz bunu kodlarken her 2linin 1. Kodunu alarak kısaltma yaparız. 00-99-cc nin kısaltılmış renk kodu 09c dir.

Yani rengimiz color:#0099CC bu uzun halini kullanmak yerine color:#09C kısaltılmış halini kullanırız.
Kaynak: CW

7-4 Padding ve Margin:




2 yorum:

Yorumlarınız bizim için önemlidir. Konu hakkında sormak istediklerinizi yazabilirsiniz.
Istanbul ithalat - ithal Çin ürünleri