Skocz do zawartości

[css] optymalizacja (performance)

HardyTwardy

Przez HardyTwardy
w HTML i CSS

Optymalizacja styli.css, wspólnych dla wielu stron  

4 użytkowników zagłosowało

  1. 1. Która metoda będzie wydajniejsza?

    • 1. Jeden plik style.css (z nieużywanymi klassami/id)
      1
    • 2. Dwa pliki css, zagnieżdzone w head (ogólny.css + strona1.css)
      2
    • 3. Dwa pliki css, zagnieżdzone w innym pliku css (style.css -> ogólny.css + strona1.css)
      2

Rekomendowane odpowiedzi

HardyTwardy Newbie

HardyTwardy

Opublikowano
Opublikowano

Jak myślicie, który sposób będzie lepszy pod kątem optymalizacji kodu strony (tej drugiej optymalizacji, a nie SEO). Na starcie pisze, że chodzi o czysty html/css, bez includowania i łączenia styli przy pomocy php.

Mamy dla przykładu 10 lub 100 lub 1000 lub trylion stron opartych o ten sam szkielet, kluczowe style w css są identyczne, ale aby strony miały zupełnie inny wygląd 10% css-a się różni. Tak więc 90% styli może być wspólnie używanych przez wszystkie strony. Jak myślicie która metoda będzie najwydajniejsza.

1 opcja w ankiecie - Jeden CSS dla wszystkich stron, newralgiczne elementy maja inne ID lub CLASS. Na 100% nie nadaje się przy dużej ilości stron, style.css byłby za duży, sporo nieużywanych styli będzie w pliku. Do tego w templatkach wymagane są drobne modyfikacji html dla każdej strony z osobna (patrz classy poniżej).

czyli w CSS taki prosty przykład:

/*wspólne*/
#header {width: 600px;}
/*oddzielne dla stron*/
.logo-strona1 {background: #fff url(logo1.jpg);color #000;}
.logo-strona2 {background: #00f url(logo2.jpg);color #fff;}
.logo-strona3 {background: #f00 url(logo3.jpg);color #999;}

Drugi sposób w dwóch wariantach

Dwa pliki CSS, jeden zawiera wspólny styl dla wszystkich stron, drugi różniące się elementy. Szkielet strony w zasadzie nie wymaga zmiany, a modyfikacje będą łatwe do skorygowania w indywidualnych css-ach.

wspolny.css

#header {width: 600px;}

strona1.css

.logo {background: #fff url(logo1.jpg);color #000;}

strona2.css

.logo {background: #fff url(logo1.jpg);color #000;}

strona3.css

.logo {background: #fff url(logo1.jpg);color #000;}

I teraz najważniejsze

2 opcja w ankiecie - Zagnieżdżamy dwa style w head.

index.html

<head>
<link rel="stylesheet" type="text/css" href="ogolny.css"  />
<link rel="stylesheet" type="text/css" href="strona1.css"  />
</head>

3 opcja w ankiecie - Robimy trzeci plik css, zagnieżdżamy go w head, a w nim zagnieżdżamy wspolny.css no i drugi strona1.css

style.css

@import url(ogolny.css);
@import url(strona1.css);

No to jak myślicie, który sposób byłby najlepszy vs najwydajniejszy vs najwygodniejszy?

Pawel Pawlak

Odnośnik do komentarza
Udostępnij na innych stronach
WebReklama Newbie

WebReklama

Opublikowano
Opublikowano

Tak na prawdę to 3 jes tto samo co 1. W CSS nie jesteś w stanie sobie zróźnicować, żę teraz robisz import pliku A, a poprzejściu do innej strony serwisu robisz import pliku B.

Więc realnie zostaje do wyboru opcja 1 - wszystko w jedym pliku, lub opcja 2 - plik współny dla wszystkich podstron + dodatkowe css'y do poszczegołnych podstron.

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności