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

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

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

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

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

อัตรารายชั่วโมงอิสระเทียบกับเงินเดือน

การเขียน HTML ให้เป็นระเบียบมีความสำคัญเสมอ

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

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

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

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

JavaScript อยู่ทุกที่

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

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

CSS

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

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

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

ความเสี่ยงจากอัตราแลกเปลี่ยนคืออะไร?

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

บางครั้งเราอาจต้องใช้เครื่องมืออย่างเช่น Task Runner หรือ Bundlers เช่น Grunt, Gulp และ webpack เพื่อช่วยในการส่งมอบโค้ดที่เชื่อถือได้ คุณสามารถใส่รหัสของคุณมากเกินไปด้วยผ้าสำลีตัวย่อสัญญาณ Babel หรือ PostCSS เพื่อถ่ายทอดรหัส

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

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

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

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

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

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

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

ทำไมคุณต้องมี CSS Developer?

นักพัฒนาส่วนหน้าหรือแม้แต่เต็มสแต็กส่วนใหญ่สามารถเขียนโค้ด 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 แบบเลื่อนและแบบ async และให้รูปภาพที่ตอบสนอง

ไม่มีเทคนิคใดที่ใช้งานง่ายและไม่มีกระสุนเงิน

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

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

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

ห่อ

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

ในบทความของเขา ความแตกแยกครั้งใหญ่ Chris Coyier พูดถึงผู้นำเทคโนโลยีบางคนและส่วนใหญ่เห็นด้วยว่าควรมีการแบ่งแยกควรมีบทบาทตาม CSS ที่ไม่จำเป็นต้องมีความรู้เกี่ยวกับกรอบ JavaScript สมัยใหม่ อาจช่วยได้ถ้าคุณรู้มากกว่า 'แค่ CSS' แต่ควรมีบทบาทอยู่และควรยอมรับว่าเท่าเทียมกับบทบาทที่ใช้ JavaScript

การออกแบบประสบการณ์สเก็ตช์กับอะโดบี

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

ทำความเข้าใจพื้นฐาน

นักพัฒนา CSS คืออะไร?

นักพัฒนา CSS คือนักพัฒนาส่วนหน้าซึ่งมีหน้าที่พื้นฐานในการส่งมอบโค้ด CSS ที่มีประสิทธิภาพสูงดูแลรักษาได้ง่ายและปรับขนาดได้

ใครเป็นผู้พัฒนา CSS

Håkon Wium Lie และ Bert Bos เริ่มต้นแนวคิดแรกสำหรับ CSS ในปี 1994 CSS อย่างเป็นทางการในเดือนธันวาคม 2539 CSS ได้รับการดูแลโดย World Wide Web Consortium (W3C)

CSS คืออะไรและทำงานอย่างไร

CSS ย่อมาจาก cascade style sheets ประกอบด้วยชุดของกฎที่สามารถนำไปใช้กับเอกสารมาร์กอัปเช่น HTML, SVG หรือ XML ซึ่งส่งผลให้ได้ผลลัพธ์ที่มีสไตล์

เหตุใดส่วนหน้าจึงสำคัญ

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

การพัฒนาส่วนหน้าเป็นอาชีพที่ดีหรือไม่?

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

นักพัฒนาเว็บควรมีทักษะอะไรบ้าง?

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