Menjelaskan mengapa gaya tidak boleh dilakukan secara langsung dalam HTML

ItamarG3 09/07/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Saya baru-baru ini menyedari bahawa telah ditamatkan dari html mengikut laman web ini . Daripada jawapan ini pada Stack Overflow , penggantian marquee dibuat dari CSS. Penjelasan yang diberikan kepada perubahan ialah html adalah mengenai struktur dokumen, dan susun atur dan animasi dan styling dll harus dilakukan dari CSS.

Ini membuat saya berfikir:

Akan jelas mengajar perbezaan antara menetapkan atribut style tag html , dan melakukannya melalui CSS berguna untuk meningkatkan pemahaman pelajar mengenai penyatuan CSS dan HTML?

Untuk mengecilkannya, saya mencari contoh atau penjelasan tentang bagaimana mengajarnya dengan jelas dapat memudahkan pelajar menyusun halaman web mereka . Lebih penjelasan.

Dengan "mengajar secara eksplisit" apa yang saya maksudkan sebenarnya menumpukan pelajaran dengan tajuk "Styling through .CSS", atau sesuatu yang serupa.

Sesetengah konteks, jika diperlukan:

Para pelajar mempelajari perancangan web asas: HTML, JavaScript (sangat asas), JSP dan SQL. Mereka belajar ini selama 1 tahun dan pada akhir tahun mereka harus mempunyai laman web (yang mana mereka menerima gred). Saya tertanya-tanya sama ada pelajaran sepenuhnya tentang CSS mungkin akhirnya membawa kepada laman web yang lebih baik cari.

5 Comments
3 Puppy 07/30/2017
Masalah utama di sini ialah anda menganggap bahawa gaya tidak boleh dilakukan secara langsung dalam HTML, dan menggunakan CSS lebih baik. Kedua-dua perkara itu tidak benar.
ItamarG3 07/31/2017
@Puppy baik, sebahagian daripada soalan adalah sama ada saya harus mengajarnya secara berasingan. Jika saya tidak, maka mereka tidak akan menggunakan stylesheets. Tetapi adakah anda fikir mana-mana laman web di mana sahaja benar-benar menggunakan hardcodes semua itu css dalam html? Every div mempunyai gunung kod dalam sifat style ?
1 David Spence 07/31/2017
Laman web ini menunjukkan kekuatan mengekalkan css berasingan. csszengarden.com - Struktur yang sama, stylesheet css yang berbeza.
ItamarG3 07/31/2017
@DavidSpence bagus. Saya pasti akan menggunakannya
1 no comprende 07/31/2017
Apa sahaja yang anda lakukan, jangan tunjukkan kepada mereka post SO ini mengenai parsing HTML dengan Regex . Boleh memberi mereka mimpi buruk!

12 Answers


richard 07/30/2017.

Saya suka idea menghasilkan beberapa helaian gaya, dan mempunyai murid menggunakannya untuk HTML mereka. Mereka kemudian dapat melihat kuasa mempunyai kepingan gaya berasingan.

Mereka kemudian boleh mula mengedit helaian gaya, dan melihat kuasa satu perubahan kecil boleh mengubah setiap tajuk, atau setiap perenggan.

Saya juga pada masa lalu, menulis fail HTML yang mempunyai satu set butang di bahagian bawah. Butang-butang ini akan mencetuskan fail CSS yang berbeza untuk dimuatkan. Ia adalah beberapa JavaScript yang sangat mudah.

Untuk menjawabnya hendaklah mereka dipisahkan

Menyimpan gaya dan kandungan berasingan, disyorkan oleh W3 dan banyak lagi. Ia melaksanakan pemisahan kebimbangan dan tanggungjawab tunggal. Kedua-dua corak yang sangat penting dalam reka bentuk perisian.

Untuk menjawab, anda harus menumpukan pelajaran untuk memisahkan fail CSS.

Ya. Sekiranya penting untuk memisahkannya, yang mana ia adalah, maka anda harus mengajar murid untuk memisahkannya. Jimat masa dengan tidak mengajar mereka untuk mencampurkannya dengan HTML (Ini akan menjimatkan masa dua kali, kerana anda tidak perlu untuk tidak mengajarnya).


Saya hanya melakukan ini dengan satu atau dua orang (bukan kelas).

