5 kroków do tworzenia lepszych CSS Część II
Jest to druga część 5 kroków do tworzenia lepszych CSS. Istnieje mnóstwo tutoriali CSS są dostępne na stronie internetowej, ale kilka tutoriali są użyteczne. W tym poradniku znajdziesz 5 kroków do tworzenia lepszych css code do następnej strony internetowej projektu. Mam nadzieję, że korzystają z tego samouczka.
1. Przechowywać deklaracje CSS w jednej linii
Należy zawsze przechowywać deklaracje CSS w jednej linii, to pomaga w utrzymaniu swój plik CSS czyste i mniejszych. Pozwala także na usuwanie niepotrzebnych spacji i znaków.
Dobry kod
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Zły kod
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Łączenie elementów
Jeden z najlepszych sposób na uratowanie linii kodu poprzez grupowanie selektorów. Istnieje kilka przykładów poniżej tego, co mam na myśli.
Dobry kod
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Zły kod
: Arial, Helvetica, sans-serif ; color : # 333 ; } h2 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h3 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h1 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h2 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h3 (font-family: Arial, Helvetica, sans-serif; color: # 333;)
3. Użyj "Margines" dla Centrum Layout
Wielu początkujących z CSS nie może dowiedzieć się, dlaczego nie możesz po prostu użyć float: center do osiągnięcia tego efektu w środku elementów blokowych. Gdyby to było takie proste! Niestety, musisz użyć.
Kod
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * góra, dół - w lewo iw prawo * / width: xxxpx; )
4. Komentarz kod CSS
To świetny pomysł na komentarz kod w sekcji. Aby dodać komentarz, wystarczy dodać / * za komentarz, a * /, aby je zamknąć, tak jak poniżej:
Kod
/******** KOD START HERE ********/
5. Stosowanie CSS Kompresja Narzędzia
Jeśli nie chcesz marnować czas na zmianę starego arkuszy stylów możesz po prostu użyć online css kompresji narzędzia, to Twoja praca jest w sekundach.
Sprawdź online css kompresji narzędzi ...
CSS Tidy
Czystość Css
Optymalizator css
Flumpcakes Css Optimizer
cssdrive Css Comperasor
Validator W3C CSS
Wnioski
Są to tylko niektóre z porad, które pomogą mi pisać lepsze kodu. Mam nadzieję, że kurs pozwoli Ci również pisać lepiej i czyste kodu. Zastosuj te porady do projektów bieżących i następnych, a na pewno docenią wysiłek.
Jeśli uważasz, że wychowawczy może być bardziej lepszy, podziel się z nami. Komentarz do nas
jeśli chcieliby Państwo uzyskać więcej tutoriali od nas, proszę zapisać się do naszego kanału przez RSS lub poprzez e-mail.
Promuj nas
Pokrewne artykuły:
Jeśli korzystają przeczytaniu tego artykułu, proszę sprawdzić inne powiązanych artykułów poniżej:
Revell mówi on: 27 listopada 2009 at 9:05 am Said:
Cześć,
Przede wszystkim, miły artykuł! Nie ma zbyt wielu artykułów adres styl pisania CSS. Mam pewne przemyślenia na temat pierwszego punktu though. Moim zdaniem lepiej jest używać długich styl pisania rozwijając i skryptu "minify" kod CSS podczas użycia go w rzeczywistym środowisku.
Dave mówi on: 27 listopada 2009 at 10:06 Said:
I całkowicie zgadzam się z pkt 1 lit. Kiedy masz 3 oświadczenia, 1 linia kodu jest super, ale gdy jest ich 6 lub 7, to robi się naprawdę trudna do odczytania.
Wszystko to, aby zapisać może 1KB? I don't get it.
Inne niż jeden, kilka godnych nudzić.
Ostatnio blog Dave's .. 2 więcej must-have CMS umożliwiający wtyczki do WordPress
Nicolo 'Fasce mówi on: 27 listopada 2009 at 10:34 Said:
Zgadzam się z Davem, pkt 1, są złe, tylko dlatego, że jeśli pracujesz w zespole jest bardzo trudne do odczytania jeden kod linii.
Należy także napisać kod w porządku alfabetycznym, w tym samym celu.
EJ Semeijn mówi on: 27 listopada 2009 at 10:57 Said:
Dlaczego przystanek delegowania tych wskazówek? Internet jest już pełne podstawy tych wskazówek. I również zgadzam się z # 1. It doesn't make kod łatwiejszy do zrozumienia, że tylko utrudnia.
Moje porady byłoby umieścić w strukturze strony w CSS, zrobić sekcje dla RESET, pozycje, formy, elementy HTML, czcionki itp. W ten sposób swój CSS będą łatwiejsze do zrozumienia.
safetycopy mówi on: 27 listopada 2009 at 9:38 pm Said:
Zgadzam się z uwagami kilka innych osób - punkt 1 na przykład zły kod nie jest zły kod - to po prostu alternatywny styl. Ta wiadomość nie tylko być przydatne, aby zakończyć początkujących i nie chcę zaczynać uczenie ich nieprawidłowe założenia już!
safetycopy ostatniego blogu .. Zdjęcie
Josh powiedział on: 29 listopada 2009 at 4:38 am Said:
I do tych wszystkich z wyjątkiem ostatniego. Nie uważam za użyteczne skompresować moje CSS, ale w odróżnieniu od wszystkich poprzednich czytelników i zdecydowanie zgadza się z punktu # 1. Właśnie zaczęłam pisać mój CSS w jednej linii i to było ogromne. Przewijanie została znacznie zredukowana. Myślę, że to osobiste preferencje. Coś, co pomaga to, że redaktor używać okładów kod w dół do następnej linii, więc nie ma przewijania w poziomie.
Ostatnia blogu Josha .. Addicted to Flickr
FAQPAL mówi on: 29 listopada 2009 at 4:06 pm Said:
Dobrych rad dla początkujących, nie minify mój CSS albo, być może znacznie większy projekt mógłby korzystać z minifying, ale przeciętna witryna naprawdę nie potrzeba.
Jeśli chodzi o # 1 idzie, myślę, że sformułowanie to jest to, co jest rzucanie ludzi off, zamiast mówić, "zły kod", być może należy powiedzieć jak safetycopy zasugerował, "Alternatywa Code".
Ostatnia blogu FAQPAL's .. Bubble Effect z CSS
favSHARE mówi on: 30 listopada 2009 at 12:49 am Said:
Ten artykuł został udostępniony na favSHARE.net. Idź i głosowanie to!
Ostatnia blogu favSHARE's .. 25 Samouczki Web Layout
Jean-Patrick Smith mówi on: 11 grudnia 2009 at 11:15 Said:
Zazwyczaj tworzę plik PHP, który zawiera wszystkie moje css, minifies go i dodaje kompresji + wygasa nagłówki.
W ten sposób nie zgodzić się z punktu # 1 ...
Co ważniejsze niż o wszystkich CSS na jednej linii jest zmniejszenie liczby połączeń HTTP z skrzaty CSS i połączenie wszystkich CSS / JS do jednego pliku.