Haruskah saya menulis HTML atau CSS terlebih dahulu?


28

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?


8
Saya tidak yakin bagaimana Anda harus menulis CSS terlebih dahulu, jika Anda ingin melakukannya.
TRiG

Itu tadi pertanyaan? Seperti: pertanyaan normal yang bisa ditanyakan dan ditunggu?
Alex Yu

Jawaban:


82

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 kebanyakan setuju. Satu-satunya masalah adalah ketika Anda menggunakan CSS untuk layout..aka sistem grid.
Daniel

@ Danielel, mengapa itu menjadi masalah? Ada beberapa cara untuk melakukan tata letak di CSS. Beberapa cara lama tidak memungkinkan Anda mengatur ulang elemen secara bebas, terlepas dari urutannya dalam dokumen HTML. Tetapi misalnya, penentuan posisi absolut memungkinkan Anda melakukan itu, dan begitu pula sistem kotak CSS3 (yang sedang dalam pengembangan). Jika alat tata letak yang lebih lama digunakan, maka memang dokumen HTML mungkin perlu ditata ulang jika ide tentang perubahan tata letak.
Jukka K. Korpela

1
@ Semakin banyak tata letak yang Anda lakukan dengan css semakin mudah desainnya untuk mempertahankan jalan. Sebagian besar situs mengalami perubahan desain sepanjang masa pakainya. Ini jauh lebih mudah untuk dicapai jika yang harus Anda lakukan adalah mengubah css.
Kenneth

7
Tidak realistis bahwa CSS dan HTML sepenuhnya dipisahkan. Dalam kehidupan nyata Anda akan, dalam sebagian besar proyek, menulis setidaknya beberapa HTML yang hanya untuk keperluan styling. Saya menyarankan model berulang, di mana Anda mulai dengan beberapa HTML, tambahkan CSS dan kemudian tambahkan lagi HTML. Lakukan ini dengan cara yang Anda pertama kali menulis struktur (seperti kisi) untuk situs web, kemudian bekerja dengan cara Anda menjadi detail yang lebih baik.
Thomas

4
Satu hal yang saya akan menambahkan untuk jawaban ini baik-baik saja: tidak hanya dapat dokumen HTML berdiri sendiri, tetapi harus cukup jelas dan dipahami ketika ia melakukannya. Ingat, HTML yang tidak distyle pada dasarnya adalah apa yang akan dilihat oleh mesin pencari. Lihat itu, apakah terorganisir dengan baik dengan judul dan daftar dan markup semantik lainnya?
Carson63000

13

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.


2

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.


2

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!


Ini juga akan bermanfaat bagi Anda jika pada akhirnya Anda beralih menggunakan kerangka kerja MVC seperti AngularJS, di mana gagasan lapisan seperti yang Anda gambarkan akan secara konseptual memetakan dengan baik cara Anda dapat menggunakan rute / tampilan bersarang untuk membangun halaman dalam sebuah secara hierarkis.
Sean Burton

1

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.


0

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.


0

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


0

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.


0

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


0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.