นักพัฒนา CSS ทำอะไรและทำไมคุณถึงต้องการ

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

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

นักพัฒนา CSS ทำอะไร?

เริ่มจากพื้นฐานกันก่อน เหตุใด CSS จึงมีความสำคัญ และนักพัฒนา CSS ควรทำอย่างไร

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

การเขียน Tidy HTML มีความสำคัญเสมอ

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

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

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

การออกแบบโดยรวมมักจะกำหนดวิธีที่เราจัดระเบียบองค์ประกอบ HTML ต่างๆ นักพัฒนา CSS ทำงานอย่างใกล้ชิดกับนักออกแบบ และไม่ใช่นักออกแบบทุกคนที่ใช้เครื่องมือเดียวกันเพื่อจัดเตรียมการออกแบบ ความคุ้นเคยกับ Sketch, Photoshop, InVision หรือ Figma และสามารถ "แบ่ง" การออกแบบเป็นทักษะที่นักพัฒนา CSS ต้องมี เราควรคำนึงถึงวิธีการจัดโครงสร้างส่วนประกอบเพื่อให้สามารถใช้การออกแบบได้ในเวลาเดียวกัน การใช้รูปแบบการตั้งชื่อที่ดี เช่น BEM หรือ OOCSS ควรป้องกันไม่ให้เขียน HTML ที่บวมหรือโค้ด CSS ที่ไม่สามารถบำรุงรักษาได้

JavaScript อยู่ทุกที่

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

โลกของ JavaScript มีการพัฒนาอย่างรวดเร็ว และบางครั้งดูเหมือนว่าเฟรมเวิร์กและเครื่องมือใหม่ๆ จะปรากฏขึ้นทุกวัน เนื่องจากความนิยมอย่างมากของ JavaScript การอยู่ในวงจรจึงเป็นสิ่งสำคัญหากคุณต้องการใช้แนวทางปฏิบัติที่ดีที่สุดล่าสุดและมอบประสบการณ์ที่สนุกสนานที่สุดให้กับผู้ใช้ปลายทาง

CSS

นั่นก็จริงสำหรับ CSS เช่นกัน แม้ว่าหลายคนจะโต้แย้งว่า CSS ไม่ได้มีการพัฒนาในระดับที่ใกล้เคียงกับ JavaScript อย่างไรก็ตาม คุณลักษณะใหม่ เช่น ตัวแปร CSS ตาราง CSS หรือแม้แต่ Flexbox ต้องใช้เวลาพอสมควรในการควบคุม

นอกจากนี้ยังมีการรองรับเบราว์เซอร์ซึ่งยังคงสร้างปัญหาได้แม้ในปัจจุบัน เว็บไซต์ของคุณอาจดูเหมือนเงินหลายล้านเหรียญในเบราว์เซอร์รุ่นใหม่ แต่ไม่มากนักในเบราว์เซอร์รุ่นเก่า Flexbox อาจได้รับการสนับสนุนใน IE11 แต่แล้วอีกครั้ง อาจใช้งานไม่ได้ตามที่คาดไว้ การรู้วิธีหลีกเลี่ยงปัญหาเหล่านี้เป็นส่วนหนึ่งของงานของนักพัฒนา CSS

โชคดีที่ชุมชนมีประโยชน์มาก และไซต์เช่น Flexbugs หรือ Gridbugs สามารถประหยัดเวลาได้มาก

เครื่องมือ CSS เทคนิคและหลักการ

บางครั้งเราสามารถพึ่งพาเครื่องมือต่างๆ เช่น task runners หรือ bundlers เช่น Grunt, Gulp และ webpack เพื่อช่วยให้เราส่งมอบโค้ดที่เชื่อถือได้ คุณสามารถเพิ่มพลังให้โค้ดของคุณด้วย linters, minifiers, babel หรือ PostCSS เพื่อแปลงรหัส

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

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

ฉันจะบอกว่านี่เป็นเรื่องจริงโดยเฉพาะอย่างยิ่งเมื่อทำงานกับ CSS และนี่คือเหตุผล:

หากคุณไม่เคยพยายามแก้ปัญหาดัชนี z มาก่อน คุณจะไม่มีวันเรียนรู้เกี่ยวกับการซ้อนบริบท หากคุณไม่เคยพยายามแทนที่คลาส Bootstrap คุณจะไม่มีวันเรียนรู้เกี่ยวกับความเฉพาะเจาะจง หากคุณไม่เคยพยายามแก้ไขปัญหาลูกลอย คุณจะไม่มีวันเรียนรู้เกี่ยวกับรูปแบบกล่อง

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

Cascade เป็นคุณลักษณะที่ดีที่สุดใน CSS และควรทำงานให้คุณ ไม่ใช่กับคุณ นักพัฒนาบางคนหลีกเลี่ยงมันด้วยการคิดค้นแนวทางที่กำหนดเอง เช่น CSS-in-JS หากคุณแพ็ค CSS ของคุณในสภาพแวดล้อมที่ห่อหุ้ม เช่น React คุณจะไม่สามารถใช้ CSS ที่อื่นได้ ฉันสงสัยว่านี่คือแนวทางที่คุณต้องการในแพลตฟอร์มที่ปรับขนาดได้ของคุณ หากคุณมีปัญหากับน้ำตก ให้เรียนรู้ที่จะยอมรับมัน แล้วเรียนรู้วิธีทำให้เชื่อง

