CSS มีอะไรที่ไม่ดีเลย

เมื่อฉันเห็นรหัสเริ่มต้นของเว็บไซต์และตัวอย่าง CSS จะอยู่ในไฟล์แยกต่างหากตั้งชื่อบางอย่างเช่น "main.css", "default.css" หรือ "Site.css" อย่างไรก็ตามเมื่อฉันเขียนโค้ดขึ้นหน้าฉันมักจะล่อลวง CSS ในบรรทัดกับองค์ประกอบ DOM เช่นโดยการตั้งค่า "ลอย: ขวา" บนภาพ ฉันรู้สึกว่านี่เป็น "การเข้ารหัสที่ไม่ดี" เนื่องจากเป็นตัวอย่างที่ไม่ค่อยได้ทำ

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

คำถาม: การใช้ CSS ในบรรทัดถือว่าไม่ดีแม้ว่าจะใช้กับองค์ประกอบนั้นเท่านั้นหรือไม่ ถ้าเป็นเช่นนั้นทำไม

ตัวอย่าง (อันนี้แย่ใช่ไหม):

<img src="myimage.gif" style="float:right" />

ต้องเปลี่ยนรหัส 100 บรรทัดเมื่อคุณต้องการทำให้ไซต์ดูแตกต่าง ที่อาจไม่ได้ใช้ในตัวอย่างของคุณ แต่ถ้าคุณใช้อินไลน์ CSS สำหรับสิ่งที่ชอบ

<div style ="font-size:larger; text-align:center; font-weight:bold">

ในแต่ละหน้าเพื่อแสดงส่วนหัวของหน้ามันจะง่ายกว่ามากในการรักษา

<div class="pageheader">  

หากมีการกำหนดส่วนหัวของหน้าในสไตล์ชีทเดียวดังนั้นหากคุณต้องการเปลี่ยนลักษณะที่ส่วนหัวของหน้าทั่วทั้งไซต์คุณเปลี่ยน CSS ในที่เดียว

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

ข้อดีของการมีไฟล์ css แตกต่างกันคือ

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

วิธี html5 ในการสร้างต้นแบบ css ที่รวดเร็ว

หรือ: <style>แท็กไม่ได้มีไว้สำหรับหัวอีกต่อไปแล้ว!

CSS การแฮ็ก

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

ไม่มีแอตทริบิวต์สไตล์แบบอินไลน์

อย่าสร้าง css แบบอินไลน์ของคุณโดยที่ฉันหมายถึง: <element style='color:red'>หรือแม้กระทั่ง<img style='float:right'>สะดวกมาก แต่ไม่ได้สะท้อนถึงตัวเลือกที่แท้จริงในไฟล์ css จริงในภายหลังและหากคุณเก็บไว้คุณจะเสียใจกับภาระการบำรุงรักษาในภายหลัง

ต้นแบบด้วย<style>แทน

จุดที่คุณจะใช้อินไลน์ css แทนใช้<style> องค์ประกอบในหน้า ลองดูสิ! มันทำงานได้ดีในเบราว์เซอร์ทั้งหมดดังนั้นจึงเหมาะสำหรับการทดสอบ แต่ช่วยให้คุณสามารถย้าย css ดังกล่าวไปยังไฟล์ css ทั่วโลกได้ทุกเมื่อที่คุณต้องการ / ต้องการ! (* โปรดทราบว่าตัวเลือกจะมีความเฉพาะเจาะจงในระดับหน้าเว็บแทนที่จะเป็นข้อมูลเฉพาะระดับเว็บไซต์ดังนั้นควรระมัดระวังให้กว้างเกินไป) เช่นเดียวกับในไฟล์ css ของคุณ:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

สร้างใหม่อินไลน์ css ของคนอื่น

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

เป็นการยากเล็กน้อยที่จะถ่ายโอนcss ทุก ๆ ชิ้นทันทีไปยังไฟล์ css ทั่วโลก แต่ด้วย<style>องค์ประกอบในหน้าตอนนี้เรามีทางเลือกอื่น

นอกเหนือไปจากคำตอบอื่น ๆ .... สากล

ขึ้นอยู่กับภาษาของเนื้อหา - บ่อยครั้งที่คุณต้องปรับแต่งสไตล์ขององค์ประกอบ

ตัวอย่างหนึ่งที่ชัดเจนคือภาษาจากขวาไปซ้าย

สมมติว่าคุณใช้รหัสของคุณ:

<img src="myimage.gif" style="float:right" />

ตอนนี้บอกว่าคุณต้องการให้เว็บไซต์ของคุณรองรับภาษา rtl - คุณต้องการ:

<img src="myimage.gif" style="float:left" />