5 comments
ItamarG3 07/30/2017
Perenggan kedua bunyi amat berguna. Tetapi itu tidak menjawab sama ada saya harus menumpukan pelajaran untuk mengajar bagaimana dan mengapa seseorang perlu menulis helaian css, bukannya atribut style html yang dalam.
richard 07/30/2017
Menambah jawapan separa kepada Jika dan mengapa untuk menumpukan pelajaran kepadanya.
1 Buffy 07/30/2017
Saya bersetuju bahawa un-mengajar adalah penggunaan yang membazir masa semua orang. Adalah lebih baik untuk menangkap kesalahpahaman sebelum tabiat buruk dibina dan diperkukuhkan.
1 richard 07/30/2017
@tim, ini hanya optimisation beban. Konsepsi itu sepatutnya tetap berasingan. Walau bagaimanapun Google mengatakan meletakkannya dalam fail yang sama. Mereka tidak mengatakan bahawa anda harus gaya setiap bit secara berasingan. Mereka berkata mengambil apa yang boleh dalam fail css dan tambahkannya ke bahagian <style> html.
1 Darren 07/31/2017
Daripada memberi pelajar pelbagai helaian gaya yang mempengaruhi kod mereka, saya akan cuba pendekatan yang bertentangan. Selepas mengajar mereka gaya dalam bahasa HTML, beri mereka halaman yang bergantung pada dokumen CSS untuk gaya dan minta mereka membuat lembaran gaya mereka sendiri (menggunakan teknik yang sama yang mereka pelajari dari menggunakan HTML dalam talian - hanya soal pelabelan gaya dan meletakkannya bersama-sama di satu tempat). Kemudian semua orang di dalam kelas boleh membandingkan helaian gaya mereka pada subjek ujian yang sama (yang anda berikan) dan melihat kemungkinan.

Buffy 07/30/2017.

Jika anda hanya mahu membina halaman yang mudah dan ad-hoc dan tidak akan berubah pada masa akan datang dan hanya akan pernah dilihat pada satu jenis peranti, maka, pasti, membina gaya langsung ke dalam html. Ia adalah sama apabila anda menulis sebuah program yang hanya akan dijalankan sekali pada satu peranti untuk mendapatkan jawapan, selepas itu program menjadi usang. Oleh itu, ada sebab untuk kod dengan teliti. "Cepat dan kotor" berfungsi untuk perkara sedemikian.

However perkara berubah, dan halaman web dilihat pada peranti dengan saiz skrin yang berbeza-beza, walaupun model warna. Dan mereka mungkin dilihat pada masa depan pada peranti yang belum ada.

Oleh itu, jika anda ingin membina laman web yang penting dan berkekalan dan harus dikekalkan di masa depan, gunakan CSS. Anda mungkin tidak akan menulis satu program penting C di bahagian main , tetapi sekurang-kurangnya, faktor perkara yang harus sama tetapi digunakan semula. Dalam pemrograman C mudah kita fokuskan fungsi untuk ini. Dalam html, kita menonjolkan gaya. Pada tahap yang lebih mendalam, sisi pelayan juga memaksimumkan banyak data, dan lain-lain. Ini membolehkan perkara yang sepatutnya sama, tetap sama, dan membolehkan kita mengubah satu tahap reka bentuk secara bebas dari tahap lain.

Ini bukan perkara yang sama, tetapi lihat pada kod muka Google halaman utama. Saya tidak tahu apa yang mereka gunakan untuk meletakkannya bersama dan mengekalkannya, tetapi saya ragu bahawa ia hanya editor teks. Perhatikan bahawa halaman depan mereka, walaupun susun atur yang sangat mudah, sentiasa berubah.

Note to the Instructor Apabila anda bersiap-siap untuk menilai kerja pelajar, lihatnya pada pelbagai peranti, dengan resolusi skrin yang berbeza. Saya tidak, bagaimanapun, menyarankan bahawa anda juga membuat mereka menyediakan css per-peranti.

Untuk itu, lihat beberapa halaman StackExchange pada desktop vs telefon. Dan untuk yang mengejutkan, melihat kedua-dua sumber dan stylesheets beberapa halaman.

