Czy powinienem najpierw napisać HTML lub CSS?


28

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?


8
Nie jestem pewien, jak powinieneś najpierw napisać CSS, jeśli chcesz to zrobić.
TRiG,

To było pytanie? Na przykład: normalne pytanie, które można zadać i czekać na odpowiedzi?
Alex Yu

Odpowiedzi:


82

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


W większości się zgadzam. Jedynym problemem jest użycie CSS do układu grid..aka.
Daniel

@Daniel, dlaczego miałby to być problem? Istnieje kilka sposobów tworzenia układu w CSS. Niektóre starsze sposoby nie pozwalają na dowolne rozmieszczanie elementów, niezależnie od ich kolejności w dokumencie HTML. Ale np. Pozwala na to pozycjonowanie bezwzględne, podobnie jak system gridowy CSS3 (który jest w trakcie opracowywania). Jeśli używane są starsze narzędzia do układania, to rzeczywiście może zajść potrzeba reorganizacji dokumentu HTML, jeśli pomysły na układ zostaną zmienione.
Jukka K. Korpela,

1
@ Im więcej układu zrobisz za pomocą css, tym łatwiejszy będzie projekt. Większość witryn ulega zmianom projektowym przez cały okres ich użytkowania. Jest to o wiele łatwiejsze do osiągnięcia, jeśli wszystko, co musisz zrobić, to zmienić css.
Kenneth

7
Nie jest realistyczne, że CSS i HTML są całkowicie oddzielone. W prawdziwym życiu w większości projektów piszesz przynajmniej trochę HTML, który służy tylko do stylizacji. Proponuję model iteracyjny, w którym zaczynasz od kodu HTML, dodajesz CSS, a następnie dodajesz trochę HTML. Zrób to w sposób, w którym najpierw piszesz strukturę witryny (na przykład siatkę), a następnie opracowujesz szczegółowe informacje.
Thomas

4
Chciałbym dodać jedną rzecz do tej wspaniałej odpowiedzi: dokument HTML nie tylko może stać sam z siebie, ale powinien być w miarę jasny i zrozumiały, kiedy to robi. Pamiętaj, że niestylowany HTML jest w zasadzie tym, co zobaczą wyszukiwarki. Spójrz na to, czy jest dobrze zorganizowany z nagłówkami i listami oraz innymi tego rodzaju znaczeniami semantycznymi?
Carson63000,

13

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


2

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.


2

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!


Będzie ci to również dobrze służyć, jeśli w końcu przejdziesz do korzystania z frameworka MVC, takiego jak AngularJS, w którym opisywana przez ciebie koncepcja warstw dość dobrze odwzorowałaby koncepcyjnie sposób wykorzystania zagnieżdżonych tras / widoków do zbudowania strony w sposób hierarchiczny.
Sean Burton,

1

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.


0

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.


0

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


0

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.


0

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


0

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.