Потрібно спочатку написати HTML або CSS?


28

Існує багато аналогій для розробки HTML / CSS; що може трохи заплутати початківця.

  • HTML = основи / будинок
  • CSS = стіни / план / шпалери

Чи є тут найкраща практика? Кого ми маємо написати першим?


8
Я не впевнений, як вам слід спершу писати CSS, якщо ви цього хотіли.
TRiG

Це було питання? Як: нормальне запитання, на яке можна задати і чекати відповіді?
Олексій Ю.

Відповіді:


82

Спершу слід побудувати будинок, а потім пофарбувати його.

HTML-документ може стояти самостійно, хоча він може виглядати тьмяним. Аркуш стилів CSS не може; це не що-небудь показове (крім коду), але інструкції щодо відображення.

Це зовсім інше питання, що під час фарбування ви можете зробити зміни в будинку. У справжніх будинках це, як правило, недоцільно, але в розробці HTML + CSS звичайно помітити, що вам потрібна додаткова розмітка у вашому HTML-документі, щоб полегшити стилізацію. (Це рідше, ніж раніше, завдяки потужним селекторам CSS3.)


Я переважно згоден. Єдина проблема полягає в тому, коли ви використовуєте CSS для верстки .. сітки системи.
Даниїл

@Daniel, чому це буде проблемою? Існує кілька способів зробити макет у CSS. Деякі з старих способів не дозволяють вам переставляти елементи вільно, незалежно від їх порядку в HTML-документі. Але, наприклад, абсолютне позиціонування дозволяє вам це робити, як і система сітки CSS3 (яка знаходиться в стадії розробки). Якщо використовуються старі інструменти компонування, то, можливо, HTML-документ може знадобитися реорганізувати, якщо ідеї щодо верстки змінюються.
Юкка К. Корпела

1
@ Чим більше макет, який ви робите з css, тим простіше дизайн буде підтримувати вниз. Більшість сайтів зазнають змін дизайну протягом свого життя. Це набагато простіше здійснити, якщо все, що вам потрібно зробити, це змінити css.
Кеннет

7
Нереально, що CSS та HTML повністю розділені. У реальному житті ви б в більшості проектів писали хоча б якийсь HTML, який призначений лише для стилістичних цілей. Я пропоную ітераційну модель, коли ви починаєте з деякого HTML, додаєте CSS, а потім ще трохи HTML. Зробіть це таким чином, щоб ви спочатку написали структуру (як сітку) для веб-сайту, а потім пропрацювали детальніші деталі.
Томас

4
Одна річ , яку я хотів би додати в цей прекрасний відповідь: не тільки може HTML - документ , стояти на своїх власних, але воно повинно бути досить ясним і зрозумілим , коли він робить це. Пам’ятайте, що нестилізований HTML - це в основному те, що будуть бачити пошукові системи. Погляньте на це, чи добре впорядковані заголовки та списки та інша така семантична розмітка?
Carson63000

13

Я завжди спочатку використовую ручку та папір, повний папір, масштабні малюнки.

Тобто, якщо у вас не випрасували дизайн. Якщо ви впевнені у своєму дизайні, у мене є зважений підхід; html - це структура, css клей. Продовжуйте створювати (HTML, CSS) поняття "кортежі".

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

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

і так далі.

Так я і роблю, все одно.


2

Багато що залежить від типу веб-сайту / веб-додатка, який ви робите, і типу контексту, в якому він буде використовуватися.

У більшості випадків найкращий спосіб - це створити семантично обгрунтований HTML, а потім додати CSS для браузерів, які відповідають стандартам, а потім застосувати ненав'язливі хаки та правила (наприклад, умовні коментарі IE, -vendor-somethingправила CSS, шари відповідності JavaScript тощо). ) для підтримки нестандартних веб-переглядачів та ввімкнення функцій, характерних для постачальника.

Однак іноді у вас є маса незалежних веб-додатків, які діляться таблицями стилів (наприклад, як частина домашнього стилю), і ви можете навіть у розкішному становищі контролювати вихід HTML кожного з них. У такому випадку може бути кращим способом написання CSS, а потім налаштування HTML для роботи з ним. Якщо ви це зробите, шлях потрібно спершу проаналізувати, які саме елементи сторінки вам знадобляться, визначити класи для них, а потім написати якийсь статичний тестовий документ, який їх використовує, написати таблиці стилів і лише після цього почати писати додатки, які їх використовують.

