Haruskah saya menulis HTML atau CSS terlebih dahulu?

Ada banyak analogi untuk pengembangan HTML / CSS; yang bisa sedikit membingungkan bagi pemula.

• HTML = yayasan / rumah
• CSS = dinding / cetak biru / wallpaper

Apakah ada praktik terbaik di sini? Yang mana yang harus kita tulis dulu?

Anda harus membangun rumah terlebih dahulu, lalu mengecatnya.

Dokumen HTML dapat berdiri sendiri, meskipun mungkin terlihat membosankan. Lembar gaya CSS tidak bisa; itu tidak dapat ditampilkan (kecuali sebagai kode) tetapi instruksi untuk ditampilkan.

Ini masalah yang berbeda bahwa selama melukis, Anda mungkin ingin melakukan perubahan pada rumah. Dengan rumah sungguhan yang biasanya tidak layak, tetapi dalam pengembangan HTML + CSS, adalah hal biasa untuk mengetahui bahwa Anda memerlukan markup tambahan dalam dokumen HTML Anda untuk mempermudah penataan gaya. (Ini lebih jarang dari sebelumnya, berkat penyeleksi CSS3 yang kuat.)

Saya selalu menggunakan pena dan kertas terlebih dahulu, kertas ukuran penuh, untuk gambar skala.

Itu jika Anda tidak memiliki desain Anda disetrika. Jika Anda yakin dengan desain Anda, saya memiliki pendekatan yang seimbang; html adalah struktur, css lem. Tetap membangun 'tuple' konsep (HTML, CSS).

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

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

dan seterusnya.

Begitulah cara saya melakukannya.

Banyak tergantung pada jenis situs web / aplikasi web yang Anda buat, dan jenis konteks yang akan digunakan.

Dalam kebanyakan kasus, cara terbaik untuk pergi adalah membangun HTML semantik suara, kemudian menambahkan CSS untuk browser yang sesuai standar, dan kemudian menerapkan hack dan aturan non-intrusif (misalnya, komentar kondisional IE, -vendor-somethingaturan CSS, lapisan kepatuhan javascript, dll. ) untuk mendukung browser yang tidak standar dan mengaktifkan fitur khusus vendor.

Namun, kadang-kadang Anda memiliki banyak aplikasi web independen yang berbagi lembar gaya (misalnya sebagai bagian dari gaya rumah), dan Anda bahkan mungkin berada dalam posisi mewah untuk mengontrol output HTML masing-masing. Dalam hal ini, menulis CSS terlebih dahulu, dan kemudian men-tweak HTML untuk bekerja dengannya, mungkin merupakan cara yang lebih baik. Jika Anda melakukan ini, cara yang harus dilakukan adalah pertama-tama menganalisis elemen halaman seperti apa yang akan Anda butuhkan, menentukan kelas untuk ini, kemudian menulis beberapa dokumen uji statis yang menggunakannya, menulis stylesheet, dan baru kemudian mulai menulis aplikasi yang menggunakannya.

Namun, dalam semua kejujuran, saya menduga bahwa posisi mewah seperti itu sangat langka, dan hanya sedikit perusahaan yang benar-benar menyadari nilai gaya rumah terpadu di tingkat CSS; lebih sering, kepraktisan menentukan bahwa seorang desainer membuat gaya rumah, dan kemudian set stylesheet independen ditulis untuk setiap aplikasi yang perlu mengikutinya. Alasan untuk ini adalah, terutama, bahwa sebagian besar perusahaan menggunakan perangkat lunak off-the-shelf dengan kemungkinan modifikasi terbatas untuk setidaknya beberapa tumpukan mereka, dan seringkali, mengubah output HTML mereka agar sesuai dengan stylesheet yang diberikan jauh lebih sulit (atau bahkan tidak mungkin untuk beberapa paket eksklusif) daripada menulis ulang CSS. Selain itu, upaya mempertahankan selusin set stylesheet sering diremehkan, dan beberapa perbedaan kecil dan kebiasaan dianggap dapat diterima.

Meskipun ini adalah Q&A yang sangat lama, saya merasa perlu dan tanggung jawab untuk mengomentarinya.

Ya, HTML harus ditulis sebelum CSS, namun ...

