Cześć
Proszę o radę w jaki sposób pisać kod css aby było to efektywne. Obecnie piszę wszystko jak leci, tzn. border, margin, padding, background itd. wrzucam wszystko do jednego wora. Z tego co się orientuję to dobrzy programiści zaczynają np. od marginesów, rozmiarów itp, dopiero potem przechodzą do pozycjonowania i kolorowania. Dajcie radę jeśli wiecie jak robić to mądrze i efektywnie.
Dzięki
Pełna wersja: [CSS]Jak pisać css
Moim skromnym zdaniem to indywidualna kwestia.
Ja robię na dwa sposoby:
I
1. najpierw ustawiam wszystko, czyli marginesy paddingi, pozycjonowanie itp.
2. Jak mam wszystko ustawione, wtedy mniej więcej widać co i jak, dobieram kolory i tła, jeśli wcześniej wybrałem, to ewentualnie modyfikuję
3. Potem wprowadzam poprawki i tyle
II
Robię po kolei każdy element który dodam do strony (marginesy, paddingi, tła, bordery), potem tylko poprawiam marginesy i paddingi i koniec.
Jak dla mnie oba sposoby są efektywne, ale wszystko zależy od strony
Pozdrawiam
Ja robię na dwa sposoby:
I
1. najpierw ustawiam wszystko, czyli marginesy paddingi, pozycjonowanie itp.
2. Jak mam wszystko ustawione, wtedy mniej więcej widać co i jak, dobieram kolory i tła, jeśli wcześniej wybrałem, to ewentualnie modyfikuję
3. Potem wprowadzam poprawki i tyle
II
Robię po kolei każdy element który dodam do strony (marginesy, paddingi, tła, bordery), potem tylko poprawiam marginesy i paddingi i koniec.
Jak dla mnie oba sposoby są efektywne, ale wszystko zależy od strony
Pozdrawiam
ja znowu robię to w tej kolejności w jakiej style wyświetlają się w firebug'u. Naprawdę łatwiej później i jakoś przejrzyściej (jeśli korzystasz z firebug'a). Dodatkowo pierwsze definicje jakie wpisuję, to te które definiują ogólny układ strony (najczęściej są to #naglowek #menu #narzedzia i #stopka), a dopiero później elementy które znajdą się wewnątrz nich.
Dodatkowo kolory i tła oddzielam w ten sposób, że na górze pliku css mam same definicje background, a niżej reszta. To jest przydatne jeśli najdzie mnie ochota pozmieniać ścieżki do plików, albo przenoszę stronę w katalogach (i wtedy trzab poprzestawiać ścieżki dostępu).
Można iść jeszcze dalej i cały motyw graficzny wrzucić do osobnego css'a czyli mieć np. wiosna.css i uklad.css
pozdrawiam
Dodatkowo kolory i tła oddzielam w ten sposób, że na górze pliku css mam same definicje background, a niżej reszta. To jest przydatne jeśli najdzie mnie ochota pozmieniać ścieżki do plików, albo przenoszę stronę w katalogach (i wtedy trzab poprzestawiać ścieżki dostępu).
Można iść jeszcze dalej i cały motyw graficzny wrzucić do osobnego css'a czyli mieć np. wiosna.css i uklad.css
pozdrawiam
ja ostatnio zacząłem to robić tak:
w 1 css pakuję uniwersalne wpisy, wykorzystywane na wszystkich podstronach.
później w miarę jak tworzę kolejne podstrony robię dla nich osobne pliki css i umieszczam w nim regułki wykorzystane w danej podstronie.
Później tylko includuję odpowiednie css w zależności od wyświetlanej podstrony.
Przyzwyczaiłem się do tego i teraz znacznie lepiej idzie mi praca w css.
W konkretnym pliku css na samej górze umieszczam deklaracje dla np h4, ul, a - ogólne.
Później jakiś główny element - np #gora{...} a pod nim wszystkie regułki dla elementów znajdujących się w nadrzędnym elemencie itd...
Dla przejrzystości aby oddzielić te główne elementy robię 2x enter.
w 1 css pakuję uniwersalne wpisy, wykorzystywane na wszystkich podstronach.
później w miarę jak tworzę kolejne podstrony robię dla nich osobne pliki css i umieszczam w nim regułki wykorzystane w danej podstronie.
Później tylko includuję odpowiednie css w zależności od wyświetlanej podstrony.
Przyzwyczaiłem się do tego i teraz znacznie lepiej idzie mi praca w css.
W konkretnym pliku css na samej górze umieszczam deklaracje dla np h4, ul, a - ogólne.
Później jakiś główny element - np #gora{...} a pod nim wszystkie regułki dla elementów znajdujących się w nadrzędnym elemencie itd...
Dla przejrzystości aby oddzielić te główne elementy robię 2x enter.
Podpisuje się pod tym co wyżej + daję duże komentarze żeby oddzielić poszczególne sekcje np:
Grupuj style wg nadrzędnych elementów jak w liście lub wypunktowaniu np:
1. BANER
* podstyl
* podstyl
* podstyl
* podstyl
2. MENU
* podstyl
* podstyl
* podstyl podstylu
* podstyl podstylu
* podstyl
* podstyl
* podstyl podstylu
3. STOPKA
* podstyl
* podstyl
itd.
Zawsze główne elementy (#MAIN, #BANER, #MENU, #STOPKA daje jako ID="nazwa" a reszta jako class="nazwa")
Dodatkowo zanim poustawiam elementy daje im border: 1px solid #00000, wtedy ładnie je widać i wiesz co i gdzie.
Potem oczywiście usuwam ramkę.
Kod
/*===========================================================*/
body {
font-family: Tahoma, Arial;
font-size: 10pt;
color: #000000;
font-weight: normal;
text-decoration: none;
background-color: #FCFE9C;
margin: 0px;
padding: 0px;
}
img {
border: 0px none #FFFFFF;
}
p {
margin: 0em 0em 1em 0em;
}
a:link, a:active, a:visited {
font-family: Tahoma, Arial;
font-size: 10pt;
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:hover {
font-family: Tahoma, Arial;
font-size: 10pt;
color: #FF0000;
font-weight: normal;
text-decoration: none;
}
label {
font-size: 8pt;
}
/*===========================================================*/
#MAIN {
margin: 10px auto 10px auto;
width: 900px;
padding: 0px;
}
/*===========================================================*/
#BANER {
position: relative;
border: 1px solid #000000;
width: 898px;
height: 180px;
background-image: url(baner_background.jpg);
background-repeat: no-repeat;
background-color: #FCFE04;
margin: 0px;
padding: 0px;
}
/*===========================================================*/
#FLAGI {
position: absolute;
top: 5px;
right: 5px;
}
#FLAGI img {
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
text-align: center;
vertical-align: middle;
}
/*===========================================================*/
#STRONA {
position: relative;
width: 100%;
margin: 5px 0px 10px 0px;
padding: 0px;
}
/*===========================================================*/
#MENU {
border: 1px solid #000000;
width: 296px;
padding: 0px;
margin-bottom: 5px;
}
body {
font-family: Tahoma, Arial;
font-size: 10pt;
color: #000000;
font-weight: normal;
text-decoration: none;
background-color: #FCFE9C;
margin: 0px;
padding: 0px;
}
img {
border: 0px none #FFFFFF;
}
p {
margin: 0em 0em 1em 0em;
}
a:link, a:active, a:visited {
font-family: Tahoma, Arial;
font-size: 10pt;
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:hover {
font-family: Tahoma, Arial;
font-size: 10pt;
color: #FF0000;
font-weight: normal;
text-decoration: none;
}
label {
font-size: 8pt;
}
/*===========================================================*/
#MAIN {
margin: 10px auto 10px auto;
width: 900px;
padding: 0px;
}
/*===========================================================*/
#BANER {
position: relative;
border: 1px solid #000000;
width: 898px;
height: 180px;
background-image: url(baner_background.jpg);
background-repeat: no-repeat;
background-color: #FCFE04;
margin: 0px;
padding: 0px;
}
/*===========================================================*/
#FLAGI {
position: absolute;
top: 5px;
right: 5px;
}
#FLAGI img {
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
text-align: center;
vertical-align: middle;
}
/*===========================================================*/
#STRONA {
position: relative;
width: 100%;
margin: 5px 0px 10px 0px;
padding: 0px;
}
/*===========================================================*/
#MENU {
border: 1px solid #000000;
width: 296px;
padding: 0px;
margin-bottom: 5px;
}
Grupuj style wg nadrzędnych elementów jak w liście lub wypunktowaniu np:
1. BANER
* podstyl
* podstyl
* podstyl
* podstyl
2. MENU
* podstyl
* podstyl
* podstyl podstylu
* podstyl podstylu
* podstyl
* podstyl
* podstyl podstylu
3. STOPKA
* podstyl
* podstyl
itd.
Zawsze główne elementy (#MAIN, #BANER, #MENU, #STOPKA daje jako ID="nazwa" a reszta jako class="nazwa")
Dodatkowo zanim poustawiam elementy daje im border: 1px solid #00000, wtedy ładnie je widać i wiesz co i gdzie.
Potem oczywiście usuwam ramkę.
a ja daje jednokolorowe tło zamiast bordera, bo jak usunie się tego bordera, to potem sie rozmieszczenie nieznacznie zmieni...
Ja przyjąłem sobie taką hierarchię:
- najpierw opisuję wszystkie konieczne znaczniki
- następnie wszystkie elementy, które posiadają identyfikatory
- na końcu klasy
Ponadto atrybuty zapisuję w kolejności alfabetycznej aby szybko znaleźć ten, o który mi chodzi.
- najpierw opisuję wszystkie konieczne znaczniki
- następnie wszystkie elementy, które posiadają identyfikatory
- na końcu klasy
Ponadto atrybuty zapisuję w kolejności alfabetycznej aby szybko znaleźć ten, o który mi chodzi.
Cytat(WojtasSP320 @ 24.09.2008, 02:47:07 ) 
...daję duże komentarze żeby oddzielić poszczególne sekcje np:
[...]
Kod
...
/*===========================================================*/
#MAIN {
margin: 10px auto 10px auto;
width: 900px;
}
...
/*===========================================================*/
#MAIN {
margin: 10px auto 10px auto;
width: 900px;
}
...
[...]
Jeśli chwile przed publikacją usuwasz te długie /*=...=*/ to dalej nie czytaj;) Jeśli zaś nie to radze je usunąć, bo to zbędne bajty, mało ale zawsze. Ja daje krótkie komenty typu
Kod
/*lewa kolumna*/
a poza tym nie używam spacji za :. Nie zaciemnia mi to kodu a kolejne bajty mniej:)A co do alfabetycznej kolejności to nie stosuję jej, bo nigdy tych atrybutów nie ma tyle, żeby był problem z ich szybkim odnalezieniem.
Cytat
Jeśli chwile przed publikacją usuwasz te długie /*=...=*/ to dalej nie czytaj;) Jeśli zaś nie to radze je usunąć, bo to zbędne bajty, mało ale zawsze. Ja daje krótkie komenty typu
Uwierz mi jest milion rzeczy na których można sto razy bardziej zoptymalizować stronę, na które nawet nie zwracasz uwagi...
A ja używam kilku arkuszy CSS - główny zawiera style dla całego laya, potem ładuję CSS dla kategorii, potem dla podkategorii a na końcu jakiś specyficzny CSS do danej treści - można scalić arkusze w jeden przed wysłaniem do przeglądarki, żeby zminimalizować liczbę zapytań http. Kolejność jest istotna - dzięki temu minimalizujesz liczbę klas i id w kodzie html, bo nadpisujesz style w głównym arkuszu, jeśli zachodzi taka potrzeba - no i ładujesz tylko te style, które są używane. Drażnią mnie arkusze .css po 50kb, gdzie 90% to style zupełnie niepotrzebne na bieżącej stronie. Oczywiście arkusze są załączane automatycznie przez silnik (podobnie jak templaty) - gdy ich dla danego zasobu nie ma, to ładowany jest tylko główny.
Co do porzadku w arkuszu, osobiscie wole elegancko zformatowac kod tak zeby byl bardziej czytelny.
na wzor:
.nazwaKlasy {
color: #fff;
}
Jesli chodzi o kolejnosc, to w zasadzie podobnie jak w firebugu:
1 display, float, overflow, clear itp
2 margin, padding
3 width, height,
a dalej reszta dotyczaca fontow,
-font-family
-font-size
-weight, color, decoration itd
Taki sobie wyrobilem nawyk i dzieki temu szybko znajduje to czego szukam.
Jakis czas temu eksperymentowalem z arkuszami, osobny arkusz "zerujacy", inny dla typografii, ogolne klasy i reszta dla podstron.
W sumie wyszlo, ze czasem lepiej siegac po nieco ciezsze pliki arkuszy ale uniknac wiekszej ilosci zapytan.
Wyszlo mi z tego, ze najkorzystniej:
-osobny arkusz "zerujacy"
-kolejny z podstawowymi stylami, ogolnymi klasami uzywanymi na wiekszosci stron serwisu.
-arkusz odpowiedzialny za strone glowna
-arkusz odpowiedzialny za podstrony
Wszystko jest zalezne od wielkosci serwisu, dla "wizytowek" to zupelnie nie ma sensu,
inaczej sprawa wyglada przy wiekszych projektach.
na wzor:
.nazwaKlasy {
color: #fff;
}
Jesli chodzi o kolejnosc, to w zasadzie podobnie jak w firebugu:
1 display, float, overflow, clear itp
2 margin, padding
3 width, height,
a dalej reszta dotyczaca fontow,
-font-family
-font-size
-weight, color, decoration itd
Taki sobie wyrobilem nawyk i dzieki temu szybko znajduje to czego szukam.
Jakis czas temu eksperymentowalem z arkuszami, osobny arkusz "zerujacy", inny dla typografii, ogolne klasy i reszta dla podstron.
W sumie wyszlo, ze czasem lepiej siegac po nieco ciezsze pliki arkuszy ale uniknac wiekszej ilosci zapytan.
Wyszlo mi z tego, ze najkorzystniej:
-osobny arkusz "zerujacy"
-kolejny z podstawowymi stylami, ogolnymi klasami uzywanymi na wiekszosci stron serwisu.
-arkusz odpowiedzialny za strone glowna
-arkusz odpowiedzialny za podstrony
Wszystko jest zalezne od wielkosci serwisu, dla "wizytowek" to zupelnie nie ma sensu,
inaczej sprawa wyglada przy wiekszych projektach.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.