Czy powinienem najpierw napisać HTML lub CSS?

Istnieje wiele analogii dla rozwoju HTML / CSS; co może być nieco mylące dla początkującego.

• HTML = fundamenty / dom
• CSS = ściany / plan / tapeta

Czy jest tu jakaś najlepsza praktyka? Który z nich powinniśmy napisać jako pierwszy?

Najpierw zbuduj dom, a następnie go pomaluj.

Dokument HTML może stać samodzielnie, nawet jeśli może wydawać się nudny. Arkusz stylów CSS nie może; nie można go wyświetlić (oprócz kodu), ale instrukcje wyświetlania.

To inna kwestia, że ​​podczas malowania możesz chcieć wprowadzić zmiany w domu. W prawdziwych domach, które zwykle nie są możliwe, ale przy opracowywaniu HTML + CSS często zauważa się, że potrzebujesz dodatkowego znacznika w dokumencie HTML, aby ułatwić stylizację. (Jest to mniej powszechne niż kiedyś, dzięki potężnym selektorom CSS3).

Zawsze najpierw używam długopisu i papieru, papieru pełnowymiarowego, rysunków w skali.

To znaczy, jeśli nie masz wyprasowanego projektu. Jeśli jesteś pewny swojego projektu, mam zrównoważone podejście; HTML to struktura, CSS klej. Buduj dalej w (krotki, HTML, CSS) koncepcji.

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

i tak dalej.

W każdym razie tak to robię.

Wiele zależy od rodzaju tworzonej witryny / aplikacji internetowej i rodzaju kontekstu, w którym będzie używana.

W większości przypadków najlepszym sposobem jest zbudowanie poprawnego semantycznie kodu HTML, a następnie dodanie CSS dla przeglądarek zgodnych ze standardami, a następnie zastosowanie nieinwazyjnych hacków i reguł (np. Komentarze warunkowe IE, -vendor-somethingreguły CSS, warstwy zgodności z javascript itp. ) w celu obsługi niestandardowych przeglądarek i włączenia funkcji specyficznych dla dostawcy.

Czasami jednak masz kilka niezależnych aplikacji internetowych, które współużytkują arkusze stylów (np. Jako część stylu domowego), a może nawet jesteś w luksusowej pozycji do kontrolowania wyjścia HTML każdego z nich. W takim przypadku lepiej jest najpierw napisać CSS, a następnie ulepszyć HTML, aby z nim pracować. Jeśli to zrobisz, musisz najpierw przeanalizować, jakie elementy strony będą potrzebne, zdefiniować dla nich klasy, a następnie napisać statyczny dokument testowy, który ich używa, napisać arkusze stylów, a dopiero potem zacząć pisać aplikacje, które ich używają.

Szczerze mówiąc, podejrzewam, że taka luksusowa pozycja jest niezwykle rzadka i niewiele firm w rzeczywistości uznaje wartość jednolitego stylu domu na poziomie CSS; częściej praktyczność dyktuje, że projektant tworzy styl domu, a następnie tworzone są niezależne zestawy arkuszy stylów dla każdej aplikacji, która musi za nim podążać. Powodem tego jest głównie to, że większość firm używa gotowego oprogramowania z ograniczonymi możliwościami modyfikacji co najmniej części stosu, a często zmiana wyjścia HTML w celu dopasowania do danego arkusza stylów jest znacznie trudniejsza (lub nawet niemożliwa dla niektóre zastrzeżone pakiety) niż przepisywanie CSS. Ponadto wysiłek związany z utrzymaniem kilkunastu zestawów arkuszy stylów jest często niedoceniany, a pewne drobne różnice i dziwactwa są uważane za dopuszczalne.

Mimo, że jest to bardzo stare pytanie i odpowiedź, czuję potrzebę i obowiązek komentowania go.

Tak, HTML powinien być napisany przed CSS, jednak ...

