ฉันควรเขียน HTML หรือ CSS ก่อนหรือไม่


28

มีการเปรียบเทียบจำนวนมากสำหรับการพัฒนา HTML / CSS ซึ่งอาจสับสนเล็กน้อยสำหรับผู้เริ่มต้น

  • HTML = มูลนิธิ / บ้าน
  • CSS = ผนัง / พิมพ์เขียว / วอลล์เปเปอร์

มีวิธีปฏิบัติที่ดีที่สุดที่นี่หรือไม่? เราควรเขียนอันไหนก่อน


8
ฉันไม่แน่ใจว่าคุณควรเขียน CSS อย่างไรก่อนหากคุณต้องการทำเช่นนั้น
TRiG

นั่นเป็นคำถามเหรอ? ไลค์: คำถามปกติที่ใครจะถามและรอคำตอบ?
Alex Yu

คำตอบ:


82

คุณควรสร้างบ้านก่อนแล้วจึงทาสี

เอกสาร HTML สามารถยืนได้ด้วยตัวเองถึงแม้ว่ามันจะดูน่าเบื่อก็ตาม สไตล์ชีต CSS ไม่สามารถ; มันไม่มีอะไรแสดง (ยกเว้นเป็นรหัส) แต่คำแนะนำสำหรับการแสดง

มันเป็นปัญหาที่แตกต่างกันในระหว่างการทาสีคุณอาจต้องการเปลี่ยนแปลงบ้าน โดยปกติแล้วบ้านที่ไม่สามารถทำได้ แต่ในการพัฒนา HTML + CSS เป็นเรื่องธรรมดาที่จะสังเกตเห็นว่าคุณต้องการมาร์กอัปเพิ่มเติมในเอกสาร HTML ของคุณเพื่อจัดแต่งทรงผมให้ง่ายขึ้น (มันเป็นเรื่องธรรมดาน้อยกว่าที่เคยเป็นมาขอบคุณตัวเลือก CSS3 ที่ทรงพลัง)


ฉันเห็นด้วยส่วนใหญ่ ปัญหาเดียวคือเมื่อคุณใช้ CSS สำหรับเค้าโครง .. ระบบกริด
แดเนียล

@Daniel ทำไมมันถึงเป็นปัญหา มีหลายวิธีในการทำโครงร่างใน CSS วิธีที่เก่ากว่าบางวิธีไม่อนุญาตให้คุณจัดเรียงองค์ประกอบใหม่อย่างอิสระโดยไม่ขึ้นกับลำดับในเอกสาร HTML แต่เช่นการจัดตำแหน่งที่แน่นอนช่วยให้คุณทำเช่นนั้นได้และระบบกริด CSS3 (ซึ่งอยู่ระหว่างการพัฒนา) ก็เช่นกัน หากมีการใช้เครื่องมือเลย์เอาต์ที่เก่ากว่าจริง ๆ แล้วเอกสาร HTML อาจจำเป็นต้องปรับโครงสร้างใหม่หากแนวคิดเกี่ยวกับการเปลี่ยนเลย์เอาต์
Jukka K. Korpela

1
@ ยิ่งรูปแบบที่คุณทำกับ css ง่ายขึ้นการออกแบบก็คือการดูแลรักษาถนน ไซต์ส่วนใหญ่ผ่านการเปลี่ยนแปลงการออกแบบตลอดช่วงชีวิต มันง่ายกว่าที่จะทำสำเร็จถ้าสิ่งที่คุณต้องทำคือเปลี่ยน CSS
Kenneth

7
มันไม่เหมือนจริงที่แยก CSS และ HTML ออกจากกันอย่างสมบูรณ์ ในชีวิตจริงคุณจะต้องเขียนโครงการอย่างน้อย HTML ที่ใช้เพื่อการออกแบบ ฉันแนะนำรูปแบบการวนซ้ำที่คุณเริ่มต้นด้วย HTML เพิ่ม CSS แล้วเพิ่ม HTML เพิ่มเติม ทำสิ่งนี้ในแบบที่คุณเขียนโครงสร้าง (เช่นกริด) สำหรับเว็บไซต์ก่อนจากนั้นทำรายละเอียดให้ละเอียดยิ่งขึ้น
โทมัส

