หลักการตั้งชื่อสำหรับเนื้อหา (รูปภาพ, css, js)?

ฉันยังคงดิ้นรนเพื่อค้นหารูปแบบการตั้งชื่อที่ดีสำหรับเนื้อหาเช่นไฟล์รูปภาพ js และ css ที่ใช้ในโครงการเว็บของฉัน

ดังนั้นปัจจุบันของฉันจะเป็น:

CSS: style-{name}.css
ตัวอย่าง: style-main.css, style-no_flash.css,style-print.cssฯลฯ

JS: script-{name}.js
ตัวอย่าง: script-main.js,script-nav.jsฯลฯ

รูปภาพ: {imageType}-{name}.{imageExtension}
{imageType}เป็นสิ่งเหล่านี้

• ไอคอน (เช่นไอคอนเครื่องหมายคำถามสำหรับเนื้อหาวิธีใช้)
• img (เช่นภาพส่วนหัวแทรกผ่าน<img />องค์ประกอบ)
• ปุ่ม (เช่นปุ่มส่งแบบกราฟิก)
• bg (ภาพใช้เป็นภาพพื้นหลังใน css)
• สไปรต์ (รูปภาพใช้เป็นภาพพื้นหลังใน css และมี "เวอร์ชัน" หลายรายการ)

ชื่อตัวอย่างจะเป็น: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gifฯลฯ

คุณคิดว่าอย่างไรและหลักการตั้งชื่อของคุณคืออะไร?

ฉันวางไฟล์ CSS ในโฟลเดอร์css, Javascript ในjs, รูปภาพในimages, ... เพิ่มโฟลเดอร์ย่อยตามที่เห็นสมควร ไม่จำเป็นต้องมีหลักการตั้งชื่อใด ๆ ในระดับของไฟล์แต่ละไฟล์

ฉันได้สังเกตเห็นมากนักพัฒนาส่วนหน้าจะย้ายออกจากcssและjsในความโปรดปรานของstylesและscriptsเพราะมีสิ่งอื่น ๆ โดยทั่วไปในการมีเช่น.less, .stylและเช่นเดียวกับสำหรับบางคน.sass .coffeeความจริงก็คือการใช้การเลือกเทคโนโลยีเฉพาะในองค์กรโฟลเดอร์ที่คุณเลือกเป็นความคิดที่ไม่ดีแม้ว่าทุกคนจะทำก็ตาม ฉันจะใช้มาตรฐานที่ฉันเห็นจากนักพัฒนาที่ได้รับการยอมรับอย่างสูงต่อไปนี้:

• src/html
• src/images
• src/styles
• src/styles/fonts
• src/scripts

และปลายทางของพวกเขาสร้างสิ่งที่เทียบเท่าซึ่งบางครั้งคำนำหน้าdestขึ้นอยู่กับสิ่งที่พวกเขากำลังสร้าง:

• ./
• images
• styles
• styles/fonts
• scripts

สิ่งนี้ช่วยให้ผู้ที่ต้องการรวมไฟล์ทั้งหมดเข้าด้วยกัน (แทนที่จะแยกsrcไดเร็กทอรีออก) เพื่อเก็บและเก็บสิ่งต่างๆที่เกี่ยวข้องอย่างชัดเจนสำหรับไฟล์ที่แตกออก

ฉันไปไกลกว่านี้และเพิ่ม

• scripts/before
• scripts/after

ซึ่งจะแบ่งออกเป็นสองmain-before.min.jsและmain-after.min.jsสคริปต์หนึ่งสำหรับส่วนหัว (มีองค์ประกอบที่จำเป็นnormalizeและmodernizrต้องทำงานก่อนเป็นต้น) และafterสำหรับสิ่งสุดท้ายในเนื้อหาเนื่องจากจาวาสคริปต์นั้นสามารถรอได้ สิ่งเหล่านี้ไม่ได้มีไว้สำหรับการอ่านเหมือนกับหน้าหลักของ Google

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

วันนี้หากคุณไม่ได้ใช้กระบวนการสร้างบางอย่างเช่นอึกหรือฮึดฮัดแสดงว่าคุณไปไม่ถึงเป้าหมายประสิทธิภาพที่เน้นอุปกรณ์เคลื่อนที่ส่วนใหญ่ที่คุณควรพิจารณา

