«CSS-пен қалай жақсы жұмыс жасау керек» деген жауап

Кеңес - бұл тәжірибені қажет етеді, сонымен бірге жалпы көріністі түсіну керек.

Сіз Quora туралы естіген шығарсыз, бұл білім алуға және бөлісуге арналған жақсы алаң. Жүздеген белсенді санаттар бар, олар сіз ойға келген нәрсені сұрай және жауап бере аласыз.

Мен жиі кездесетін сұрақтардың бірі үлкен суретке қатысты. Тұжырымдаманың сұрақ-жауап типі StackOverflow-қа ұқсас болғанымен, сұрақтар мен жауаптардың түрлері әр түрлі.

Жақсы сұрақтар, нақтырақ айтсақ, Quora-дағы жауаптар «айналдыру кезінде мен өзімнің фонымды қалай сақтаймын» немесе «Мен өзімнің түйме үшін жұмсақ жиектерді қалай орнатамын» емес. Мені қателеспеңіз, мұндай сұрақтар бар, бірақ олар өте құнды емес.

Дегенмен, «Мен қалай тез жетемін?» Тақырыптары қызықты. Немесе «кодымды қалай реттеймін?». StackOverflow-да жағымсыз болатын сұрақ түрі, мүмкін, себебі ол нақты емес.

Мұндағы менің мақсатым - «қалай жақсы болу керек» деген қарапайым сұраққа жауап беру. Мен техникалық бөлшектерге назар аудармаймын, өйткені бұл маңызды емес.

Ұғымдарды түсіну

Бұл маңызды. Үлкенірек суретке түсіріңіз.

Фонның түсі қандай екенін білесіз, трансХХ, флоат, флексбокс және тор не істейтінін білесіз. Сіз оны пайдалану және іске асыру туралы оқуға болады. Бұл қиын бөлік емес. (+ Google көмектесу үшін бар.)

Бірақ көпшілік бәрі қалай байланысты екендігі туралы күреседі. Неліктен кейбір шешімдер қабылданады және неге адамдар өздерінің шеңберлерін және конвенцияларды атауды ұнатады.

Сіз көп немесе аз бастау жолыңыз жобаның жалпы құрылымын анықтайтынын түсінуіңіз керек. Осы себепті сіз ықтимал проблемаларды түсініп, оларды қалай шешуге болатындығыңызға сенімді болуыңыз керек.

Негіздерді қалай дұрыс бекіту керектігін бастайық.

CSS-тің көптеген қасиеттері бар. Сіз олардың бәрін жаттап алмауыңыз керек. Парақтың өзі «сілтеме» деп аталады. Егер сіз мектепте болмасаңыз, сізден ешкім стиль кестесінде орнатуға болатын барлық кадрлық параметрлерді атауды сұрамайды.

Бірақ сіз оларды сансыз рет қолданғаннан кейін есіңізде қалады. Егер сіз бір нәрсені қалай пайдалану керектігін білмесеңіз - Google оны. Содан кейін оны өзіңіз жазыңыз, параметрлермен ойнап, нәтижесін көріңіз.

Бірнеше айлық қажырлы еңбектен кейін бұл ана тілінде жазу сияқты болады.

Бұл өте маңызды, өйткені сізге тез жеткізу керек. Бұл жоба менеджері / менеджері сізден талап етеді. Сіз ұзақ уақыт бойы негізгі қасиеттерді іздемеуіңіз керек.

Егер сіз қасиеттердің көпшілігін білсеңіз, сіз күйін келтіруді едәуір жақсартуға болады. Әр меншіктің қалай жұмыс істейтінін және оның бар-жоғын білу сізге көп уақытты үнемдейді. Осыған байланысты тәжірибелі әзірлеушілер көптеген мәселелерді бірнеше минут ішінде шеше алады.

https://xkcd.com/1350/

Сізге көп код жазу керек

Оның айналасында ешқандай жол жоқ. Өмірдегі барлық нәрсе бірдей, сіз көп уақыт жұмсауыңыз керек. Бұл адамдар қалай сауығу керектігін сұрағанда, мен көретін басты сұрақтардың бірі.

Нені жазу керек?

Егер сіз агенттікте немесе фрилансер ретінде жұмыс жасайтын болсаңыз, онда сізде бір нәрсе болуы мүмкін. Егер жоқ болса, мұнда бірнеше кеңестер бар:

Үлкендердің мұны қалай жасайтынын қараңыз

Егер бұл бірінші болса, сізде көп уақыт болады. Бұл жақсы, демек, сіз өзіңіз қалаған нәрсені жасай аласыз.

Бұл керемет сезінеді, көп адамдар сізге қызғанады.