Anda TIDAK menulis semua HTML pada halaman , dan kemudian kembali untuk menulis CSS. Ini akan membuatnya sangat sulit untuk mengingat dengan jelas bagian-bagian saat Anda membangunnya, bahkan dengan spasi dan komentar yang tepat.

Anda membangun situs web berlapis-lapis, seolah-olah Anda membuat kue berlapis-lapis.

1st Layer - Pertama Anda membangun basis, wadah div, dengan itu css min-tinggi dan lebar.

2nd Layer - Kemudian Anda membangun lapisan berikutnya, bagian besar halaman (div dan gaya untuk struktur), seperti baris atau bagian yang tampak seperti kolom.

3rd Layer and beyond - Kemudian Anda terus menambahkan dalam lapisan kedua bagian.

Dengan cara ini, Anda menulis beberapa HTML, tambahkan kemudian gaya dengan CSS untuk struktur, bilas dan ulangi. Dalam pengalaman saya, ini adalah cara yang jauh lebih efektif untuk membangun halaman web, dan menurut saya jauh lebih cepat daripada alternatif semua HTML pertama.

Terakhir, coba gunakan " * {outline: 1px dotted red} " untuk mendapatkan garis besar dari semua elemen Anda, saat Anda menambahkannya pada halaman Anda dengan gaya, Anda dapat melihat garis besarnya dan tidak perlu khawatir menebak seperti apa sampai Anda menambahkan warna latar belakang Anda. Saya menghindari batas untuk kasus penggunaan khusus ini karena perbatasan menambahkan piksel pada elemen, garis besar adalah overlay.

Cobalah, terima kasih!

Saya percaya bahwa bekerja dengan struktur situs web (HTML) pertama kali lebih masuk akal karena Anda kemudian akan memiliki gagasan tentang elemen-elemen dan nama-nama yang ada ketika datang untuk merancang dan memformat situs web Anda.

Ini tergantung pada peran aktual Anda dan tujuan utama pembangunan. Jika tujuannya adalah untuk menentukan apa yang harus diperlihatkan sampai sejauh mana pada halaman web, orang harus memulai dengan HTML. Jika tujuannya adalah untuk menciptakan desain yang menyenangkan dan seragam, orang dapat memulai dengan CSS. Dalam kedua kasus ini, yang pertama mungkin lebih baik dimulai dengan kertas dan pensil, dan jika tujuan saat ini adalah untuk mengembangkan aplikasi web, orang tidak boleh memulai dengan HTML atau CSS sama sekali. Praktik terbaik adalah pertama-tama berpikir tentang apa yang ingin Anda kembangkan dan kemudian membagi tugas menjadi tujuan dan sub-tujuan alih-alih hanya meretas semuanya menjadi satu.

Desain rumah (tata letak grid) bersama dengan ide bagaimana ia akan dihiasi; Bangun rumah (HTML) dengan kisi; lalu dekorasikan (style sheet CSS).

Setelah Anda membangun rumah pertama (halaman HTML), Anda bisa menerapkan dekorasi yang sama (style sheet CSS) saat Anda melanjutkan. Anda dapat mengubah dekorasi saat Anda pergi.

Akhirnya, Anda mungkin ingin mendekor ulang (mengulang lembar gaya CSS).

Anda telah memilih kerangka yang sangat buruk untuk belajar dan membangun.

Ada dua masalah ortogonal yang dihadapi di sini.

1. Bagaimana cara saya membangun situs yang melayani kebutuhan saya?
2. Bagaimana saya belajar membangun situs web?

Itu adalah dua tugas yang sangat berbeda yang dapat (dan sering kali dilakukan) memerlukan berbagai pendekatan yang berpotensi bertentangan.

Jika Anda terbiasa dengan keterampilan, teknologi, dan persyaratan proyek, seseorang mulai dengan diskusi tentang kebutuhan situs, dan menjalani latihan desain untuk menentukan apa yang perlu diimplementasikan. Itu sering berarti markup dan hal-hal desain, yang sering kali tidak ada hubungannya dengan HTML atau CSS (meskipun beberapa orang melakukan mockup dengan HTML & CSS).

Jika Anda mencoba mempelajari cara membangun situs, sementara juga membangun situs, ada proses eksplorasi dan pembelajaran yang harus Anda lakukan sebelum Anda tahu apa yang mungkin dibangun.