2 comments
1 Luke Sawczak 07/31/2017
Perbandingan dengan fungsi adalah baik. Saya menganggap dosa yang dimaksudkan secara langsung membekalkan ciri-ciri gaya dalam sumber HTML. Jika ya, ia boleh dibandingkan dengan mengambil tubuh kaedah dan hanya melekat di mana anda akan memanggil kaedah. Tidak produktif dalam melampau.
no comprende 08/01/2017
Untuk kejutan sebenar, lihat sumber dan gaya stylesheets halaman Microsoft dan Moodle! Mereka boleh beratus-ratus baris panjang. Konsep asal HTML ialah ia akan berfungsi pada peranti yang "belum ada". Dan kini terdapat banyak saiz skrin yang mungkin juga menjadi pemboleh ubah.

AnoE 07/30/2017.

Untuk membuat mereka benar-benar memahami apa yang boleh anda lakukan dengan CSS sahaja - dengan only menggantikan fail CSS lain - bawa mereka ke CSS Zen Garden . Dengan betul-betul HTML yang sama untuk setiap halaman, dan only fail .css yang digantikan, anda mendapat halaman yang tidak masuk akal. Daripada ketiadaan kecil yang tenang untuk kiub 3D-menatal ...

Kemudian jelaskan kepada mereka bahawa skillset yang diperlukan untuk membuat HTML, berbanding skillet untuk (terutama ekstrim seperti itu) CSS sangat berbeza, dan fungsi HTML sebagai pembawa maklumat sahaja.

Goodie lagi adalah untuk memasang pembaca skrin (untuk orang buta) - ada yang mempunyai penggunaan percuma yang terhad - untuk menunjukkan kepada mereka bagaimana HTML "kelihatan" sama apabila dituturkan dengan lantang.

Juga menunjukkan bahawa alat-alat untuk cacat penglihatan itu dapat contoh teks pautan ekstrak dan sebagainya dari HTML jika ia berstruktur dengan baik, dan ini juga memungkinkan untuk mengemudi halaman dengan keyboard sahaja - yang boleh berguna jika satu begitu cenderung, walaupun penglihatannya baik-baik saja.

Akhir sekali, ingatkan bahawa halaman dengan pemisahan kandungan dan styling yang baik mempunyai peluang yang lebih tinggi untuk berfungsi pada peranti mudah alih - kata kunci yang menjadi reka bentuk responsif, di mana kandungan bebas mengalir ke mana-mana resolusi yang diperlukan.


thehayro 07/30/2017.

Untuk mengecilkannya, saya mencari contoh atau penjelasan tentang bagaimana mengajarnya dengan jelas dapat memudahkan pelajar menyusun halaman web mereka. Lebih penjelasan.

Seperti yang dikatakan oleh Richard, para murid dapat melihat bagaimana satu edit sederhana gaya dapat mengubah setiap elemen.

Sebagai contoh, anda boleh membiarkan murid anda 'merasa' manfaat pemisahan gaya dari html. Maksudnya, beri mereka senaman, di mana mereka perlu gaya beberapa elemen (misalnya warna latar belakang elemen) dalam html mereka. Kemudian biarkan mereka menukar setiap elemen ke warna lain. Pelajaran itu adalah untuk membiarkan mereka memahami bahawa tugas ini boleh menjadi lebih memakan masa jika anda memisahkan gaya dari html. Anda kemudiannya dapat menunjukkan bagaimana untuk mengubah satu baris dalam css, yang mengubah semua elemen warna latar belakang.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Selamat datang ke Pendidik Sains Komputer !
Puppy 07/30/2017
Sebagai alternatif, mereka boleh menghasilkan HTML melalui kod seperti orang yang waras, dalam hal ini, ia adalah sepele untuk mengubah warna setiap elemen tanpa lembaran gaya yang berasingan.
1 thehayro 07/30/2017
Pasti. Itu terpulang kepada keperluan di mana halaman web harus dipaparkan (mudah alih / desktop). Tetapi persoalan sejauh yang saya fahami, adalah bagaimana untuk menjelaskan mengapa dan bagaimana terdapat keperluan untuk pemisahan HTML dan CSS.
no comprende 08/01/2017
Ketika saya belajar CSS saya memberikan tugas saya untuk membuat papan catur yang lebih baik, dan tata letak halaman tiga lajur kanonik dengan pengepala dan pengaki.

SpiritBH 07/31/2017.

Nah tanya diri anda: Mengapa kita memisahkan apa-apa dalam apa-apa bentuk kod?

