Веб-сайттың көрінісі мен сезімі, немесе «стилі» CSS (Cascading Style Sheets) нұсқайды. Бұл веб-сайтыңыздың каталогына қосылатын файл, ол сіздердің беттеріңіздің визуалды дизайны мен орналасуын жасайтын түрлі CSS ережелерін қамтиды.
Сайттар қолданатын және жиі жасайтын болса, бірнеше мәнер парағын қолдануға болады, мұны істеудің қажеті жоқ. Сіз өзіңіздің барлық CSS ережелеріңізді бір файлға орналастыра аласыз, сонымен қатар, бірнеше файлдарды алудың қажеті жоқ, өйткені бұл жылдамдықтың жылдамдығын және беттердің өнімділігін қоса алғанда, мұны істеу үшін нақты артықшылықтар бар. Өте үлкен болса да, корпоративтік сайттар кейде жекелеген стильдер кестелерін қажет етуі мүмкін, көптеген кішкентайдан орташа сайттарға бір файлмен өте жақсы жаза алады. Менің веб-дизайн жұмысымның көп бөлігі үшін бұл - менің беттерімнің барлық ережелерімен бір CSS файлдары. Мәселе енді осы CSS файлына не атау керек?
Нұсқаулықтың негіздері
Веб-беттеріңіз үшін сыртқы мәнер парағын жасаған кезде, HTML файлдарыңыз үшін ұқсас атау конвенцияларынан кейін файлды атаңыз:
Арнайы таңбаларды пайдаланбаңыз
CSS-файл атауларында аз, 0-9, астын сызу (_) және дефис (-) сандарын пайдаланыңыз. Файл жүйесінде басқа таңбалармен файлдар жасауға мүмкіндік беретініне қарамастан, сіздің серверіңіздің OS арнайы таңбаларымен проблемалар туындауы мүмкін. Мұнда көрсетілген таңбаларды ғана пайдалану қауіпсіз. Өйткені сіздің серверіңіз арнайы таңбалар үшін рұқсат етсе де, болашақта хостинг-провайдерлерді жылжытқыңыз келсе, бұл мүмкін емес.
Кез келген кеңістікті пайдаланбаңыз
Арнайы кейіпкерлер сияқты кеңістіктер веб-серверде де ақаулар тудыруы мүмкін. Файл атауларыңыздан аулақ болу дұрыс. Мен тіпті бұл веб-сайтқа қосу қажет болған жағдайда, сол бірдей конвенцияларды қолданып PDF файлдары сияқты файлдарды атауға тырысамын. Егер сіз файл атауын оқуды жеңілдету үшін бос орын қажет деп тапсаңыз, оның орнына сызықша немесе астыңғы сызықшаларды таңдаңыз. Мысал үшін, «бұл file.pdf» файлын пайдаланудың орнына «this-is-the-file.pdf» қолданамын.
Файл атауы хатпен басталуы керек
Бұл абсолюттік талаптар емес, кейбір жүйелерде әріппен басталмаған файл атауларына қатысты қиындықтар бар. Мысалы, файлды сан таңбасымен бастауды таңдасаңыз, бұл мәселелер тудыруы мүмкін.
Барлық төменгі жағдайды пайдаланыңыз
Бұл файл атауына қажет болмаса да, бұл жақсы идея, себебі кейбір веб-серверлер регистрді ескереді және файлды басқаша түрде ұмытсаңыз және сілтеме жасасаңыз, ол жүктелмейді. Өз жұмысымда әр файл атауына төменгі регистрді қолданамын. Мен бұны көптеген жаңа веб-дизайнерлер ұмытып кетуге тырысатын нәрсе деп таптым. Файлды атау кезінде олардың әдепкі әрекеті аттың бірінші таңбасын капиталдандыру болып табылады. Бұдан аулақ болыңыз және тек кіші әріптер әдетін ғана қабылдайсыз.
Файл атауын мүмкіндігінше қысқа мерзімде сақтаңыз
Көптеген амалдық жүйелерде файл атауының өлшемі шектелгенімен, бұл CSS файлының атауына сәйкес келетіннен әлдеқайда көп. Жақсы ереже файлдың аты үшін 20 таңбадан аспауы керек. Шындығында, кез келген нәрсемен байланыста жұмыс істеуге болмайтын нәрседен әлдеқайда көп нәрсе!
CSS файл атауының ең маңызды бөлігі
CSS файл атауының ең маңызды бөлігі файл атауы емес, кеңейтім. Macintosh және Linux жүйелерінде кеңейтулер талап етілмейді, бірақ бәрібір CSS файлын жазғанда біреуді қосу өте жақсы. Осылайша сіз әрқашан стиль кестесін білетін боласыз және болашақта не болатынын анықтау үшін файлды ашудың қажеті жоқ.
Мүмкін, бұл үлкен жаңалық емес, бірақ сіздің CSS файлыңыздағы кеңейтім:
.cssCSS файлын атау туралы конвенциялар
Егер сізде тек бір CSS файлы бар болса, оны қалағаныңыздай атауға болады. Маған ұнайды:
styles.css немесе default.cssМен жұмыс істейтін сайттардың көпшілігі бір CSS-файлды қамтығандықтан, бұл атаулар маған жақсы жұмыс істейді.
Егер сіздің веб-сайтыңыз бірнеше CSS файлдарын қолданатын болса, олардың әрқайсысының мақсатын анықтайтындай етіп стиль кестелерін атаңыз. Веб-беттегі бірнеше мәнер парақтары болуы мүмкін болғандықтан, бұл парақтың функциясына және оның ішінде мәнерлерге байланысты әртүрлі парақтарға мәнерлеріңізді бөлуге көмектеседі. Мысалға:
- Орналастыру және дизайн layout.css design.css
- Бет бөлімдері main.css nav.css
- Негізгі бөлім: mainstyles.css subpage.css толық сайты
Егер сіздің веб-сайтыңызыңыз қандай да бір негіздеме қолданатын болса, онда сіз әртүрлі беттерге немесе сайттың аспектілеріне (типография, түс, макет және т.б.) арналған әртүрлі CSS файлдарын пайдаланатындығын байқайсыз.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard редакциясымен 9/5/17