4
สิ่งหนึ่งที่ฉันต้องการเพิ่มในคำตอบที่ดีนี้ไม่เพียง แต่เอกสาร HTML จะสามารถยืนได้ด้วยตัวเอง แต่ควรมีเหตุผลที่ชัดเจนและเข้าใจได้ง่ายเมื่อมันทำเช่นนั้น จำไว้ว่า HTML ที่ไม่มีการจัดรูปแบบนั้นเป็นสิ่งที่เครื่องมือค้นหาจะมองเห็น ลองดูมันจัดเรียงอย่างดีกับส่วนหัวและรายการและมาร์กอัปความหมายอื่น ๆ
Carson63000

13

ฉันมักจะใช้ปากกาและกระดาษก่อนกระดาษขนาดเต็มภาพวาดในระดับ

นั่นคือถ้าคุณไม่มีการออกแบบของคุณรีดออก หากคุณมั่นใจในการออกแบบของคุณฉันมีวิธีการที่สมดุล html คือโครงสร้าง css กาว สร้างความคิดอย่างต่อเนื่องในแนวคิด 'tuples' (HTML, CSS)

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

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

และอื่น ๆ

นั่นเป็นวิธีที่ฉันทำ


2

มากขึ้นอยู่กับประเภทของเว็บไซต์ / เว็บแอปพลิเคชันที่คุณสร้างขึ้นและประเภทของบริบทที่จะใช้งาน

ในกรณีส่วนใหญ่วิธีที่ดีที่สุดคือสร้าง HTML ที่มีความหมายทางเสียงจากนั้นเพิ่ม CSS สำหรับเบราว์เซอร์ที่ได้มาตรฐานและจากนั้นใช้การแฮ็กและกฎที่ไม่ล่วงล้ำ (เช่นความคิดเห็นตามเงื่อนไขของ IE, -vendor-somethingCSS CSS ) เพื่อรองรับเบราว์เซอร์ที่ไม่เป็นมาตรฐานและเปิดใช้งานคุณลักษณะเฉพาะของผู้ขาย

อย่างไรก็ตามบางครั้งคุณมีเว็บแอปพลิเคชั่นอิสระที่ใช้สไตล์ชีทร่วมกัน (เช่นเป็นส่วนหนึ่งของสไตล์บ้าน) และคุณอาจอยู่ในตำแหน่งที่หรูหราเพื่อควบคุมเอาต์พุต HTML ของแต่ละรายการ ในกรณีดังกล่าวให้เขียน CSS ก่อนจากนั้นจึงทำการปรับแต่ง HTML เพื่อให้สามารถทำงานได้ดีขึ้น หากคุณทำเช่นนี้วิธีที่จะไปคือการวิเคราะห์องค์ประกอบของหน้าเว็บที่คุณต้องการก่อนกำหนดคลาสสำหรับสิ่งเหล่านี้จากนั้นเขียนเอกสารทดสอบแบบคงที่ที่ใช้พวกเขาเขียนสไตล์ชีทแล้วเริ่มเขียน แอปพลิเคชั่นที่ใช้