Dalam hampir setiap bahasa pemrograman / skrip tunggal terdapat pemisahan dan delegasi. Kami melakukan ini untuk memastikan lebih mudah untuk mengesan semua kod dan dapat mengenal pasti isu-isu yang lebih mudah (yang tidak dapat dielakkan bercambah kerana tiada pemrogram tidak sempurna)

Jadi saya fikir bahawa pengajaran yang berdedikasi pada CSS adalah idea yang baik, kerana ia membantu mereka memahami apa yang bertanggungjawab untuknya. Ia membantu mereka memahami bahawa jika semua HTML adalah betul ketika melihat sumber, tetapi semua solek masih digemukkan, mereka perlu melihat ke CSS.

Di samping itu, CSS adalah besar, fleksibel dan boleh melakukan lebih banyak daripada hanya meletakkan sempadan yang bagus di sekeliling perkara. Untuk menunjukkan kelas apa yang boleh dilakukannya, dan betapa kompleksnya ia dapat, akan mendorong titik lebih lanjut ke rumah bagaimana tidak bijaksana untuk menggabungkan HTML dan CSS terlalu mendalam.

Pada akhirnya, pemisahan CSS dari HTML (atau mana-mana kod untuk perkara itu) adalah suatu perkembangan yang membuktikan; yang bukan mengenai penciptaan yang berfungsi (lebih baik) tentang pemaju yang mempunyai lebih banyak dan lebih mudah mengawal penciptaan mereka.

Mungkin pada nota itu anda ingin mencuba dan membuat semakan kelas yang satu lagi bekerja, ia akan membantu mereka melihat bagaimana penting untuk mempunyai kod yang diwakilkan bersih apabila anda bekerja dalam satu pasukan.

1 comments
ItamarG3 07/31/2017
anda menaikkan beberapa mata yang sangat menarik. Terima kasih! dan selamat datang kepada Pendidik Sains Komputer

gabe3886 07/31/2017.

Cara yang sedikit berbeza melihatnya mungkin memperkenalkan kod DRY (Jangan Ulangi Diri).

Dengan menggunakan CSS untuk melakukan gaya ini, anda tahu bahawa dengan hanya menambah kelas ke elemen HTML, gaya harus dipegang. Jika anda terpaksa menambahnya secara manual, maka apabila anda perlu menukar satu bahagian, anda perlu menukar banyak, lebih banyak lagi.

Untuk mencuri idea ilustrasi dari Sekolah W3 , jika anda mahu, katakan, perenggan mempunyai warna latar belakang yang berbeza, anda boleh melakukannya dengan cara ini:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Tetapi, jika saya mahu menukar pesanan supaya ia 2,4,3,1 tetapi menyimpan pewarna, saya perlu mengubah semua gaya yang dibina ke setiap tag. Jika itu merentas beberapa halaman, maka beban kerja boleh menjadi besar.

Jika saya melakukannya dalam CSS, saya boleh melakukan perkara berikut:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Sekarang ia tidak lagi peduli apa kandungannya, saya boleh memerintahkan mereka bagaimana saya suka dan gaya masih berfungsi. Banyak usaha berubah. Mengabaikan pesanan, jika saya mahu menukarnya kepada warna yang lebih bijak supaya mudah dibaca, saya menukar nilai dalam CSS sekali, dan ia digunakan untuk setiap item DOM yang padan.

Di luar itu (sebagai CSS boleh dibenamkan dalam HTML dalam tag kepala), memecahnya ke dalam fail dan termasuk itu bermakna saya tidak perlu mengulang CSS (kini lebih masuk akal) saya ke dalam pelbagai fail, ke dalam struktur folder untuk setiap halaman yang saya ada. Saya menyertakan fail CSS di header dan gaya berkuatkuasa. Sekarang jika saya perlu membuat perubahan pada warna atau menambah gaya tambahan, saya mendapat faedah yang sama tidak perlu menduplikasi yang saya tidak menggunakan gaya inline.

