ฉันจะเขียน HTML, CSS และ JavaScript เพื่อให้นักพัฒนาซอฟต์แวร์ส่วนหลังทำงานได้ง่ายขึ้นได้อย่างไร


11

เมื่อฉันได้รับการออกแบบจากนักออกแบบฉันจะได้มันเป็นไฟล์ PSD (Photoshop) ฉันคาดหวังว่าชื่อเลเยอร์และโฟลเดอร์ที่เหมาะสมมักจะเป็น PSD ที่สะอาดและมีการจัดการ จาก desigbn นี้ฉันพัฒนา HTML, CSS และ JavaScript และส่งมอบให้กับนักพัฒนาส่วนหลัง เพื่อให้ง่ายสำหรับพวกเขาที่จะเข้าใจฉัน

  • เขียนรหัสความหมาย
  • เก็บ JavaScript และ CSS ไว้ในไฟล์ภายนอก
  • เพิ่มความคิดเห็นที่เป็นประโยชน์ในไฟล์ HTML, CSS และ JS
  • ใช้สไปรต์ CSS (แม้ว่านักพัฒนาจะไม่ชอบ)
  • ใช้แผ่นหม้อไอน้ำ HTML5
  • ใช้ jQuery สำหรับ JavaScript
  • พยายามใช้แท็ก HTML5 และ CSS3 ใหม่ทุกครั้งที่ทำได้และ
  • ส่งไฟล์ Zip ที่มี HTML, CSS, JS และรูปภาพ

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

ฉันต้องการรับฟังจากนักพัฒนาแบ็คเอนด์และนินจา CSS อื่น ๆ สิ่งที่คนอื่นสามารถทำได้ในแง่ของการจัดระเบียบไฟล์และมาร์กอัพเพื่อทำให้การรวมเข้ากับระบบแบ็คเอนด์ง่ายขึ้น (เช่นเทคโนโลยีแบ็คเอนด์, PHP, .NET , Ruby เป็นต้น) ไคลเอนต์ที่แตกต่างกันใช้ระบบที่ต่างกัน


ฉันหวังว่า devs ส่วนท้ายมากขึ้นถามคำถามที่คล้ายกัน
Erik Reppen

คำตอบ:


3

คำตอบมากมายเหล่านี้จะครอบคลุมแนวความคิดที่กว้างขวาง แต่นี่คือคำตอบส่วนตัวของฉัน:

  • ออกจากห้องในแบบฟอร์มการออกแบบสำหรับข้อความแสดงข้อผิดพลาด
  • อย่าใส่ป้ายกำกับในกล่องป้อนข้อมูล!
  • ใส่ CSS และ JavaScript ของคุณลงในไฟล์แยกต่างหากเว้นแต่คุณจะรู้ว่าคุณกำลังทำอะไรและรู้สึกไม่ดีกับมัน
  • รักษาองค์ประกอบการออกแบบเหมือนกันระหว่างหน้า มันน่ารำคาญเมื่อองค์ประกอบการออกแบบ (เช่นกล่อง "ดูล่าสุด") มีมาร์กอัปที่แตกต่างกันในทุกหน้า
  • อย่าทำสิ่งที่ง่ายสำหรับคุณทำในสิ่งที่ถูกต้อง <button>แท็กดูด backround-imageสำหรับสิ่งที่ควร<img>ดูดแท็ก
  • ตรวจสอบให้แน่ใจว่าหากคุณกำลังสร้างองค์ประกอบของหน้าเว็บ ฉันรู้ว่านักพัฒนา front-end ที่ดีที่สุดทำสิ่งนี้ แต่ฉันมีอินสแตนซ์มากมายที่มีคนใช้ภาพเดียวในสิ่งที่ควรเป็นสถานการณ์ฝาครอบด้านบน / ล่าง โปรแกรมเมอร์ไม่ชอบเปิด Photoshop
  • พิสูจน์อักษรแม่แบบของคุณ โปรแกรมเมอร์ (คนดี) เป็นคนที่ทุ่มเทและมีรายละเอียด หากพวกเขาเริ่มเห็นปัญหาในการออกแบบของคุณ (บางทีการนำทางส่วนท้ายมีการสะกดผิดหรือสะกดไม่สอดคล้องกัน) มันจะทำให้พวกเขาถามคำถามและทำให้งานช้าลง