/ สินทรัพย์ /
  / Css
  / รูปภาพ
  / Javascript (หรือสคริปต์)
    / ลดขนาด
    / ที่มา

เป็นโครงสร้างที่ดีที่สุดที่ฉันเคยเห็นและเป็นโครงสร้างที่ฉันชอบ ด้วยโฟลเดอร์คุณไม่จำเป็นต้องนำหน้า CSS ฯลฯ ด้วยชื่อที่สื่อความหมาย

สำหรับไซต์ขนาดใหญ่ที่ css อาจกำหนดภาพพื้นหลังจำนวนมากรูปแบบการตั้งชื่อไฟล์สำหรับเนื้อหาเหล่านั้นมีประโยชน์มากสำหรับการเปลี่ยนแปลงในภายหลัง

ตัวอย่างเช่น:

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

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

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

คุณสามารถตั้งชื่อได้ดังนี้:

/ assets / css / - สำหรับไฟล์ CSS

/ assets / font / - สำหรับไฟล์แบบอักษร (ส่วนใหญ่คุณสามารถไปที่แบบอักษรของ Google เพื่อค้นหาแบบอักษรที่ใช้งานได้)

/ assets / images / - สำหรับไฟล์รูปภาพ

/ assets / scripts / หรือ / assets / js / - สำหรับไฟล์ JavaScript

/ assets / media / - สำหรับวิดีโอและอื่น ๆ ไฟล์.

คุณยังสามารถแทนที่ "assets" ด้วยชื่อโฟลเดอร์ "resource" หรือ "files" และเก็บชื่อโฟลเดอร์ย่อยไว้ได้ การมีโครงสร้างโฟลเดอร์คำสั่งเช่นนี้ไม่สำคัญมากสิ่งสำคัญเพียงอย่างเดียวคือคุณต้องจัดเรียงไฟล์ตามรูปแบบ เช่นการสร้างโฟลเดอร์ "/ css /" สำหรับไฟล์ CSS หรือ "/ images /" สำหรับไฟล์รูปภาพ

ครั้งแรกผมแบ่งออกเป็นโฟลเดอร์: css, js,img ,

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

css/mysite.main.css css/mysite.main.js

ไฟล์อื่น ๆ อาจเป็นเช่น

js/jquery-1.6.1.js js/jquery.validate.js

ในที่สุดภาพจะถูกแบ่งตามการใช้งาน

• img/btn/submit.png ปุ่ม
• img/lgo/mysite-logo.png โลโก้
• img/bkg/header.gif พื้นหลัง
• img/dcl/top-left-widget.jpg องค์ประกอบรูปลอก
• img/con/portait-of-something.jpg ภาพเนื้อหา

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

ฉันมักจะหลีกเลี่ยงอะไรทั่วไปเช่นสิ่งที่ smdrager แนะนำ "mysite.main.css" ไม่มีความหมายอะไรเลย

"mysite" คืออะไร ?? อันนี้ฉันกำลังทำอยู่? ถ้าเป็นเช่นนั้นก็ชัดเจนจริงๆ แต่ฉันคิดอยู่แล้วว่ามันอาจจะเป็นอย่างไรและถ้ามันชัดเจน!

"หลัก" คืออะไร? คำว่า "Main" ไม่มีคำจำกัดความที่นอกเหนือจากความรู้ของ coders เกี่ยวกับสิ่งที่อยู่ในไฟล์ css นั้น

แม้ว่าจะตกลงในบางสถานการณ์ แต่ให้หลีกเลี่ยงชื่อเช่น "top" หรือ "left" เช่นกัน: "top-nav.css" หรือ "top-main-logo.png"
คุณอาจต้องการใช้สิ่งเดียวกันในที่อื่นและการวางภาพไว้ในส่วนท้ายหรือในเนื้อหาของหน้าหลักที่เรียกว่า "top-banner.png" นั้นสับสนมาก!

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

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

ที่กล่าวว่าฉันทำสิ่งนี้กับไฟล์ไลบรารี JS และ config (ฯลฯ ) เช่น libSomeLibrary.php หรือ JSSomeScript.php เนื่องจากไฟล์ PHP และ JS ถูกรวมหรือใช้ในพื้นที่ต่างๆภายในไฟล์อื่น ๆ และการมีข้อมูลว่าจุดประสงค์หลักของไฟล์ภายในชื่อนั้นมีประโยชน์อย่างไร