Manfaat lain daripada memiliki fail berasingan, jauh dari tanggungjawab yang dipecah, adalah prestasi. Pelayar cukup bagus pada fail caching, jadi jika ia perlu memuat turun satu fail CSS (idealnya diminimumkan) untuk laman web sekali yang kemudiannya dapat digunakan semula, itu satu perkara yang kurang untuk dimuat turun untuk halaman lain. Prestasi harus selalu menjadi pertimbangan bagi orang, terutamanya dengan peningkatan pelayaran mudah alih. Jika halaman web mempunyai banyak CSS di dalamnya maka sumber itu, secara semula jadi, besar. Ini mengambil masa yang lebih lama untuk memuat turun dan / atau boleh digunakan, yang boleh meletakkan orang di luarnya menunggu menjadi tidak dapat diterima oleh mereka.


ncmathsadist 08/01/2017.

Kami mengajar bahawa terdapat tiga lapisan ke laman web: struktur, penampilan, dan tingkah laku. Struktur ditentukan oleh DOM, yang dibuat dengan penanda HTML5 yang dibentuk dengan baik. Apabila kita belajar tentang HTML, kita segera mula melukis pokok dokumen, jadi kita dapat memahami bagaimana unsur-unsur di halaman berkaitan dengan satu sama lain.

Rupa ditentukan oleh CSS, yang mengakses DOM untuk memformat dan gaya halaman. Ini disimpan dalam fail berasingan supaya ia boleh dikongsi oleh kumpulan halaman yang berkaitan. HTML mengendalikan situasi ad hoc menggunakan id atau class . Menggunakan ini menjadikan laman web lebih mudah, kerana gaya untuk item yang mengandungi atribut ini dibuat dalam one place dalam fail CSS.

Lapisan ketiga adalah tingkah laku, yang sepatutnya muncul dalam fail JavaScript. JavaScript never perlu muncul di halaman, kecuali untuk memanggil fungsi daripada kod pengendalian acara. Malah ini boleh dilampirkan dalam fail JS. Pastikan pelajar anda tahu tentang peristiwa load dan onload awal, supaya mereka boleh menangguhkan panggilan kod sehingga elemen halaman wujud.

Jika anda memasang Node, anda boleh menjalankan ujian kod JS pada baris arahan, dan membangunkan suite ujian untuk fungsi yang telah anda buat.

Mengasingkan tiga lapisan membuat perkara yang kemas dan memaksimumkan penggunaan semula kod.


user1639154 07/31/2017.

Nampaknya banyak jawapan di sini tidak menangani titik warisan pada gaya, kerana ini juga harus diajar. Peraturan asas adalah apa yang dibaca yang terakhir akan digunakan.

yang pertama untuk memuatkan biasanya helaian luaran di kepala dokumen. Lembaran gaya yang dipautkan di kepala dokumen akan ditunggangi oleh gaya yang diletakkan dalam badan html, dan mereka juga akan ditimpa oleh gaya yang diletakkan terus pada elemen DOM. Tag yang penting boleh digunakan untuk mengubah tingkah laku ini juga.

Kebanyakan akan meletakkan semua css mereka ke dalam failnya sendiri kerana ia lebih mudah untuk diselenggarakan dan tidak memerlukan banyak kerja apabila diperbaharui / diubah.

EDIT: Hanya untuk memperjelas sedikit lagi, ia hanya gaya tertentu yang sepadan dengan kelas yang akan bertentangan / menimpa satu sama lain, jika salah satu baris menambahkan gaya untuk menggariskan teks, yang bukan dalam kelas dalam helaian luaran untuk contohnya ia hanya akan menambah bahawa gaya tambahan. Kelas tidak menggantikan satu sama lain secara langsung tetapi bergabung dengan satu sama lain.

5 comments
1 ItamarG3 07/31/2017
Wow. Selamat datang ke Pendidik Sains Komputer . Ini benar-benar sesuatu yang saya tidak anggap. Saya suka jika anda boleh menambah beberapa contoh atau perihalan yang menunjukkannya. (Saya can menulis sendiri, tetapi saya lebih berminat melihat apa yang anda boleh fikirkan). Ini benar-benar satu jawapan yang menarik :)
1 ItamarG3 07/31/2017
Tidak berkaitan: kenapa awak tidak mengambil lawatan kami? Saya pasti anda akan mendapati ia menarik.
user1639154 07/31/2017
Saya mendapat sedikit salah, lembaran gaya luaran yang pertama, kemudian dokumen gaya dan kemudian pada elemen, otak saya tidak pernah 100% pada pagi esok. :)
ItamarG3 07/31/2017
maafkan dan lupakan ;). Anda boleh mengedit jawapan anda. Terdapat butang edit \ pautan terus di bawah jawapan anda. Semasa anda berada di sana, adakah anda ingin menambah beberapa contoh untuk menunjukkan apa jawapan anda ditangani? Ia benar-benar akan menjadikannya jawapan yang lebih baik: D
user1639154 07/31/2017
Malangnya saya tidak mempunyai masa sekarang. Saya hanya mahu menyebutkan warisan css, kerana ia adalah aspek penting css.

