Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: czy ja to dobrze robię?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mrok
26.05.2008, 01:13:57
Hejo

Chciałbym spytać sie bardziej doświadczonych osób co o tym sądzą?

Nauczyłem się kiedyś robić css w taki sposób, aby definiować go pełną 'scieżką'. Już pokazuję oco chodzi.

[HTML] pobierz, plaintext 
  1. body{
  2. 	background-color: #ffffff;
  3. }
  4.  
  5. div#page div.col{
  6. 	font-size: 20px;
  7. }
  8.  
  9. div#page div.col div.tresc span.smieszna{
  10. 	display: block;
  11. 	background-color: blue;
  12. 	color: $ffffff;
  13. 	width:350px;
  14. 	height:200px;
  15. }
  16.  
  17. div#page div.col div.tresc span.wazna{
  18. 	display: block;
  19. 	background-color: red;
  20. 	color: $000000;
  21. 	width:150px;
  22. 	height:100px;
  23. }
  24.  
  25. div#page div.col div.tresc span.lipa{
  26. 	display: block;
  27. 	background-color: yelow;
  28. 	color: $000000;
  29. 	width:150px;
  30. 	height:100px;
  31. }
  32.  
  33. div#page div.col div.tresc span#lipa{
  34. 	display: block;
  35. 	background-color: yelow;
  36. 	color: $000000;
  37. 	width:150px;
  38. 	height:100px;
  39. }
[HTML] pobierz, plaintext


a do tego html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>	
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">	
  5. 		<meta http-equiv="Content-Language" content="pl">	
  6. 	        <link href="css.css" rel="stylesheet" type="text/css">
  7.       	</head>
  8. <body>
  9. <div id="page">	
  10. 	<div class="col">
  11. 		<div class="tresc">		
  12. 			<span class="smieszna">div#page div.col div.tresc span.smieszna</span>
  13. 		</div>	
  14. 	</div>
  15. 	<div class="col">
  16. 		<div class="tresc">		
  17. 			<span class="wazna"> Tu jestem div#page div.col div.tresc span.wazna</span>
  18. 		</div>			
  19. 	</div>
  20. 	<div class="col">
  21. 			<span class="lipa">A tutaj lipa</span>
  22. 	</div>
  23. 	<div class="col">
  24. 			<span id="lipa">nawet id nie pomoze</span>
  25. 	</div>
  26.  
  27. </div>
  28. </body>
  29. </html>
[HTML] pobierz, plaintext


powyższy przykład jest może mało poważny, ale ilustruje oco mi chodzi.

Zalety
- działa
- validuje się
- szybko jestem w stanie okreslić gdzie co sie znajduje (po samym css)
- wiem co po czym bedzie dziedziczyc (przy wiekszych projektach moze sie przydac)
- nic sie nie sypie jesli przypadkowo wymysle dwie takie same klasy
- jesli korzystam z zewnetrznych elementow to nie nadpisze sobie styli (chyba ze mam strasznego pech winksmiley.jpg
- dziala w IE6 IE7 FF2 O

Wady
- troche sie trzeba napisac winksmiley.jpg
- wprowadzanie zmian jest koszmarem ;(
- nie dziala dobrze w FF3 i Safari (nie wiem czy to moj blad czy wersje beta przegladarek) - nie chodzi o powyzszy przyklad
- przegladajac rozne serwisy nie natknalem sie na powyzsze rozwiazanie


Tak wiec biorac wszystki za i przeciw moze mi ktoś napisac "czy ja to dobrze robie?"
Szczegolnie daja mi do myslenia dwie ostatnie 'wady'. Skoro sie waliduje to jest zdogne ze specyfikacja, ale jesli nowe (FF3) przegladarki nie beda tego wspierac to powinienem sie juz zaczac przyzywaczajac do inego podejscia

Pozdrawiam
koderrr
26.05.2008, 06:31:04
sama walidacja kodu wcale
nie gwarantuje jego poprawnosci
a juz napewno nie oznacza ze nie da sie tego zrobic lepiej
grzesiek_g
26.05.2008, 08:22:49
Robisz podstawowy błąd, nadpisujesz sposób wyświetlania elementu span z inline na block. Przecież w środku będziesz miał takie elementy jak ul, ol, p hx..., które są blokowe a chcesz je zawrzeć w elemencie liniowym? Sama zmiana na display:block dla span nie sprawi, że ten kod będzie prawidłowy.
A walidacja jak pisze @koderrr nie daje nic poza tym, że kod jest zgodny ze specyfikacją (to tak jakbyś w wypracowaniu z polskiego nie popełnił błędów, ale to nie znaczy, że nie pomyliłeś Kordiana z Kreonem).
l0ud
26.05.2008, 13:35:06
Cytat
- przegladajac rozne serwisy nie natknalem sie na powyzsze rozwiazanie


Niemożliwe biggrin.gif

Sam stosuje to rozwiązanie i nie zauważyłem żadnych problemów pod FF3 - zapewne coś innego spaprałeś. Nie używam tylko tego w stosunku do każdego elementu, a do tych powtarzajacych się i mających wyglądać inaczej w zalezności od położenia. I nie podaję wszystkich elementów poprzedzających, tylko najczęściej jeden - najbardziej istotny [choć nie jestem pewien czy to poprawne winksmiley.jpg]
Shili
26.05.2008, 14:00:45
Poprawne.

Też kiedyś tak robiłam, że sporo ze ścieżki wpisywałam, w większych projektach, Ina przykład przy ponad 1000 regułach) również tak robię, chociaż bardziej ograniczenie (niekoniecznie wypisuję nazwy elementów - jeśli można pominąć to pomijam), w małych projektach porzuciłam tą metodę na rzecz firebuga, który pięknie mi pokazuje całą ścieżkę z dziedziczeniami w dodatku.

Również jestem zdziwiona, że na takie rozwiązanie się nie natknąłeś. Wystarczy chociaż spojrzeć na wp (różnicą jest to, że nie ma elementów, a jedynie ciągi następujących po sobie id i klas), a na interii na przykład jest niemalże dokładnie Twoim sposobem winksmiley.jpg
mrok
26.05.2008, 20:13:37
dzieki za wszystkie komentarze

dobrze wiedziec ze nie uczylem sie na darmo. winksmiley.jpg

Cytat
I nie podaję wszystkich elementów poprzedzających, tylko najczęściej jeden - najbardziej istotny [choć nie jestem pewien czy to poprawne ]

glownie tym sie sugerowalem, piszac ze nie znajduje podobnych rozwiazan, ja nic nie skracam.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.