ในที่สุดและอาจสำคัญที่สุด:

  • เรียนรู้รูปแบบพื้นฐานของภาษาที่กำลังพัฒนาในส่วนหลัง ความสามารถในการมองไปที่แม่แบบ PHP และเข้าใจไวยากรณ์พื้นฐานอยู่เบื้องหลังforeachหรือifคำสั่งและวิธีการจัดรูปแบบechoคำสั่งหรือย้าย<?php ?>แท็กไปรอบ ๆ จะช่วยเพิ่มมูลค่าของคุณเป็นนักพัฒนา front-end - ฉันรักเมื่อ front-end ความต้องการของนักพัฒนา เพื่อทำการเปลี่ยนแปลงอย่างง่ายและสามารถทำได้ในเทมเพลตแทนการส่ง zip ใหม่ให้กับไฟล์ทั้งหมดของพวกเขา
  • เป็นภาคผนวกให้เรียนรู้การใช้ซอฟต์แวร์ควบคุมเวอร์ชัน คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญ แต่ถ้าฉันสามารถมองที่ต่างแทนที่จะต้องลองและคิดออกว่ามีการเปลี่ยนแปลงอะไรระหว่างไฟล์ซิปสองไฟล์มันทำให้งานของฉันง่ายขึ้นเป็นร้อยเท่า

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


เคล็ดลับยอดเยี่ยม +1 ของ Jonathan แต่ทำไม "อย่าใส่ป้ายกำกับในกล่องป้อนข้อมูล!"
Jitendra Vyas

7

สิ่งที่ชัดเจนที่ฉันสามารถคิดได้ว่ามันจะทำให้ชีวิตของคนแบ็คเอนด์ง่ายขึ้นคือความเรียบง่ายในพฤติกรรม เมื่อออกแบบองค์ประกอบของหน้าเว็บที่มีพฤติกรรมต่าง ๆ (roll-overs, เมนูและอื่น ๆ ) พฤติกรรมทั้งหมดนี้ควรเป็นมาตรฐานในลักษณะทั่วไปเพื่อให้ผู้พัฒนาไม่ต้องเปลี่ยนกลับไปใช้แผนภูมิบางอย่างเพื่อพิจารณาว่าฟังก์ชันใดที่เขา ต้องเรียกเพื่อให้เพจทำงาน

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

พื้นที่ของหน้าไม่ควรข้ามขอบเขตการออกแบบที่เฉพาะเจาะจง รายการจากองค์ประกอบหนึ่งไม่ควรก้าวก่ายรายการจากองค์ประกอบอื่น

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


3

โปรดทราบว่าบางครั้งคุณต้องเลือกระหว่างการทำให้ง่ายต่อการปรับเปลี่ยนโซลูชันสำหรับนักพัฒนาส่วนหลังและทำสิ่งที่ปรับให้เหมาะสม

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

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

เช่นเดียวกันกับการรวมและการลดขนาดไฟล์ CSS และ JavaScript คุณต้องทำเพื่อเว็บไซต์บางแห่ง แต่ต้องใช้ความพยายามเป็นพิเศษ

มันเป็นสิ่งเดียวกันสำหรับ CDN คุณต้องใช้มันสำหรับเว็บไซต์ขนาดใหญ่ แต่การเปลี่ยนแปลงจะทำได้ยาก ตัวอย่างเช่นหากคุณเปลี่ยนไฟล์ CSS คุณจะต้องบังคับให้เบราว์เซอร์ดาวน์โหลดไฟล์ใหม่โดยแก้ไข URI ให้เป็นไฟล์cdn.example.com/g.css?r=2จากนั้นcdn.example.com/g.css?r=3เป็นต้น

นอกจากนี้"ง่ายขึ้น" ก็สัมพันธ์กัน ดูตัวอย่างแนวทางในการเขียนโค้ด CSS: ส่วนตัวฉันชอบหนึ่งสไตล์ต่อบรรทัดโดยไม่มีช่องว่าง:

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

ในขณะที่คนส่วนใหญ่จะเกลียดไวยากรณ์นี้และชอบคนที่ฉันเกลียดและหาอ่านยาก (ไม่ฉันไม่บ้า):

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

ในทำนองเดียวกันการใช้ jQuery ไม่ได้หมายความว่าคุณจะช่วยให้นักพัฒนาซอฟต์แวร์ส่วนหลังสามารถแก้ไขไฟล์ของคุณได้ง่ายขึ้นเพราะนักพัฒนาบางคนมีประสบการณ์มากกว่ากับ Prototype หรือเฟรมเวิร์กอื่น ๆ

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