rackandboneman 08/03/2017.

Buat projek di mana hasilnya DUA pandangan yang same document sekali berbeza dari same document , misalnya versi yang kelihatan hebat pada monitor besar dan yang lain yang kelihatan hebat pada iPhone.

Menggunakan bukan halaman web statik tetapi dihasilkan oleh komputer, dokumen yang dapat dikemas kini akan memacu titik asal lebih banyak lagi, kerana memasukkan maklumat gaya dalam penjana dokumen akan menjadikannya lebih rumit - satu-satunya pilihan untuk kekacauan dengan gaya akan sama ada mengubah generator dokumen dengan semua kerumitan yang terlibat atau stylesheet yang betul-betul sesuai dengan anda. Lebih baik: Berikan two kumpulan di sudut berasingan bilik untuk melakukan penjanaan dokumen dan bahagian stylesheet - dan mengawal selia bagaimana spesifikasi dikomunikasikan di antara keduanya.

4 comments
ItamarG3 08/03/2017
Ini luar biasa. Wow.
rackandboneman 08/03/2017
Baiklah, buatlah itu boleh dipercayai.
ItamarG3 08/03/2017
Ia luar biasa kerana ia menyelesaikan masalah dengan keadaan yang saya tidak boleh mendedahkan (barangan sekolah), tetapi ia tidak exactly menjawab soalan ...
1 rackandboneman 08/03/2017
Oh, dan saya bercakap dalam perbincangan bukan sebagai guru tetapi profesional IT - apa yang saya nyatakan adalah mengapa perkara yang dilakukan dalam amalan seperti teori yang anda ingin katakan berkata :)

Chris M. 08/02/2017.

Terdapat banyak jawapan yang baik di sini. Satu perkara yang saya tidak nampak telah dibuat adalah kandungan dan reka bentuk yang sering dicipta oleh orang atau pasukan yang berasingan, dan dengan itu masing-masing ditakrifkan dengan alat dan bahasa mereka sendiri membolehkan alur kerja yang berasingan.

4 comments
ItamarG3 08/02/2017
Wow. Saya tidak memikirkannya. Adakah anda keberatan mengembangkan sedikit tentang bagaimana saya dapat menerangkan ini dalam pelajaran yang berasingan tentang menggunakan stylesheets CSS?
Chris M. 08/02/2017
Saya akan menggunakan analogi. Jurutera automotif tidak memilih warna kereta. Penulis skrip biasanya tidak membuat reka bentuk kostum.
ItamarG3 08/02/2017
Saya faham. Mungkin anda harus memasukkan analogi tersebut dalam jawapan anda dengan mengedit jawapannya.
1 Buffy 08/03/2017
Sebenarnya ia lebih buruk daripada itu. Di sesetengah syarikat besar dengan kehadiran web yang penting, terdapat pasukan standard yang duduk di atas kedua-dua pasukan kandungan dan susun atur. Sekiranya susun atur adalah satu piksel standard, anda akan melakukannya. Satu piksel.

thesecretmaster 08/03/2017.

Satu sebab penting mengapa gaya inline buruk adalah pembacaan kod, mudah dan mudah. Dalam kes ini, contohnya cukup untuk membuktikan maksud anda:

  
The Title
This is a super great article

Berbanding dengan:

  
The Title
This is a super great article

Sebagai tambahan kepada contoh ini, tanpa menggunakan kelas dan id anda membuat DOM lebih sukar untuk memanipulasi menggunakan javascript dan anda menjadikannya mustahil untuk menggunakan unsur-unsur pseudo dan beberapa pemilih CSS yang benar-benar baik seperti :nth-child() dan :first-child , untuk menamakan beberapa.


Puppy 07/31/2017.

Saya benar-benar tidak bersetuju - gaya harus dilakukan secara langsung dalam HTML.

