Вэбсайтныхаа урд талын төгсгөлийг бүтээх хүрээг ашиглах нь маш олон давуу талтай (мөн ачаалахад хялбар байдаг). Юуны өмнө ямар бүтэцтэй байх, яагаад үүнийг вэб хөгжүүлэлтэд оруулах талаар бодох хэрэгтэй.
Урьдчилсан төгсгөлийн хүрээ
Мөн "CSS бүтэц" гэж нэрлэдэг бөгөөд эдгээр нь файл, хавтаст бичигдсэн стандарт кодтой багц агуулсан байдаг. Эдгээр нь эцсийн дизайнтай уян хатан байх боломжийг олгож байхад та бүтээн босгох суурь өгнө. Ерөнхийдөө урд эцсийн бүтэц нь дараах бүрэлдэхүүн хэсгүүдийг агуулдаг:
- Вэбсайтаа дизайны элементүүдийг зохион байгуулахад хялбар болгодог сүлжээ
- Түүний функц дээр суурилсан фонтоор ялгаатай фонтоор тодорхойлогдсон фонтууд (толгой ба догол мөр гэх мэт төрөл бүрийн хэв маяг гэх мэт)
- Хажуугийн самбар, товчлуур, навигацийн баар зэрэг урьдчилан бүтээгдсэн вэб бүрэлдэхүүн хэсгүүд
Таны сонгосон өвөрмөц тогтцоос хамааран илүү их чадвартай байх болно.
Яагаад хэрэглэх вэ?
Таны кодыг эхнээс нь эхлэхийн оронд урд-фронтын тогтолцоог ашиглах маш олон сайн шалтгаанууд байна:
- Цаг хэмнэх! Мэдээжийн хэрэг, хэрэв та нэг мөр код бичиж байгаа бол вэбсайтаа ажиллуулахын тулд илүү их хугацаа шаардагдах болно. Суурь нь үндсэн ойлголттой болоход туслах болно.
- Нэмэлт хэсгүүдийг нэмэх хэрэгтэй. Өөр нэг товчлуур эсвэл хоёр дээр өөртөө нэмэлт өөрчлөлт оруулахгүйгээр сонголт хийх боломжтой байх нь үргэлж сайхан байдаг.
- Код ажиллаж байгаа эсэхийг мэдэх хэрэгтэй. Зөвхөн өөрийнхөө кодыг бичихэд их цаг зарцуулахын оронд энэ нь ажиллахгүй (эсвэл вэб хөтөчдийн 60% -тай нийцэхгүй байгааг олж мэдэхэд) та урьдчилан туршина, ажиллагааны код ашиглаж байгааг мэднэ.
Урагшлахаасаа өмнө урд талын бүтцийг ашиглахгүй байхыг тодруулахыг хүсч байна! Кодыг бий болгох ур чадварыг орлуулахын тулд тэдгээрийг эмчлэх нь та нарт ямар нэгэн зүйл хийхийг хүсэхгүй. Эхлээд HTML ба CSS-тай танилцаж, дараа нь та богино холболтыг ашиглаж эхлэх боломжтой. Таны хүрээг туслагч байдлаар туслаарай.
Урьдчилсан төгсгөлийн хамрах хүрээний жишээнүүд
CSS-ийн бүх бүтэц нь адилхан бүтээгдээгүй учраас таны хамгийн өвөрмөц хэрэгцээг хамгийн сайн тохирох судалгааг хийхэд анхаарах хэрэгтэй. Хамгийн шилдэг 5-ийн тойм:
- Bootstrap: Хамгийн алдартай нь. Github дээр олон тооны одод, асуултад хариулахын тулд маш их нөөц бололцоотой. Хэрэглэхэд хялбар нэг нь байдаг, гэхдээ зарим нь маш онцлог "Bootstrap" харагддаг.
- Сан: Олон уян хатан байдал, тохируулга хийх боломжтой. Урьдчилан боловсруулсан хөгжлөөр туршлагатай хүмүүст сайн, олон тооны бүтээлч хяналтыг хадгалахын зэрэгцээ үндсүүдийг хамрахыг хүсдэг.
- Stylus: Expressive, stylish CSS хэл юм. Энэ хүрээг зөвхөн Node.js програмууд дээр ашиглах боломжтой.
- Семантик UI: Ухаалаг, хялбар бөгөөд хялбархан кодыг дибаг хийх болгоно. Та дизайны эрх чөлөөг маш ихээр өгдөг бөгөөд таны хэрэгцээнд дасан зохицдог.
- UI Kit: Танд iOS апп хөгжүүлэх сонирхолтой байгаа бол хэрэглэх хүрээ. Өөрийн сайтыг хөгжүүлэхэд хялбар болгох үндсэн загвар бий.
Дүгнэлт
Товхимол нь урд талын загварыг хэрэгжүүлэхэд маш их ач холбогдолтой хэрэгсэл юм. Ялангуяа та энэ талбарт байнга хөгжиж байгаа ажлын байртай бол. Энэ нь таныг ажлын урсгалын хурдыг хурдасгаж, чанар, үйл ажиллагааг золиослохгүйгээр бүтээмжийг нэмэгдүүлэх боломжийг олгодог. Тэдгээрийг ур чадвараа дээшлүүлэх хэрэгсэл болгохын тулд ашиглахыг санаарай.