อย่างไรก็ตามในความซื่อสัตย์ทั้งหมดฉันสงสัยว่าสถานที่หรูหราดังกล่าวหายากมากและมีเพียงไม่กี่ บริษัท ที่ตระหนักถึงคุณค่าของรูปแบบบ้านที่รวมเป็นหนึ่งเดียวในระดับ CSS บ่อยครั้งการใช้งานได้จริงกำหนดว่าผู้ออกแบบสร้างสไตล์บ้านแล้วชุดสไตล์อิสระจะถูกเขียนขึ้นสำหรับแต่ละแอปพลิเคชันที่ต้องทำตาม เหตุผลส่วนใหญ่คือ บริษัท ส่วนใหญ่ใช้ซอฟต์แวร์แบบไม่วางตลาดโดยมีความเป็นไปได้ในการแก้ไขที่ จำกัด สำหรับสแต็กอย่างน้อยบางส่วนและบ่อยครั้งที่การเปลี่ยนเอาต์พุต HTML ให้เหมาะกับสไตล์ชีทที่กำหนดนั้นยากกว่ามาก บางแพ็คเกจที่เป็นกรรมสิทธิ์) กว่าเขียน CSS ใหม่ นอกจากนี้ความพยายามในการรักษาชุดสไตล์โหลมักจะถูกประเมินต่ำและความแตกต่างและนิสัยใจคอเล็กน้อยก็ถือว่ายอมรับได้


2

แม้ว่านี่จะเป็นคำถามและคำตอบที่เก่ามากแต่ฉันก็รู้สึกถึงความต้องการและความรับผิดชอบในการแสดงความคิดเห็น

ใช่ HTML ควรเขียนก่อน CSS อย่างไรก็ตาม ...

คุณไม่ได้เขียน HTML ทั้งหมดในหน้าจากนั้นกลับไปเขียน CSS สิ่งนี้จะทำให้ยากมากที่จะจดจำส่วนต่าง ๆ ได้อย่างชัดเจนเมื่อคุณสร้างมันขึ้นมาแม้ว่าจะมีการเว้นวรรคและความคิดเห็นที่เหมาะสม

คุณสร้างเว็บไซต์ในเลเยอร์ราวกับว่าคุณกำลังทำเค้กหลายชั้น

ชั้นที่ 1 - ขั้นแรกคุณสร้างฐาน div container ด้วยความสูงขั้นต่ำและความกว้าง css

เลเยอร์ที่ 2 - จากนั้นคุณสร้างเลเยอร์ถัดไปส่วนที่มีขนาดใหญ่ของหน้า (divs และการกำหนดสไตล์สำหรับโครงสร้าง) เช่นแถวหรือส่วนที่ดูเหมือนคอลัมน์

ชั้นที่ 3 ขึ้นไป - จากนั้นให้เพิ่มในส่วนที่สองของส่วนต่อไป

ด้วยวิธีนี้คุณจะเขียน HTML เพิ่มและจัดรูปแบบด้วย CSS สำหรับโครงสร้างล้างและทำซ้ำ จากประสบการณ์ของฉันนี่เป็นวิธีที่มีประสิทธิภาพมากกว่าในการสร้างหน้าเว็บและในความคิดของฉันเร็วกว่าทางเลือกของ HTML ทั้งหมดก่อน

สุดท้ายลองใช้ " * {outline: 1px dotted red} " เพื่อรับเค้าร่างขององค์ประกอบทั้งหมดของคุณเมื่อคุณเพิ่มพวกเขาในหน้าของคุณด้วยการใส่สไตล์คุณสามารถเห็นโครงร่างของพวกเขาและไม่ต้องกังวลกับการคาดเดาสิ่งที่ดูเหมือน คุณเพิ่มสีพื้นหลังของคุณ ฉันหลีกเลี่ยงเส้นขอบสำหรับกรณีการใช้งานเฉพาะนี้เนื่องจากเส้นขอบเพิ่มพิกเซลในองค์ประกอบโครงร่างเป็นภาพซ้อนทับ

ลองดูสิขอบคุณ!


สิ่งนี้จะให้บริการคุณได้ดีหากในที่สุดคุณสามารถใช้เฟรมเวิร์ก 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

นี่เป็นปัญหาที่พบบ่อยในโครงการพัฒนาซอฟต์แวร์ใด ๆ และดังนั้นคุณสามารถได้รับประโยชน์จากการใช้แนวคิดใด ๆ เช่น Rapid Prototyping, DSDM ใช้งานได้กับทุกสไตล์เช่นความคล่องตัว (การเขียนโปรแกรมขั้นสุดยอดหรือการออกแบบคุณสมบัติขับเคลื่อน (สิ่งที่ฉันโปรดปราน)) ยึดติดกับหลักการทั่วไปที่คุณตัดสินใจตั้งแต่แรกเมื่อคุณเผชิญหน้ากับพวกเขาและยึดมั่นในหลักการเหล่านั้น (KISS, YAGNI)