Di sinilah desain modular dan iteratif dan strategi membangun telah menjadi populer. Ketika Anda tidak perlu tahu ke mana Anda akan pergi dengan produk akhir Anda (karena Anda tidak tahu apa yang mungkin), Anda membangun sejumlah kecil fungsi, bereksperimen dengan apakah itu memenuhi persyaratan Anda, dan kemudian memasukkan eksperimen yang lebih kecil ke dalam keseluruhan lebih besar.

Jadi, apa sebenarnya arti dari istilah konkret? Membangun situs dapat seperti membangun rumah, tempat Anda menyusun rencana arsitektur (merancang maket) dan kemudian mulai melakukan rekayasa untuk menghitung apakah rumah Anda akan berdiri dan memenuhi kebutuhan estetika Anda. Tetapi membangun situs dapat (dan seringkali harus) terlihat lebih seperti membangun serangkaian eksperimen kecil, dan mengambil pendekatan langkah demi langkah untuk mencapai produk yang memenuhi konsep asli Anda.

Sebagai hal yang sangat praktis, hampir semua orang menggunakan HTML dan CSS mereka sekaligus.

Ini adalah masalah umum dalam proyek pengembangan perangkat lunak apa pun dan karenanya Anda dapat mengambil manfaat dari menggunakan salah satu konsep seperti Rapid Prototyping, DSDM. Dapat dikombinasikan dengan gaya apa pun misalnya gesit (pemrograman ekstrem atau Desain Berbasis Fitur (favorit saya)). Berpegang teguh pada prinsip-prinsip umum yang Anda putuskan di awal saat Anda menghadapinya, dan berpegang teguh pada prinsip itu (KISS, YAGNI).

Jadi bagi saya itu adalah: - membangun 'prototipe' fungsional dasar pertama, mencakup satu blok fungsional permintaan Batasi diri Anda dari menyelam ke dalam 'ini mungkin bagus' / 'saya mungkin perlu menggunakan kembali ini nanti' hal-hal kecuali mereka OBVIOUS. Katakan pada dirimu sendiri, kamu tidak akan membutuhkannya! (YAGNI). - Tuliskan keputusan yang Anda buat sebagai 'konvensi pengkodean' dan patuhi mereka misalnya tag php: Saya menggunakan yang pendek karena untuk argumen skenario saya .. berlaku dan ... tidak. - tambahkan gaya dasar tetapi batasi diri Anda lagi.

Kemudian perluas kode Anda hingga Anda mencapai prototipe tingkat tinggi yang mencakup lebih banyak blok fungsional. Sejalan dengan itu, buat model css Anda tumbuh. Segera setelah Anda menghadapi keputusan yang memengaruhi semua yang sudah Anda lakukan (Anda akan), bacalah, buat keputusan dan tuliskan dalam konvensi pengkodean Anda mengapa Anda berbelok ke kiri atau ke kanan.

'Lingkari' jalan Anda menuju produk yang lebih dewasa dan final.

Jangan takut dengan keputusan besar yang mungkin Anda hadapi, karena mengkhawatirkannya akan membuat Anda menghabiskan waktu lebih lama daripada memperbaikinya. Juga, jangan khawatir tentang komunitas internet yang memandangi bahu Anda dengan kerutan, pada akhirnya ketika Anda memiliki produk yang berfungsi, Anda telah belajar banyak, dan hakim imajinatif kode sumber yang buruk akan lebih senang dengan hal berikutnya yang Anda bangun (perhatikan iterasi di sini).

Hanya 50cts saya

Saat Anda membandingkan halaman web dengan rumah:

HTML = fondasi / CSS rumah = dinding / cetak biru / wallpaper

Bagaimana Anda akan melayang dinding di udara sampai Anda membangun fondasi tempat mereka duduk? Bagaimana Anda bisa menulis CSS untuk memberi style pada halaman Anda sampai Anda memiliki tag HTML tertulis yang Anda terapkan gaya.

Setiap bagian dari CSS adalah penataan tag HTML spesifik. Tag-tag itu harus ada agar dapat men-style-nya. Jika Anda tidak memiliki HTML untuk gaya maka file CSS harus kosong karena gaya di dalamnya berlebihan karena mereka tidak benar-benar gaya apa pun.