Państwo nie pisać cały kod HTML na stronie , a następnie wrócić do pisania CSS. To bardzo utrudniłoby jednoznaczne zapamiętanie sekcji podczas ich rozbudowy, nawet przy odpowiednich odstępach i komentarzach.

Witrynę budujesz warstwowo, jakbyś robił wielowarstwowe ciasto.

1st Layer - Najpierw budujesz podstawę, div pojemnika, o jej minimalnej wysokości i szerokości css.

2. warstwa - Następnie budujesz następną warstwę, duże sekcje strony (divy i style dla struktury), takie jak wiersze lub sekcje wyglądające jak kolumny.

3. warstwa i kolejne - Następnie dodajesz w drugiej warstwie sekcji.

W ten sposób piszesz trochę HTML, dodajesz, a następnie stylizujesz za pomocą CSS dla struktury, płucz i powtarzaj. Z mojego doświadczenia wynika, że ​​jest to o wiele bardziej skuteczny sposób budowania stron internetowych i moim zdaniem znacznie szybszy niż alternatywa dla całego HTML.

Na koniec spróbuj użyć „ * {konspektu: 1 piksel z kropkami na czerwono} ”, aby uzyskać zarys wszystkich swoich elementów, dodając je do strony ze stylem, możesz zobaczyć ich zarys i nie musisz się martwić zgadywaniem, jak to wygląda, dopóki dodajesz kolory tła. Unikam ramki dla tego konkretnego przypadku użycia, ponieważ ramki dodają piksele do elementów, kontur jest nakładką.

Spróbuj, dzięki!

Uważam, że praca ze strukturą stron internetowych (HTML) ma najpierw większy sens, ponieważ będziesz miał pojęcie o elementach i nazwach, jeśli chodzi o stylizację i formatowanie witryny.

To zależy od twojej rzeczywistej roli i głównego celu rozwoju. Jeśli celem jest określenie, co należy pokazać na stronie, należy zacząć od HTML. Jeśli celem jest stworzenie przyjemnego i jednolitego projektu, można zacząć od CSS. W obu przypadkach lepiej zacząć od papieru i ołówka, a jeśli obecnie celem jest opracowanie aplikacji internetowej, nie należy zaczynać od HTML lub CSS. Najlepszą praktyką jest najpierw pomyśleć o tym, co chcesz rozwinąć, a następnie podzielić zadanie na cele i cele cząstkowe zamiast po prostu hakować wszystko razem.

Zaprojektuj dom (układ siatki) wraz z pomysłem, jak będzie urządzony; Zbuduj dom (HTML) za pomocą siatki; następnie udekoruj go (arkusz stylów CSS).

Po zbudowaniu pierwszego domu (strony HTML) możesz po prostu zastosować tę samą dekorację (arkusz stylów CSS). W miarę upływu czasu możesz modyfikować dekorację.

W końcu możesz chcieć odnowić (powtórzyć arkusz stylów CSS).

Wybrałeś naprawdę kiepską oprawę do nauki i budowania.

Istnieją tutaj dwie kwestie ortogonalne.

1. Jak zbudować witrynę spełniającą moje potrzeby?
2. Jak nauczyć się budować stronę internetową?

Są to dwa bardzo różne zadania, które mogą (i często wymagają) wymagać różnych podejść potencjalnie sprzecznych.

Jeśli znasz umiejętności, technologie i wymagania projektu, jeden zaczyna się od dyskusji na temat potrzeb witryny i przechodzi przez ćwiczenia projektowe w celu ustalenia, co należy wdrożyć. To często oznacza znaczniki i elementy projektu, które często nie mają nic wspólnego z HTML ani CSS (chociaż niektóre osoby robią makiety z HTML i CSS).

Jeśli próbujesz nauczyć się, jak zbudować witrynę, a jednocześnie ją budować, istnieje proces eksploracji i uczenia się, w który musisz się zaangażować, zanim dowiesz się, co można zbudować.