Олай болса, келесі әрекетті орындаңыз: сіз таңданатын веб-сайтқа өтіңіз. Егер трафик көп болса, бонустық ұпайлар. Элементтерді тексеруден бастаңыз және инженерлер нақты компоненттерді / схемаларды қалай қолданғанын көріңіз.

Іздейтін кейбір нұсқаулар:

  • Сіз белгілі бір атау конгресін қолдандыңыз ба? Airbnb, BBC және басқалар сияқты компанияларда сіз іздей алатын қоғамдық кодтар бойынша нұсқаулар бар.
  • Сіз көптеген кодты қайта жазасыз ба? Белгілі бір сыныптың қанша қасиеттерді ауыстырғанын қараңыз. Неғұрлым аз болса - соғұрлым жақсы, олардың мұны қалай жасағанын көріңіз.
  • Шынында бір нәрсеге қалай қол жеткізілді? Сол жақтағы кәдімгі мәтін және оң жақтағы кескін егер сайт сайт контейнерінен тыс қозғалса, бөлімнің төменгі жағына жабысып, мәтін тігінен және толық центрленген кезде жоғарғы жағымен қабаттасса, өте қиын болуы мүмкін. реакция жасайды.
  • Кодыңыз бен сіздің айырмашылығыңызды табыңыз. Сіз көбірек жүзгіштерді, көбірек позицияларды, көбірек қақпақтарды қолданасыз ба? Сіз күнделікті жасаған нәрсені жазу оңайырақ болуы әбден мүмкін.

Бірақ бәрі скучно. Егер сіз тек оқыған болсаңыз, сіз жақсы бола алмайсыз, бір нәрсе жасауыңыз керек. Сіз мұны әр уақытта жасай аласыз:

Содан кейін оны өзіңіз жасауға тырысыңыз

Мысалы, ашық дебл. Керемет дизайн өте көп! Олармен не істеп жатырсың Оны іске асырыңыз. Таңдап, барлық экрандарда бәрін тамаша етуге тырысыңыз.

Неге? Өйткені ол жақсы көрінеді және оның қалай жұмыс істейтінін көргенде өзіңізді керемет сезінесіз.

Оны өзіңіздің дизайныңыз сияқты пайдаланбаңыз, ол керемет болмайды. Жергілікті әзірлеуші ​​ортада сақтаңыз немесе егер сіз онымен бірдеңе жасағыңыз келсе, дизайнерге жазыңыз.

Оны мына жерден таба аласыз: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

Содан кейін әзірлеушілерге ұнамайтын дизайнерден біреуін таңдаңыз. Бәрі барлық жерде бір-бірімен сәйкес келеді, бұл тор - банандардағы киттің салмағы мен түс консистенциясын сипаттайтын шетелдік сөз, хипстер қолданған термин.

Неге? Өйткені бұл қиын. Белгілеулер мен стильдерді қалай ұйымдастыруға болатыны туралы көп ойланасыз. Оны керемет пиксель етуге тырысыңыз! Анимация үшін бонустық ұпайлар.

Немесе сіз дизайнер болсаңыз, оларды кодтау үшін өзіңіздің дизайныңызды пайдаланыңыз. Бұл сондай-ақ керемет жаттығу. Мен мұны бірнеше жыл бұрын Аңыздар лигасының чемпионын таңдау экранын қайта жасаған кезде жасадым.

Екі сағаттан аз уақыт ішінде аяқталды, шамамен 6 сағат ішінде тікелей эфирде кодталды.

Іске асырылған нұсқаны мына жерден көре аласыз. Бұл жауап бермейді, өйткені бұл бастапқы жоспардың бөлігі болмаған. Сонымен бірге сіз бүкіл процестің уақыт аралығын көре аласыз.

Кодты тексеріңіз

Бұл тек жұмыс көлеміне ғана емес, сонымен қатар сапаға да қатысты. Ескі кодты тексеріп, мүмкін жақсартуларды іздеңіз.

Сізге оның бөліктерін қайта жазуға не түрткі болды? Сізді не қорқынышты етті! Қосу маңызды ма? Сіз бұқаралық ақпарат құралдарының сұрауларымен айналысуыңыз керек пе? Сіз терең іріктеушілердің 4-5 деңгейін жаздыңыз ба?

Іздеудің көптеген жақсы әдістері бар. Мұнда бірнеше ғана:

  1. Заманауи CSS-ті жазуға арналған 20 қорғаныс
  2. Модульдік CSS атауының шартты белгілері
  3. Немесе бұл CSS-тің бәріне арналған үлкен нұсқаулық.

Жақсарту дегеніміз - тезірек, тиімдірек және аз қателіктермен жұмыс істеуді білдіреді. Сіз өзіңіздің парағыңызды бірінші кезектен бастап кодтың кез келген бөлігін қайта жазбай, өңдемей немесе жоймай құруға тырысуыңыз керек.