ดังนั้นสำหรับฉันแล้ว: - สร้าง 'ต้นแบบ' การทำงานพื้นฐานก่อนครอบคลุมหนึ่งบล็อกการทำงานของความต้องการ จำกัด ตัวเองจากการดำน้ำใน 'นี้อาจจะดี' / 'ฉันอาจต้องใช้สิ่งนี้ในภายหลัง' เว้นแต่ OBVIOUS บอกตัวเองว่าคุณไม่ต้องการมัน! (YAGNI) - เขียนการตัดสินใจที่คุณทำไว้เป็น 'แผนการเข้ารหัส' และยึดติดกับพวกเขาเช่นแท็ก php: ฉันใช้คำย่อเพราะสำหรับการโต้แย้งสถานการณ์ของฉัน .. ใช้และ ... ไม่ได้ - เพิ่มสไตล์พื้นฐาน แต่ จำกัด ตัวเองอีกครั้ง

จากนั้นขยายรหัสของคุณจนกว่าคุณจะถึงต้นแบบระดับที่สูงขึ้นซึ่งครอบคลุมบล็อกการทำงานที่มากขึ้น สอดคล้องกับมันทำให้โมเดล css ของคุณเติบโต ทันทีที่คุณต้องเผชิญกับการตัดสินใจที่มีผลกระทบต่อสิ่งที่คุณทำไปแล้ว (คุณจะต้อง) อ่านมันตัดสินใจและจดบันทึกในแบบแผนการเข้ารหัสว่าทำไมคุณถึงไปทางซ้ายหรือขวา

'Circle' แนวทางสู่ผลิตภัณฑ์ที่เป็นผู้ใหญ่และสุดท้าย

อย่ากลัวกับการตัดสินใจครั้งใหญ่ที่คุณอาจต้องเผชิญเพราะการกังวลกับพวกเขาอาจทำให้คุณเสียเวลามากกว่าที่จะแก้ไขมัน นอกจากนี้ไม่ต้องกังวลเกี่ยวกับชุมชนอินเทอร์เน็ตที่มองไหล่ของคุณด้วยความขมวดคิ้วในที่สุดเมื่อคุณมีผลิตภัณฑ์ที่ใช้งานได้คุณได้เรียนรู้มากและผู้พิพากษาจินตนาการของซอร์สโค้ดที่ไม่ดีนั้นน่ายินดีมากขึ้นโดย สิ่งต่อไปที่คุณสร้าง (สังเกตการวนซ้ำที่นี่)

แค่ 50cts ของฉัน


0

ในขณะที่คุณเปรียบเทียบหน้าเว็บกับบ้าน:

HTML = มูลนิธิ / CSS บ้าน = กำแพง / พิมพ์เขียว / วอลล์เปเปอร์

คุณจะลอยผนังกลางอากาศอย่างไรจนกว่าคุณจะสร้างฐานรากที่พวกเขานั่ง? คุณจะเขียน CSS เพื่อจัดรูปแบบหน้าของคุณได้อย่างไรจนกว่าคุณจะเขียนแท็ก HTML ที่คุณกำลังใช้สไตล์

CSS แต่ละชิ้นเป็นสไตล์แท็ก HTML เฉพาะ แท็กเหล่านั้นต้องมีอยู่เพื่อให้สามารถจัดสไตล์ได้ หากคุณไม่มี HTML เพื่อจัดรูปแบบไฟล์ CSS ควรจะว่างเปล่าเพราะสไตล์ใด ๆ ในนั้นซ้ำซ้อนเนื่องจากไม่มีลักษณะอะไรเลย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.