Хоча, чесно кажучи, я підозрюю, що таке розкішне становище є вкрай рідкісним, і мало хто насправді визнає цінність єдиного стилю будинку на рівні CSS; частіше, практичність наказує, що дизайнер робить стиль будинку, і тоді для кожної програми, яка потребує його виконання, пишуться незалежні набори таблиць стилів. Причиною цього є, головним чином, те, що більшість компаній використовують принаймні програмне забезпечення з обмеженими можливостями модифікації принаймні частину їх стека, і часто змінювати свій вихід HTML на відповідну таблицю стилів набагато важче (або навіть неможливо для деякі власні пакети), ніж переписування CSS. Крім того, зусилля щодо підтримки десятка наборів таблиць стилів часто недооцінюються, а деякі незначні відмінності та примхи вважаються прийнятними.


2

Незважаючи на те, що це дуже старий Q&A, я відчуваю потребу та відповідальність коментувати це.

Так, HTML слід писати перед CSS, однак ...

Ви НЕ пишете весь HTML на сторінці , а потім повертаєтесь до написання CSS. Це зробило б надзвичайно важко чітко запам'ятати розділи під час їх створення, навіть при правильному відстані та коментарях.

Ви будуєте веб-сайт шарами, ніби ви робите багатошаровий торт.

1-й шар - Спочатку ви будуєте основу, контейнер-дів, з його мінімальною висотою та шириною css.

2-й шар - Потім ви будуєте наступний шар, великі розділи сторінки (divs та стилі для структури), наприклад, рядки або розділи, схожі на стовпці.

3-й шар і далі - Потім ви продовжуєте додавати у другий шар розділів.

Таким чином, ви пишете трохи HTML, додаєте, потім стилізуєте його за допомогою CSS для структури, промиваєте та повторюєте. На мій досвід, це набагато ефективніший спосіб створення веб-сторінок, і на мій погляд, набагато швидший, ніж альтернатива всіх HTML-спершу.

Нарешті, спробуйте скористатися " * {outline: 1px пунктирною червоною} ", щоб отримати контур усіх ваших елементів, оскільки ви додаєте їх на свою сторінку за допомогою стилів, ви зможете побачити їх контур і не потрібно турбуватися про здогадки, як це виглядає, поки ви додаєте кольори тла. Я уникаю межі для цього конкретного випадку використання, оскільки рамки додають пікселів на елементи, контур - це накладення.

Спробуйте, дякую!


Це також буде вам корисно, якщо ви врешті-решт перейдете до використання MVC-фреймворку, такого як AngularJS, де ідея шарів, як ви описуєте це, концептуально відображатиметься в тому, як ви можете використовувати вкладені маршрути / представлення для створення сторінки в ієрархічна манера.
Шон Бертон

1

Я вважаю, що спочатку робота зі структурою веб-сайтів (HTML) має більше сенсу, оскільки ви матимете уявлення про елементи та там імена, коли справа стосується стилізації та форматування вашого веб-сайту.


0

Це залежить від вашої реальної ролі та первинної мети розвитку. Якщо мета полягає у визначенні того, що має відображатись до розширення на веб-сторінці, слід почати з HTML. Якщо мета - створити приємний та рівномірний дизайн, можна почати з CSS. В обох випадках краще спершу почати з паперу та олівця, а якщо поточна мета - розробити веб-додаток, взагалі не слід починати з HTML або CSS. Найкраща практика - спочатку подумати про те, що ви хочете розвивати, а потім розділити завдання на цілі та підцілі, а не просто хакерство все разом.


0

Спроектуйте будинок (компонування сітки) разом із уявленням про те, як він буде оформлений; Побудувати будинок (HTML) за допомогою сітки; потім прикрасьте його (аркуш стилів CSS).

Після того як ви побудували перший будинок (HTML-сторінка), ви можете просто застосувати те саме оздоблення (аркуш стилів CSS), як і далі. Ви можете налаштувати прикрасу під час руху.

Врешті-решт, можливо, вам захочеться переробити (переробити аркуш стилів CSS).


0

Ви вибрали дійсно бідне обрамлення для навчання та побудови.

Тут є два ортогональних питання.

  1. Як створити сайт, який відповідає моїм потребам?
  2. Як я навчусь створювати веб-сайт?