Сіз басынан бастап жоспарлауыңыз керек!

Компоненттер қалай жұмыс істейді? Кірістірілген не, стильді не мұра етеді?

Жақсы жоспарлауды үйрену керек

Бұл өте маңызды. Берілген модельдерді, прототиптерді немесе конструкцияларды көргенде, орналасуды және белгілеу құрылымын басынан бастап жоспарлау керек.

Элементтер қандай, олар бірнеше рет қай жерде қолданылады? Олардың айырмашылығы бар ма? Олар бірдей ережелермен ерекшелене ме?

Мұның бәрі сізге қандай модификаторлар қажет екенін, мүмкіндігінше қайта пайдалану үшін түзетуді қалай құру керектігін айтады.

«Реттеу» және «Қайта ойластыру» бөлімдеріне назар аударыңыз :) Ия, өте ақылды автоматтандыру құралын ойлап табудың орнына, алдымен бәрін оңтайландыруға тырысыңыз. Қажет болса, автоматтандыру туралы ойланыңыз. - https://xkcd.com/1319/

Бұл жоспарлау сізге уақыт пен ақшаны кейінірек үнемдейді. Жоба өскен сайын, оның негізін қалаған жөн. Сіз мұны кішігірім жобаларда білмейсіз.

Егер сіз көптеген адамдар жұмыс істейтін үлкен кодтық базаны сақтап қалуға келіспесеңіз, онда сіз жобаның толық көлемін зерттеп, бүкіл жобаны қалай құруды дұрыс жоспарлауыңыз керек.

Оның көп бөлігін реттеу үшін басқа әзірлеушілер ат қою туралы конвенциялар жасады. Сіздің компоненттеріңізді, олардың балаларын, модификаторларды, қызметтік бағдарламаларды және т.б. атауға арналған ережелер жиынтығы.

Олардың әрқайсысы әртүрлі жобаларға пайдалы. Алайда, егер сіз қолдану аясы мен шектеулерді жақсы білсеңіз, өз жобаңыз үшін ең жақсысын таңдай аласыз.

  • Sass блогындағы модульдік атау шартты белгілері осы жерде де қолданылады
  • Нысанға бағытталған CSS-ке кіріспе (OOCSS)
  • СММАС
  • BEM
Ешнәрсе ұйымдастырылмаған кезде CSS-пен күресу қандай болады. Қайта жазу, өзгерту, өзгерту және көбірек қасиеттерді қосу көбіне оңай хаосты тудырады, бұл оңай бұзылады.

Басқа да көптеген адамдар бар, сіз өзіңіздің қажеттіліктеріңізге не сәйкес келетінін білуіңіз керек. Алайда, сіз осы шартты шешуге болатын құжаттаманы, себебін және проблемаларын оқып шығуды ұсынамын.

Сіз олардың ешқайсысын пайдаланбауыңыз мүмкін, бірақ олардың не үшін бар екенін білу өте маңызды.

TL; DR

  • Мүмкіндігінше CSS жазыңыз. Егер сізде жұмыс жасау үшін жақсы жобалар болмаса, жоба жазыңыз және оны іске асырыңыз.
  • Кодты әрдайым жетілдіріп отырыңыз. Әр компонентті әр үйренген сайын, ақыр соңында ақылға қонымды түрде жазуға тырысыңыз.
  • Үлкен ұлдардан үйреніңіз - мұны үлкен веб-сайттар қалай жасайтынын қараңыз. Ол жерден не білуге ​​болатынын көріңіз және оны өз жобаңызда іске асырыңыз.
  • Неліктен атау шартты белгілерін қолданыңыз немесе кем дегенде түсініңіз. Олардың қандай мәселелерді шешіп жатқанын біліңіз. Сіздің жобаңыз үшін қайсысы жақсы екенін шешіңіз.

CSS қарапайым болып көрінеді, бірақ қате кететін нәрсе көп. 5000 жолдан асқаннан кейін заттар шынымен шатасуы мүмкін. Нашар жоспарлау мазмұнды қайта жазуға әкеледі, күтпеген жерден медиа-сұраулардың қате пайда болуы және жауап беру ережелері қорқынышқа айналуы мүмкін.

Жақсарту үшін сіз осы проблемалардың барлығы туралы көп оқып, оларды өзіңіздің жеке кодыңызбен анықтап, қосымшаны / сайтты қалай құруға болатындығын жоспарлауыңыз керек, сондықтан сіз бұл туралы мүлде алаңдамайсыз.

Егер сізге бұл мақала ұнаған болса, төмендегі жүрек белгісін басуды ұмытпаңыз.