ในขณะที่ฉันกำลังเตรียมบทความนี้ Max Bock เขียนเกี่ยวกับความคิดของ CSS และนี่คือสิ่งที่นักพัฒนา CSS ต้องทำอย่างแม่นยำ นักพัฒนา CSS คิดอย่างถี่ถ้วน คาดการณ์การแก้ไขเนื้อหา และหลีกเลี่ยงตัวเลขคงที่ทุกครั้งที่ทำได้ ขณะที่พยายามเขียนโค้ดให้น้อยที่สุดเท่าที่จะทำได้โดยไม่แทนที่ค่าดีฟอลต์และบริบท

ทำไมคุณถึงต้องการนักพัฒนา CSS?

นักพัฒนา frontend หรือ full-stack ส่วนใหญ่สามารถเขียนโค้ด CSS ได้ แต่ไม่ใช่ว่าทุกคนจะสามารถแก้ไขจุดบกพร่องของ CSS ทั้งหมดหรือใช้การออกแบบโดยไม่ทำให้โค้ด HTML ซับซ้อนหรืออาศัย JavaScript เมื่อไม่จำเป็น

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

มาตรฐานการเข้ารหัส CSS

ก่อนที่จะเขียนโค้ดใดๆ ควรมีกฎพื้นฐานบางประการเกี่ยวกับการเขียนโค้ด นักพัฒนา CSS ควรเคารพมาตรฐานการเข้ารหัส—จำเป็นสำหรับการบำรุงรักษาและความสามารถในการปรับขนาดของโปรเจ็กต์

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

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

การใช้งานการออกแบบ CSS

ก่อนแปลงการออกแบบเป็นโค้ด คุณควรใช้เวลาในการทำความเข้าใจทุกหน้า เลย์เอาต์ และส่วนประกอบ หากเป็นไปได้ ให้ผ่าทุกหน้า สร้างรายการหน้าและส่วนประกอบ แล้วพยายามค้นหารูปแบบ

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

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

จัดระเบียบโค้ด CSS ของคุณ

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

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

รหัส CSS ในการผลิต

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

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

นักพัฒนา CSS เขียนโค้ด HTML และ JavaScript ด้วย นั่นหมายความว่าการส่งมอบทรัพย์สินเป็นความรับผิดชอบของผู้พัฒนา CSS นักพัฒนา CSS ควรรับผิดชอบในการโหลดฟอนต์ แยก Critical CSS โดยใช้การโหลด JavaScript แบบหน่วงเวลาและแบบอะซิงโครนัส และจัดเตรียมรูปภาพที่ตอบสนอง

ไม่มีเทคนิคใดที่นำไปใช้ได้ง่าย และไม่มีสัญลักษณ์แสดงหัวข้อย่อยสีเงิน

นักพัฒนา CSS ทำอะไรให้คุณได้บ้าง

ทั้งหมดข้างต้นอธิบายได้ว่าทำไมคุณถึงต้องการนักพัฒนา CSS โดยเฉพาะ นี่เป็นเพียงสิ่งสำคัญบางส่วนที่พวกเขาจัดการ:

• ตรวจสอบให้แน่ใจว่าสมาชิกโครงการทุกคนยึดมั่นในมาตรฐานการเข้ารหัส
• ใช้การออกแบบ
• จัดระเบียบรหัส
• เขียนโค้ด
• แก้ไขข้อบกพร่อง
• เรียนรู้เทคนิคใหม่ๆ
• ปรับปรุงรหัส

ห่อ

เป็นเวลานานเกินไป คำถามเกี่ยวกับการดำรงอยู่และความสำคัญของบทบาทของนักพัฒนา CSS สนับสนุนการอภิปรายที่ไม่สร้างสรรค์และมีความหมายโดยเฉพาะอย่างยิ่ง มาพยายามตกลงและยอมรับนักพัฒนา CSS ว่าเป็นบทบาทที่เหมาะสมกันทุกครั้ง

ในบทความ The Great Divide ของเขา Chris Coyier กล่าวถึงผู้นำด้านเทคโนโลยีบางคน และส่วนใหญ่เห็นด้วยว่าควรมีการแบ่งแยก ควรมีบทบาทแบบ CSS ที่ไม่ต้องการความรู้เกี่ยวกับเฟรมเวิร์ก JavaScript สมัยใหม่ อาจช่วยได้ถ้าคุณรู้มากกว่าแค่ “แค่ CSS” แต่บทบาทควรมีอยู่ และควรได้รับการยอมรับว่าเท่ากับบทบาทที่ใช้ JavaScript

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

อ่านเพิ่มเติมในบล็อก Toptal Engineering:

• วิธีเข้าถึงแอนิเมชั่น SVG ใน CSS