Це дві дуже різні задачі, які можуть (і часто виконувати) потребують різних потенційно суперечливих підходів.

Якщо ви знайомі з навичками, технологіями та вимогами проекту, почніть з дискусії про потреби сайту та пройдіть розробку вправ, щоб визначити, що саме потрібно реалізувати. Це часто означає розмітки та дизайнерські речі, які часто не мають нічого спільного ні з HTML, ні з CSS (хоча деякі люди роблять макет із HTML та CSS).

Якщо ви намагаєтеся навчитися будувати сайт, одночасно будуючи сайт, відбувається процес розвідки та вивчення, до якого ви повинні зайнятися, перш ніж дізнатися, що навіть можливо створити.

Саме тут стала популярною модульна та ітеративна стратегія проектування та побудови. Коли ви не обов'язково знаєте, куди ви їдете зі своїм кінцевим продуктом (тому що ви не знаєте, що можливо), ви створюєте невеликі шматки функціональності, експериментуйте, чи відповідає він вашим вимогам, а потім включаєте цей менший експеримент у більше ціле.

Отже, що це насправді означає конкретно? Створення сайту може бути схожим на будівництво будинку, де ви складаєте архітектурні плани (макети дизайну), а потім починаєте займатися інженерією, щоб обчислити, чи буде ваш будинок вставати та відповідати вашим естетичним потребам. Але створення сайту може (і часто повинно) виглядати більше, як побудувати низку невеликих експериментів і поетапно підійти до досягнення продукту, який відповідає вашій оригінальній концепції.

Як дуже практичний випадок, майже кожен охоплює одночасно і HTML, і CSS.


0

Це загальна проблема в будь-якому проекті розробки програмного забезпечення imho, і як такий ви можете отримати користь від використання будь-якого з таких понять, як Rapid Prototyping, DSDM. Поєднується з будь-яким стилем, наприклад, гнучким (екстремальне програмування або Feature Driven Design (мій улюблений)). Дотримуйтесь загальних принципів, які ви вирішили на початку, стикаючись з ними, і дотримуйтесь їх (KISS, YAGNI).

Тож для мене це: - спочатку побудуйте базовий функціональний «прототип», що охоплює один функціональний блок попиту. Обмежте себе від занурення у «це може бути приємно» / «мені може знадобитися повторне використання цього пізніше», якщо вони не є ОБОВ'ЯЗКІ. Скажіть собі, вам це не потрібно! (ЯГНІ). - Запишіть рішення, які ви приймаєте, як «умову кодування», і дотримуйтесь їх, наприклад, теги PHP: Я використовую короткі, тому що для мого сценарію аргумент .. застосовується і ... не. - додайте базовий стиль, але знову обмежтеся.

Потім розширюйте свій код, поки не досягнете прототипу вищого рівня, який охоплює більш функціональні блоки. Відповідно до цього, змусьте вашу модель css рости. Як тільки ви зіткнетеся з рішеннями, які впливають на все, що ви вже зробили (ви хочете), прочитайте його, прийміть рішення і запишіть у свої умови кодування, чому ви пішли ліворуч або праворуч.

"Обведіть" свій шлях до більш зрілого та кінцевого продукту.

Не бійтеся великих рішень, з якими ви можете зіткнутися, тому що турбота про них може коштувати вам більше часу, ніж виправляти її в дорозі. Крім того, не турбуйтеся про те, що інтернет-спільнота нахмуриться через плече, врешті-решт, коли у вас є продукт, який працює, ви багато чого навчилися, а творчий суддя поганого вихідного коду буде радувати більше наступне, що ви будуєте (помічайте ітерацію тут).

Тільки мої 50cts


0

Порівнюючи веб-сторінку з будинком:

HTML = основи / будинок CSS = стіни / план / шпалери

Як ти будеш плавати стінами в повітрі, поки не побудуєш фундаменти, на яких вони сидять? Як можна писати CSS для стилізації сторінки, поки у вас не будуть написані теги HTML, до яких ви застосовуєте стилі.

Кожен фрагмент CSS - це стилізація конкретних тегів HTML. Ці теги повинні існувати, щоб мати можливість їх стилізувати. Якщо у вас немає HTML для стилювання, файл CSS повинен бути порожнім, оскільки будь-які стилі в ньому зайві, оскільки вони насправді нічого не стилюють.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.