ดังนั้นตอนนี้ถ้าคุณต้องการสนับสนุนทั้งสองภาษาไม่มีวิธีกำหนดค่าให้ลอยโดยใช้การกำหนดสไตล์แบบอินไลน์

ด้วย CSS สิ่งนี้จะได้รับการดูแลอย่างง่ายดายด้วยแอตทริบิวต์ lang

ดังนั้นคุณสามารถทำสิ่งนี้:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

การสาธิต

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

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

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

จุดทั้งหมดของ CSS คือการแยกเนื้อหาจากงานนำเสนอ ดังนั้นในตัวอย่างของคุณคุณกำลังผสมเนื้อหากับงานนำเสนอและนี่อาจ "ถือว่าเป็นอันตราย"

การใช้อินไลน์ CSS นั้นยากกว่าการดูแลรักษามาก

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

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

DRY เป็นแนวคิดที่ดีสำหรับรหัสที่เขียนด้วยลายมือ แต่ในรหัสที่สร้างด้วยเครื่องจักรฉันเลือกใช้ "Law of Demeter": "สิ่งที่อยู่ด้วยกันต้องอยู่ด้วยกัน" การจัดการโค้ดที่สร้างแท็กสไตล์ง่ายกว่าการแก้ไขสไตล์โกลบอลเป็นครั้งที่สองในไฟล์ CSS ที่ต่างกันและ "ระยะไกล"

คำตอบสำหรับคำถามของคุณ: ขึ้นอยู่กับ ...

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

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

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

แม้ว่าคุณจะใช้สไตล์เพียงครั้งเดียวในตัวอย่างนี้คุณยังคงผสมเนื้อหาและการออกแบบ ค้นหา "การแยกความกังวล"

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

นอกจากนี้การใช้คลาสอย่างรอบคอบนั้นมีประโยชน์หากเว็บไซต์ของคุณมีสคริปต์ ตัวอย่างเช่น libs JavaScript ยอดนิยมจำนวนมากเช่น JQuery ขึ้นอยู่กับคลาสเป็นตัวเลือก

ในที่สุดการใช้คลาสจะเพิ่มความชัดเจนเพิ่มเติมให้กับ DOM ของคุณเนื่องจากคุณมีตัวอธิบายอย่างมีประสิทธิภาพบอกให้คุณทราบว่าองค์ประกอบใดที่โหนดที่ระบุอยู่ในนั้น ตัวอย่างเช่น:

<div class="header-row">It's a row!</div>

มีความหมายมากกว่า:

<div style="height: 80px; width: 100%;">It's...something?</div>

css ในหน้าเป็นสิ่งที่เกิดขึ้นในขณะนี้เนื่องจาก Google ให้คะแนนว่าเป็นการมอบประสบการณ์ผู้ใช้ที่ดีกว่า css ที่โหลดจากไฟล์แยกต่างหาก ทางออกที่เป็นไปได้คือการวาง css ในไฟล์ข้อความโหลดได้ทันทีด้วย php และส่งออกไปยังส่วนหัวของเอกสาร ใน<head>ส่วนรวมถึงสิ่งนี้:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

ใส่ CSS ที่ต้องการในสไตล์ / style1.txt แล้วมันจะกระจายออกไปใน<head>ส่วนของเอกสารของคุณ ด้วยวิธีนี้คุณจะมี css ในหน้าพร้อมประโยชน์ของการใช้เทมเพลตสไตล์ style1.txt ซึ่งสามารถแชร์ได้ทุกหน้าและทุกหน้าช่วยให้สามารถทำการเปลี่ยนแปลงสไตล์ทั่วทั้งไซต์ผ่านไฟล์เพียงไฟล์เดียว นอกจากนี้วิธีนี้ไม่จำเป็นต้องให้เบราว์เซอร์ร้องขอไฟล์ css แยกจากเซิร์ฟเวอร์ (ซึ่งจะช่วยลดเวลาในการดึง / แสดงผล) เนื่องจากทุกสิ่งจะถูกส่งโดย php

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

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

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

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

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

รายการการปรับปรุงที่ไม่สมบูรณ์เช่นระบบการแสดงผลอาจทำคือ:

• แทนที่การอ้างอิงรูปภาพด้วยขนาดภาพเป็นวิวพอร์ตของผู้ดู
• ภาพอินไลน์ที่มองเห็นได้บนครึ่งหน้าบน
• ตัวแปร CSS แบบอินไลน์
• โหลดส่วนประกอบเพิ่มเติมล่วงหน้า
• ลดขนาด HTML และ CSS

นอกเหนือจากคำตอบอื่น ๆ แล้วคุณไม่สามารถกำหนดเป้าหมายองค์ประกอบหลอกหรือองค์ประกอบหลอกใน CSS แบบอินไลน์