Masalah utama ialah gaya tidak jauh dari struktur HTML. Hanya menulis gaya dalam fail berasingan secara fizikal tidak mengubahnya. Satu contoh yang baik ialah sokongan peranti mudah alih. Secara teori, anda boleh membuat fail CSS mudah alih. Tetapi pada hakikatnya, anda mungkin memerlukan reka bentuk UI yang sepenuhnya berasingan untuk menghasilkan pengalaman yang baik pada peranti mudah alih, dan kemudian struktur HTML yang berasingan untuk menyokong ini, dan kemudian satu set gaya yang berasingan. "Buat butang yang sama tetapi sedikit lebih kecil" hanya berfungsi untuk kepingan yang paling kecil.

Menghasilkan UI yang betul melibatkan menghasilkan struktur HTML yang menyokong gaya yang anda perlukan. Oleh kerana kedua-dua mereka sebenarnya digabungkan, mereka akan dijadikan tempat mudah untuk difahami dan semuanya dalam satu tempat.

Lebih-lebih lagi, kerana anda mungkin menghasilkan HTML melalui kod, tidak ada masalah dengan menjana HTML dengan gaya pendua, kerana penjana kod anda boleh meludahkan gaya sepanjang hari.

Mempunyai CSS mentah sangat bermasalah kerana gayanya secara rawak dan pada skop global, dan sukar untuk digunakan semula. Anda membuat nama kelas di bawah harapan bahawa tiada siapa yang menggunakannya. Anda sarang kelas anda sendiri di dalam elemen itu untuk cuba menyelesaikan masalah ini sedikit tetapi sekarang anda tidak boleh menggunakan semula kelas ini di tempat lain kerana mereka tidak berada di struktur DOM yang betul. Kemudian anda mengetahui bahawa beberapa orang rawak rawak di beberapa bahagian yang berasingan dari halaman anda menggunakan kelas anda tanpa memberitahu anda dan sekarang anda telah melanggarnya dengan menukar gaya anda. Dan nasib baik mendapat pemeriksaan jenis, sokongan IDE, dan lain-lain. Ia juga sukar untuk membuat contoh kelas parameterised, atau menggantikan penggantian secara global, misalnya display: flex dengan display: flex dan display: -webkit-flex untuk iOS.

Cara yang betul untuk menangani gaya adalah untuk menangani mereka dengan mana-mana kod lain-merangkumi mereka dalam beberapa fungsi.

5 comments
1 thesecretmaster♦ 07/31/2017
Hi Puppy, selamat datang kepada Pengajar Sains Komputer ! Sekiranya anda ingin bertemu anak anjing lain, anda boleh mengatakan kepada Buffy , yang merupakan bulldog, dalam sembang . Ini adalah jawapan yang menarik, terima kasih kerana berkongsi perspektif anda di sini!
2 richard 07/31/2017
Walaupun saya tidak bersetuju dengan semua yang anda katakan. Saya melihat titik anda. Terutamanya baris terakhir (saya fikir anda perlu mengembangkannya). Tunjukkan kepada kami bagaimana anda fikir ia perlu dilakukan. Walaupun kita tidak setuju 100%, kita boleh belajar sesuatu.
no comprende 08/01/2017
Jawapan anda mengingatkan saya tentang masa saya bertanya dan seseorang berkata, "Jika anda membaca Misa di Latin." Terdapat banyak cara 'betul' untuk melakukan sesuatu, dan dari sudut pandang anda, dengan HTML yang dihasilkan, memang tidak ada perbezaan. Tetapi kebanyakan pengajar tidak mengajar HTML dihasilkan, seperti kebanyakan pengaturcara tidak belajar bagaimana menulis penyusun. Lapisan yang kita tambah untuk membuat penyelenggaraan fail HTML lebih mudah digunakan dengan membuang-jauh HTML. Saya juga suka menghasilkan sesuatu, tetapi saya berada di dalam minoriti yang luas. Mungkin kita boleh bercakap tentang Bahasa-bahasa Khusus Domain kadang-kadang?
Puppy 08/01/2017
Pengajar yang tidak mengajar HTML dihasilkan tidak mengajar HTML berguna.
ItamarG3 08/02/2017
@Puppy Adakah itu begitu?

Related questions

Hot questions

Language

Popular Tags