W tym miejscu popularna stała się modułowa i iteracyjna strategia projektowania i budowania. Gdy niekoniecznie wiesz, dokąd zmierzasz z produktem końcowym (ponieważ nie wiesz, co jest możliwe), budujesz małe porcje funkcjonalności, eksperymentujesz z tym, czy spełnia ona twoje wymagania, a następnie włączasz ten mniejszy eksperyment do większa całość.

Co to właściwie oznacza konkretnie? Budowa witryny może być jak budowanie domu, w którym sporządzasz plany architektoniczne (makiety projektowe), a następnie zaczynasz robić inżynierię, aby obliczyć, czy Twój dom wstanie i spełni twoje potrzeby estetyczne. Ale zbudowanie witryny może (i często powinno) wyglądać bardziej jak zbudowanie serii małych eksperymentów i stopniowe podejście do uzyskania produktu, który spełnia Twoją pierwotną koncepcję.

Z praktycznego punktu widzenia prawie wszyscy jednocześnie używają zarówno HTML, jak i CSS.

Jest to powszechny problem w każdym projekcie programistycznym imho i jako taki możesz skorzystać z dowolnej z koncepcji, takich jak Rapid Prototyping, DSDM. Można go łączyć z dowolnym stylem, np. Zwinnym (programowanie ekstremalne lub projektowanie oparte na cechach (moje ulubione)). Trzymając się wspólnych zasad, o których decydujesz na początku, gdy się z nimi mierzysz, trzymaj się ich (KISS, YAGNI).

Więc dla mnie jest to: - najpierw zbuduj podstawowy funkcjonalny „prototyp”, obejmujący jeden funkcjonalny blok popytu Ogranicz się do nurkowania w „to może być miłe” / „być może będę musiał użyć tego później” rzeczy, chyba że są NIEWIDOCNE. Powiedz sobie, że nie będziesz go potrzebować! (YAGNI). - Zapisz decyzje, które podejmujesz jako „konwencję kodowania” i trzymaj się ich, np. Tagi php: używam krótkich, ponieważ w moim scenariuszu argument… ma zastosowanie i… nie. - dodaj podstawową stylizację, ale ogranicz się ponownie.

Następnie rozwijaj kod, aż uzyskasz prototyp wyższego poziomu, który obejmuje więcej bloków funkcjonalnych. Zgodnie z tym, twój model css rośnie. Jak tylko podejmiesz decyzje, które wpływają na wszystko, co już zrobiłeś (zrobisz), przeczytaj je, podejmij decyzję i zapisz w konwencjach kodowania, dlaczego poszedłeś w lewo lub w prawo.

„Okrąż” swoją drogę do bardziej dojrzałego i końcowego produktu.

Nie bój się wielkich decyzji, z którymi możesz się zmierzyć, ponieważ martwienie się o nie może kosztować więcej czasu niż ustalenie go na drodze. Nie martw się też, że społeczność internetowa spogląda z ukosa na zmarszczone brwi, w końcu, gdy masz produkt, który działa, nauczyłeś się wiele, a wyobraźni oceniający zły kod źródłowy będą bardziej zadowoleni z następna rzecz, którą zbudujesz (zwróć uwagę na iterację tutaj).

Tylko moje 50 centów

Porównując stronę internetową do domu:

HTML = fundamenty / dom CSS = ściany / plan / tapeta

Jak zamierzasz unosić ściany w powietrzu, dopóki nie zbudujesz fundamentów, na których siedzą? Jak napisać CSS, aby stylizować stronę, dopóki nie zostaną napisane tagi HTML, do których stosuje się style.

Każdy kawałek CSS stylizuje określone tagi HTML. Te tagi muszą istnieć, aby móc je stylizować. Jeśli nie masz stylu HTML do sformatowania, plik CSS powinien być pusty, ponieważ wszystkie style w nim są zbędne, ponieważ w rzeczywistości niczego nie stylizują.