Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> czy ja to dobrze robię?, jak pisac css?
mrok
post 26.05.2008, 01:13:57
Post #1





Grupa: Zarejestrowani
Postów: 258
Pomógł: 17
Dołączył: 22.05.2007

Ostrzeżenie: (0%)
-----

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


--------------------
Mieszkania na Yukatanie | Casa Yucatan Real Estate
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
koderrr
post 26.05.2008, 06:31:04
Post #2





Grupa: Zarejestrowani
Postów: 255
Pomógł: 16
Dołączył: 4.07.2007

Ostrzeżenie: (0%)
-----

sama walidacja kodu wcale
nie gwarantuje jego poprawnosci
a juz napewno nie oznacza ze nie da sie tego zrobic lepiej
Go to the top of the page
+Quote Post
grzesiek_g
post 26.05.2008, 08:22:49
Post #3





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

Ostrzeżenie: (0%)
-----

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).

Ten post edytował grzesiek_g 26.05.2008, 08:22:59


--------------------
Warsztat: Ubuntu 12.10, PHPStorm
http://vertoo.pl
Go to the top of the page
+Quote Post
l0ud
post 26.05.2008, 13:35:06
Post #4





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

Ostrzeżenie: (0%)
-----

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]


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
Shili
post 26.05.2008, 14:00:45
Post #5





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował Shili 26.05.2008, 14:02:31
Go to the top of the page
+Quote Post
mrok
post 26.05.2008, 20:13:37
Post #6





Grupa: Zarejestrowani
Postów: 258
Pomógł: 17
Dołączył: 22.05.2007

Ostrzeżenie: (0%)
-----

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.


--------------------
Mieszkania na Yukatanie | Casa Yucatan Real Estate
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 05:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn