• 31-08-2012, 00:15:05
    #1
    Arkadaşlar css yi daha verimli hale getirmek için optimize etmek istiyorum. Şimdi şöyle bir kod var.

    #content .check_list ul li ul li {margin:8px 0 8px 0;}
    Bu kodda toplamda GTmetrix 5 anahtar gösteriyor
    1. .check_list
    2. ul
    3. li
    4. ul
    5. li

    Ben bu kodu tek tek ayırmam için ne yapmalıyım?

    Örneğin
    .one_third, two_third {display:none;}
    
    Kodunu
    
    .one_third {display:none;}
    .two_third {display:none;}
    
    Olarak ayırdım.
  • 31-08-2012, 00:53:49
    #2
    Üyeliği durduruldu
    Css geliceğimi karartıcak bir soru yanlış cevap vermemeye özen gösteriyorum

    #content .check_list ul li ul li {margin:8px 0 8px 0;}
    yukarıda verdiğin kod content içindeki check_list içindeki ul içindeki li nin içindeki ul içindeki li margin kodunu işlet demiş bu manyak bir css çöküntüsüne yol açabilir bunun yerine direk o son daki li koduna bir class atıyarak margin kodunu vermelisin.

    Diğer koduna gelince. Diğer kodunu parçalamak sana css optimizasyonu sağlamaz tam aksine css kalabalığı ve tarayıcı yorgunluğu oluşturur. Çünki aynı kodu farklı kodlara tek çatı altında yazman sana performans sağlıyıcaktır.
    Bir örnek ile açık açık gösterim.
    Aşağıdaki kodda 3 tane classımız var hepsininde kodları aynı tarayıcı gelir css taramaya başlar 3 tane classs tarar 3 tane özellik tarar.
    .ornek{margin:5px;}
    .ornek2{margin:5px;}
    .ornek3{margin:5px;}
    Ama sen yukarıdaki gibi değilde aşağıdaki gibi yaparsan. Tarayıcı gelir sitene css taramaya başlar 1 tane bloktan 3tane class tarar ve 1 tane özellik tarar gördüğünüz gibi 3 özellik tarıyıcağına sadece 1 özellik tarar düşünün çok hit alan bir siteyi veya büyük projelerdeki kolaylıkları

    .ornek,.ornek2,.ornek3{margin:5px;}
    Not: Css optimizasyonu ve gereksiz kod temizleme konuları hakkında fatih hayrioğlunun hazırladığı aşağıdaki konuları incelerseniz daha detaylı bilgi edinebilirsiniz.
    http://www.fatihhayrioglu.com/css-ko...izlemeazaltma/
    http://www.fatihhayrioglu.com/css-se...optimizasyonu/

    Not: yukarıda yazdıklarım alıntı değildir oturup yazdım baştan sona kadar okuyun lütfen
  • 31-08-2012, 01:23:46
    #3
    hackersatranc adlı üyeden alıntı: mesajı görüntüle
    Css geliceğimi karartıcak bir soru yanlış cevap vermemeye özen gösteriyorum

    #content .check_list ul li ul li {margin:8px 0 8px 0;}
    yukarıda verdiğin kod content içindeki check_list içindeki ul içindeki li nin içindeki ul içindeki li margin kodunu işlet demiş bu manyak bir css çöküntüsüne yol açabilir bunun yerine direk o son daki li koduna bir class atıyarak margin kodunu vermelisin.

    Diğer koduna gelince. Diğer kodunu parçalamak sana css optimizasyonu sağlamaz tam aksine css kalabalığı ve tarayıcı yorgunluğu oluşturur. Çünki aynı kodu farklı kodlara tek çatı altında yazman sana performans sağlıyıcaktır.
    Bir örnek ile açık açık gösterim.
    Aşağıdaki kodda 3 tane classımız var hepsininde kodları aynı tarayıcı gelir css taramaya başlar 3 tane classs tarar 3 tane özellik tarar.
    .ornek{margin:5px;}
    .ornek2{margin:5px;}
    .ornek3{margin:5px;}
    Ama sen yukarıdaki gibi değilde aşağıdaki gibi yaparsan. Tarayıcı gelir sitene css taramaya başlar 1 tane bloktan 3tane class tarar ve 1 tane özellik tarar gördüğünüz gibi 3 özellik tarıyıcağına sadece 1 özellik tarar düşünün çok hit alan bir siteyi veya büyük projelerdeki kolaylıkları

    .ornek,.ornek2,.ornek3{margin:5px;}
    Not: Css optimizasyonu ve gereksiz kod temizleme konuları hakkında fatih hayrioğlunun hazırladığı aşağıdaki konuları incelerseniz daha detaylı bilgi edinebilirsiniz.
    http://www.fatihhayrioglu.com/css-ko...izlemeazaltma/
    http://www.fatihhayrioglu.com/css-se...optimizasyonu/

    Not: yukarıda yazdıklarım alıntı değildir oturup yazdım baştan sona kadar okuyun lütfen
    Hocam tebrik ederim iyi açıklama yapmışsınız. Ben okudum kafam iyce karıştı şimdi detaylı olarak inceleyeceğim.

    Eee uzmanı olunca insan hata yapmamak için ayrıntılara iniyor. Teşekkür ederim. Ben şimdi denemeler yapayım gelişmelerden habardar ederim. Normalde benimde css bilgim iyidir ama optimize işinde böyle takıldım
  • 31-08-2012, 04:09:45
    #4
    Hocam denemeleri yaptım, siz haklısınız tek tek class lara bölünce optimizenin bir anlamı kalmıyor, kod kalabalığından başka bişey değil GTmetrix niye öyle istiyor onuda anlamış değilim :S

    Buradaki açıklamaları inceledim güzel anlatmış ama benim kafam karma karışık oldu

    Aynen açıklamada olduğu gibi Fatih Hocam 'css kodu yazarken seçicilerin soldan sağa doğru okunduğunu düşünerek kodumu yazardım ama gerçek böyle değilmiş.' yazısını okuyunca vaaay dedim, hemen kolları sıvadım ancak kafam karıştı.

    Performanslı CSS Seçicileri Seçiminde Anahtar Seçicinin Önemi
    açıklamasında 'ul#solMenu li a' yerine sağdan sola doğru okuduğu için 'ul li a#smUrunler' şeklinde olması daha efektif sonuç verir demişte. Şimdi benim koduma gelirsek.

    #access ul yerine ul #access yapmam bana mantıklı gelmedi hatta denedim ama #access ul işlevini görmedi, ul u ayrı aldı, #access i ayrı aldı.

    Uykusuzum ondanmıdır mantık yürütemedim
  • 31-08-2012, 05:39:08
    #5
    Üyeliği durduruldu
    kiNDar adlı üyeden alıntı: mesajı görüntüle
    #access ul yerine ul #access yapmam bana mantıklı gelmedi hatta denedim ama #access ul işlevini görmedi, ul u ayrı aldı, #access i ayrı aldı
    merhaba. şimdi siz #access ul yazdığınızda
    <tag id="access">
    <ul>...
    kodundaki üst tagı access idsini içeren ul tagı için stil ataması yaparsınız. fakat ul #access yazarsanız
    <ul>
    <tag id="access">...
    ul tagının access idsini içeren alt tagına stil ataması yaparsınız. mobilden bu kadar yazabildim.
  • 31-08-2012, 14:57:50
    #6
    WapZap adlı üyeden alıntı: mesajı görüntüle
    merhaba. şimdi siz #access ul yazdığınızda
    <tag id="access">
    <ul>...
    kodundaki üst tagı access idsini içeren ul tagı için stil ataması yaparsınız. fakat ul #access yazarsanız
    <ul>
    <tag id="access">...
    ul tagının access idsini içeren alt tagına stil ataması yaparsınız. mobilden bu kadar yazabildim.
    Merhaba. Bilgi için teşekkür ederim. Çok doğru söylüyorsunuz ancak benim kafamın karışması buradaki "Performanslı CSS Seçicileri Seçiminde Anahtar Seçicinin Önemi" açıklamasını okudum, ondan saçmaladım.
  • 31-08-2012, 15:37:14
    #7
    Üyeliği durduruldu
    kiNDar adlı üyeden alıntı: mesajı görüntüle
    Merhaba. Bilgi için teşekkür ederim. Çok doğru söylüyorsunuz ancak benim kafamın karışması buradaki "Performanslı CSS Seçicileri Seçiminde Anahtar Seçicinin Önemi" açıklamasını okudum, ondan saçmaladım.
    W3C hata vermezse bodoslama devam edin hocam. unutmayın html gibi tagların açılma sırasına göredir her şey
  • 31-08-2012, 16:14:33
    #8
    Verdiğiniz örneğe göre bu biçimde oluyor sanırım:
    #content ul li {margin: 8px 0 8px 0}
    .check_list ul li {margin: 8px 0 8px 0}
  • 31-08-2012, 17:37:37
    #9
    WapZap adlı üyeden alıntı: mesajı görüntüle
    W3C hata vermezse bodoslama devam edin hocam. unutmayın html gibi tagların açılma sırasına göredir her şey
    W3C de sıkıntı yok. Evet hocam sıralamayı biliyorum. Teşekkür ederim.
    T1mSaH adlı üyeden alıntı: mesajı görüntüle
    Verdiğiniz örneğe göre bu biçimde oluyor sanırım:
    #content ul li {margin: 8px 0 8px 0}
    .check_list ul li {margin: 8px 0 8px 0}
    denemeler yapacağım. bir arkadaşımızda şu şekili gösterdi, bunada bakacağım.

    #content {}
    #content ul {}
    #content ul li {}
    .check_list {}
    .check_list ul {}
    .check_list ul li {}