เช่น: การดูชื่อไฟล์require('libContactFormValidation.php');มีประโยชน์ ฉันรู้ว่ามันเป็นไฟล์ไลบรารี (lib) และจากชื่อมันทำอะไร

สำหรับโฟลเดอร์รูปภาพฉันมักจะมีimages/content-images/และimages/style-images/ . ฉันไม่คิดว่าจะต้องมีการแยกจากกันอีก แต่ก็ขึ้นอยู่กับโครงการอีกครั้ง

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

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
ฯลฯ

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

อย่างไรก็ตามเมื่อเป็นเช่นนี้กฎที่สำคัญที่สุดข้อหนึ่งที่ต้องปฏิบัติตามก็คือความมั่นคง !
ตรวจสอบให้แน่ใจว่าคุณปฏิบัติตามตรรกะและรูปแบบเดียวกันกับหลักการตั้งชื่อทั้งหมดของคุณ!
ตั้งแต่ชื่อไฟล์ css ธรรมดาไปจนถึงไฟล์ไลบรารี PHP ไปจนถึงชื่อตารางฐานข้อมูลและคอลัมน์

นี่เป็นคำถามเก่า แต่ยังใช้ได้

คำแนะนำปัจจุบันของฉันคือไปกับบางสิ่งในบรรทัดนี้:

• สินทรัพย์ (หรือเนื้อหาเว็บหรือเนื้อหา - www); สิ่งนี้มีไว้สำหรับเนื้อหาคงที่ที่ไคลเอ็นต์ใช้ (เบราว์เซอร์)
  • ข้อมูล; ไฟล์ xml บางไฟล์และสิ่งอื่น ๆ
  • แบบอักษร
  • ภาพ
  • สื่อ
  • รูปแบบ
  • สคริปต์
  • lib (หรือบุคคลที่สาม); อันนี้มีไว้สำหรับรหัสที่คุณไม่ได้สร้างหรือแก้ไขไลบรารีตามที่คุณได้รับ
  • lib-modded (หรือบุคคลที่สามแก้ไข); รหัสนี้มีไว้สำหรับรหัสที่คุณไม่คาดว่าจะแก้ไข แต่ต้องใช้วิธีแก้ปัญหา / แก้ไขในระหว่างที่ผู้ให้บริการห้องสมุดเผยแพร่
• inc (หรือเซิร์ฟเวอร์สินทรัพย์หรือสินทรัพย์ในพื้นที่); สิ่งนี้มีไว้สำหรับเนื้อหาที่ใช้ในฝั่งเซิร์ฟเวอร์ไม่ให้ไคลเอ็นต์ใช้เช่นไลบรารีในภาษาเช่น PHP หรือสคริปต์เซิร์ฟเวอร์เช่นไฟล์ bash
  • แบบอักษร
  • lib
  • lib-modded

ฉันทำเครื่องหมายเป็นตัวหนาตามปกติส่วนอื่น ๆ ไม่ใช่เนื้อหาปกติ

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

ภายในไดเร็กทอรี lib ฉันใช้เพื่ออธิบายเกี่ยวกับไลบรารีตัวอย่างเช่น

• lib
  • jquery.com
    • jQuery
      • vX.YZ
  • github
    • [เส้นทาง]
      • [ไลบรารี / ชื่อโครงการ]
        • vX.YZ (เวอร์ชัน)

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

นอกจากนี้อย่าลังเลที่จะจัดระเบียบเนื้อหาภายในตามการใช้งานดังนั้นภาพ / โลโก้และรูปภาพ / ไอคอนจึงเป็นไดเร็กทอรีในบางโปรเจ็กต์

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

BBC มีมาตรฐานมากมายเกี่ยวกับการพัฒนาเว็บ

มาตรฐานของพวกเขาค่อนข้างง่ายสำหรับไฟล์ CSS:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

คุณอาจพบสิ่งที่เป็นประโยชน์ในเว็บไซต์หลัก:

http://www.bbc.co.uk/guidelines/futuremedia/