Вэбсайтын харагдах байдал, мэдрэхүй, эсвэл "хэв маяг" нь CSS (Cascading Style Sheets) -аар зохицуулагддаг. Энэ нь таны вэбсайтын лавлахад нэмэх болно. Таны вэбсайтуудын визуал дизайн, зохион байгуулалтыг бий болгох янз бүрийн CSS дүрмийг агуулна.
Хэдийгээр сайтууд ашиглаж, ихэвчлэн хийдэг боловч олон тооны хэв маягийн хуудас ашигладаг тул үүнийг хийх шаардлагагүй юм. Та өөрийн бүх CSS дүрмийг нэг файлд байрлуулж болно, ингэснээр илүү олон файлыг татаж авах шаардлагагүй тул хуудсуудын ачаалал, ачаалал ихтэй байдаг. Маш том боловч аж ахуйн нэгжийн вэбсайтад заримдаа тусдаа загварын хуудсууд хэрэгтэй байж болох боловч олон жижиг, дунд олон сайтууд зөвхөн нэг файлаар төгс сайн ажиллаж чаддаг. Энэ бол миний вэбсайтын дизайны ажлын ихэнхийг ашигладаг. Миний хуудасны бүх дүрмүүд бүхий CSS файлууд юм. Тэгэхээр одоо асуулт болж байна - энэ CSS файлыг юу гэж нэрлэх вэ?
Конвенцийн үндсийг нэрлэх
Та вэб хуудасны гаднах загварын хуудсыг үүсгэхдээ HTML файлдаа ижил төстэй нэршлийн дараах файлыг нэрлэх ёстой:
Тусгай тэмдэгтийг бүү ашигла
Та зөвхөн CSS файлын нэр дээр үсгүүд az, 0-9 тоонууд, underscore (_), болон тэмдэглэгээг (-) хэрэглээрэй. Файл систем нь таныг бусад тэмдэгтүүдтэй файл үүсгэхийг зөвшөөрч болох боловч таны серверийн OS тусгай тэмдэгтүүдтэй байж болох юм. Та энд дурдсан тэмдэгтүүдийг ашиглана. Хэрвээ таны сервер онцгой тэмдэгтүүдийг зөвшөөрсөн байсан ч гэсэн та ирээдүйд хостинг үйлчилгээ үзүүлэгчдийг зөөх шийдвэр гаргадаггүй байж магадгүй юм.
Ямар ч зайг бүү хэрэглэ
Онцгой тэмдэгтүүдтэй адил зай нь таны вэб серверт асуудал үүсгэж болно. Файлын нэр дээр тэдгээрийг зайлсхийх нь маш сайн санаа юм. Би эдгээр вэбсайтууд дээр нэмэх шаардлагатай тохиолдолд эдгээр адилхан конвенциудыг ашиглан PDF файлуудыг нэрлэх цэгийг нэрлэж болно. Хэрэв та файлын нэрийг уншихад хялбар болгохын тулд зай авах хэрэгтэй гэж үзвэл оронд нь тэмдэглэгээ болон денар ашиглахыг сонгоорой. Жишээлбэл, "энэ бол file.pdf" -ийг ашиглахын оронд "this-is-the-file.pdf" -ийг ашиглах байсан.
Файлын нэр нь Захидлаас эхлэх ёстой
Энэ нь туйлын шаардлага биш боловч зарим системүүд захидлаар эхэлдэггүй файлын нэрүүдээр асуудалтай байдаг. Жишээ нь, хэрэв та файлынхаа тоон тэмдэгтээр эхлэхийг хүсвэл энэ нь асуудлыг үүсгэж болно.
Бүх доод талыг ашигла
Хэдийгээр энэ нь файлын нэрийг шаарддаггүй боловч зарим вэб серверүүд хэрэглэгчид мэдрэмтгий байдаг тул та файлын нэрийг өөр өөр тохиолдолд мартаж, лавлах юм бол ачаалах болно. Миний ажилд файлын нэр бүрт бага үсгийг ашигладаг. Үүнийг би санаж байхын тулд олон шинэ вэб дизайнерууд хийхийг хичээж байгаа зүйл гэж би бодсон. Файлыг нэрлэх үед тэдний анхдагч үйлдэл нь нэрний эхний тэмдэгтийг ихэсгэх юм. Үүнээс зайлсхийж, зөвхөн жижиг үсгээр зуршлаад байгаарай.
Файлын нэрийг аль болох богино байлгах
Ихэнх үйлдлийн системүүд дээр файлын нэрний хэмжээг хязгаарласан боловч энэ нь CSS файлын нэрийг бодвол хамаагүй урт юм. Зуучлагчийн сайн дүрэм нь өргөтгөлийг оролцуулалгүйгээр файлын нэрийг 20 тэмдэгтээс хэтрэхгүй. Үнэндээ бол үүнээс хамаагүй урт нь ямар ч байсан ажиллах, холбоход маш хэцүү байдаг!
Таны CSS файлын нэрний хамгийн чухал хэсэг
CSS файлын нэрний хамгийн чухал хэсэг нь файлын нэр биш, гэхдээ өргөтгөл. Макинтош, Линукс системүүдэд өргөтгөлүүдийг шаарддаггүй боловч CSS файлыг бичихэд нэгийг оруулах нь зүйтэй юм. Ингэснээр та энэ загварын хэв маяг гэдгийг үргэлж мэдэж байх болно. Ирээдүйд юу болохыг тодорхойлохын тулд файл нээх шаардлагагүй.
Энэ нь магадгүй том гэнэтийн зүйл биш, гэхдээ таны CSS файл дээр өргөтгөл байх ёстой:
.cssCSS файлыг нэрлэх конвенцууд
Хэрвээ та зөвхөн нэг CSS файлтай байх юм бол та хүссэн зүйлээ нэрлэж болно. Би аль нэгийг нь илүүд үздэг:
styles.css эсвэл default.cssМиний ажиллаж буй ихэнх вэбсайтууд нь нэг CSS файлыг агуулдаг тул эдгээр нэрс нь надад сайн.
Хэрэв таны вэбсайт олон тооны CSS файлуудыг ашигладаг бол функцүүдийнхээ дараа загварын хуудсуудыг нэрлээд файлын тус бүрийн зорилго юу болохыг тодорхой зааж өгнө. Вэб хуудас нь олон тооны хэв маягийн хуудсыг хавсаргаж чаддаг тул таны загварыг тухайн хуудсан дээрх функцүүдээс хамааран янз бүрийн хуудаснуудад хуваахад тусалдаг. Жишээлбэл:
- Зураг төслийн дизайн layout.css
- Хуудасны хэсэг нь main.css nav.css
- Дэд бүлгүүд mainstyles.css дэд хуудас бүхий бүх сайт
Хэрэв таны вэбсайт ямар нэг төрлийн хүрээ ашигладаг бол хуудсын янз бүрийн хэсгүүд эсвэл сайтын янз бүрийн хэсгүүдэд зориулж олон янзын CSS файлуудыг ашигладаг болохыг та анзаарч магадгүй (typography, color, layout гэх мэт).
Женнифер Кэрнин эх нийтлэл. 9/5/17 дээр Жереми Герард засварлав