1
ใช่ฉันได้ยินจากนักพัฒนาแล้วว่าพวกเขาไม่ชอบ CSS Sprite แต่มันดีมากสำหรับการเพิ่มประสิทธิภาพ ฉันคิดว่าฉันควรจะติดมันและ Developer ควรมีทักษะ Photoshop ขั้นพื้นฐาน
Jitendra Vyas

เมื่อฉันใช้ jQuery มันจะตัดสินใจแล้วกับนักพัฒนาหรือฉันออกจากการโต้ตอบกับนักพัฒนา
Jitendra Vyas

1
CSS บรรทัดเดียวไม่ได้ให้มุมมองที่ดีใน Github เมื่อเราเปลี่ยนบางอย่าง
Jitendra Vyas

@jitendravyas ถ้าคุณคิดว่า devs ที่ได้รับการสนับสนุนควรมีทักษะการถ่ายเอกสารเบื้องต้นจากนั้นคุณควรมีทักษะการแบ็กเอนด์ขั้นพื้นฐาน
Raynos

มีเครื่องมือที่สามารถทำให้สไปรต์ง่ายต่อการใช้ / บำรุงรักษา Back end devs ไม่ควรเป็นคนที่ดูแลพวกมันตั้งแต่แรก สิ่งที่พวกเขาต้องนำไปใช้คือคลาสที่เหมาะสมหรือบริบทของเอกสารคอนเทนเนอร์
Erik Reppen

2

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

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


1

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

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

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

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

ชอบการมอบหมายเหตุการณ์บนคอนเทนเนอร์ UI เพื่อกำหนดผู้ฟังโดยตรงไปยังโหนดจุดสิ้นสุดเช่นปุ่ม องค์ประกอบ UI นั้นอาจทำงานกับ HTML แบบคงที่ได้ในตอนนี้ แต่คุณไม่มีทางรู้ว่าเมื่อมีใครบางคนต้องการที่จะสามารถคัดลอกและเขียน HTML ใหม่ภายในด้วย innerHTML หรืออะไรบางอย่าง หากคอนเทนเนอร์ยังคงอยู่และมีการมอบหมายกิจกรรมทั้งหมด (ดูวิธีการ jquery 'on') คุณไม่ต้องกังวลเกี่ยวกับสิ่งนั้นและพวกเขาอาจไม่เคยเรียนรู้วิธีที่ยากลำบากในการแทนที่ HTML break listeners

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

เท่าที่เลย์เอาต์ให้ HTML น้อยที่สุดความหมายและหลีกเลี่ยงการใส่ div HTML ที่มีน้อยก็จะมีปัญหาเรื่องโครงร่างที่ง่ายขึ้นสำหรับการวินิจฉัยหน้าใหม่

ใช้ชื่อคลาสที่อธิบายตนเองสำหรับยูทิลิตี้ CSS คลาส "row" น่าจะชัดเจนสำหรับ noobs CSS มากกว่า "clearfix"

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

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

และแน่นอนที่จุดเริ่มต้นของโครงการทำให้พวกเขาเห็นด้วยอย่างน้อยสิ่งนี้: Back และ front end เชื่อมต่อผ่าน HTML และ JSON เท่านั้น อย่าให้พวกเขาใช้สิ่งที่ "เขียน JavaScript ให้คุณ!" มันเปื้อนเลือดและฝันร้ายในการบำรุงรักษา

เช่นเดียวกับทุกสิ่งที่เกี่ยวข้องกับการพัฒนาชอบ DRY และความเรียบง่าย


0

มันจะไม่ให้ฉันแค่คอมเม้นท์ (งี่เง่า) แต่เป็นบันทึกส่วนตัวฉันจะพูดถึงฉันทำงานกลับด้วย PHP coder ทุกวัน (รวมทั้งช่วยเหลืองานของเขา) และเครื่องมือที่ง่ายที่สุดที่เราพบคือ เพื่อใช้ประโยชน์จากกล่องเครื่องมือของKomodoและรายการตัวแปร "ถ่ายโอน" ของแต่ละมุมมอง / คอนโทรลเลอร์ / โมเดลใน toolboxx ดังนั้นเมื่อใดก็ตามหากฉันกำลังมองหาการออกแบบหน้ารอบชุดข้อมูลที่ส่งไปยังหน้านั้นฉัน สามารถดูในกล่องเครื่องมือและดูว่ามีการส่งข้อมูลอะไรและ "พิมพ์" "มันจะถูกส่งเป็นเช่นเดียวกับในทางกลับกันในตอนท้ายของเขาเพียงปลาย

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