Адказ "Як зрабіць добра з CSS"

Савет - гэта патрэбна практыка, але і разуменне агульнай карціны.

Вы, напэўна, чулі пра Quora, гэта прыемная платформа для атрымання і абмену ведамі. Ёсць сотні актыўных катэгорый, у якіх вы можаце спытаць і адказаць на ўсё, што вам прыйдзе ў галаву.

Адно з самых распаўсюджаных пытанняў, якія я бачу, тычыцца вялікай карціны. Хоць тып пытання-адказу канцэпцыі падобны на тып StackOverflow, тып пытанняў і адказаў адрозніваецца.

Добрыя пытанні, а дакладней, адказы ў Quora: "Як я трымаю фон падчас пракруткі" ці "Як усталяваць мяккія межы для сваёй кнопкі". Не зразумейце мяне тут няправільна, ёсць такія пытанні, але яны не вельмі каштоўныя.

Тым не менш, тэмы "Як мне хутка стаць добра?" Цікавыя. Ці "Як я магу арганізаваць свой код?". Тып пытання, які не так вітаецца ў StackOverflow, як вы, напэўна, ведаеце, таму што ён недастаткова канкрэтны.

І вось мая мэта тут - адказаць на простае пытанне "Як быць добрым". Я не буду ўдавацца ў тэхнічныя падрабязнасці, бо яны не важныя.

Разумець паняцці

Гэта важна. Зрабіце большую карціну.

Вы, напэўна, ведаеце, што такое колер фону, вы можаце ведаць, што робіць transformX, float, flexbox і сетка. Вы можаце прачытаць пра тое, як выкарыстоўваць і рэалізаваць яго. Гэта не самая цяжкая частка. (+ Google тут, каб дапамагчы.)

Але большасць людзей змагаецца пра тое, як усё звязана. Чаму прымаюцца нейкія рашэнні і чаму людзі любяць прыдумляць уласныя рамкі і называць умовы.

Вы павінны разумець, што спосаб, які вы пачынаеце, больш-менш вызначае агульную структуру праекта. Па гэтай прычыне вам неабходна пераканацца, што вы разумееце патэнцыйныя праблемы і як іх вырашыць.

Пачнем з таго, як правільна замацаваць асновы.

Ёсць шмат уласцівасцей CSS. Вы не павінны запомніць іх усіх. Сама старонка называецца "спасылкай". Калі вы не вучыцеся ў школе, ніхто не просіць вас назваць усе параметры кадра, якія вы можаце ўсталяваць у табліцы стыляў.

Але вы запомніце іх пасля таго, як выкарыстоўвалі іх незлічоная колькасць разоў. Калі вы не ўпэўненыя, як нешта выкарыстоўваць - Google гэта. Затым пішыце гэта самастойна, гуляйце з наладамі і бачыце вынік.

Пасля некалькіх месяцаў напружанай працы гэта будзе як пісаць на роднай мове.

Гэта важна, таму што вам часта даводзіцца хутка дастаўляць. Менавіта гэты менеджэр / менеджэр праектаў патрабуе ад вас. Вы не павінны шукаць асноўныя ўласцівасці вельмі доўга.

Калі вы ведаеце большасць уласцівасцяў, вы таксама можаце значна палепшыць адладкі. Ведаючы, як працуе кожная ўласцівасць і ці існуе яна, зэканоміць вам шмат часу. З-за гэтага вопытныя распрацоўшчыкі могуць вырашыць шмат праблем за лічаныя хвіліны.

https://xkcd.com/1350/

Трэба напісаць шмат кода

Абыякавага шляху няма. Тое ж самае з усім у жыцці, трэба ўкладваць шмат часу. І гэта адно з галоўных пытанняў, якія я бачу, калі людзі пытаюцца, як паправіцца.

Што менавіта пісаць?

Калі вы працуеце ў агенцтве альбо ў якасці фрылансера, вам, хутчэй за ўсё, ёсць чым заняцца. Калі не, вось некалькі саветаў:

Паглядзіце, як гэта робяць вялікія

Калі гэта першае, у вас, хутчэй за ўсё, будзе дастаткова часу. І гэта добра, а значыць, вы можаце рабіць усё, што заўгодна.

І што адчуваеце сябе выдатна, многія вам пазайздросцяць.

Калі гэта так, зрабіце наступнае: Перайдзіце на сайт, якім вы захапляецеся. Бонусныя балы пры вялікім трафіку. Пачніце з праверкі элементаў і паглядзіце, як інжынеры рэалізавалі канкрэтныя кампаненты / макеты.

Некалькі інструкцый, на што звярнуць увагу:

  • Вы выкарыстоўвалі пэўную канвенцыю аб назвах? Такія кампаніі, як Airbnb, BBC і іншыя, маюць рэкамендацыі публічнага кода, якія можна шукаць.
  • Вы перапісваеце шмат кода? Паглядзіце, колькі ўласцівасцей адмяняецца пэўным класам. Чым менш - тым лепш, паглядзіце, як яны гэта зрабілі.
  • Як нешта сапраўды атрымалася? Звычайны тэкст злева і выява справа могуць быць вельмі складанымі, калі выява завісае па-за кантэйнера сайта, прылягае да ніжняй частцы раздзела і перакрывае верхнюю частку, у той час як тэкст знаходзіцца вертыкальна і цалкам у цэнтры гэта тое, што рэагуе.
  • Знайдзіце розніцу паміж вашым і вашым кодам. Вы выкарыстоўваеце больш плыўцоў, больш пазіцыянавання, больш хакаў? Вельмі верагодна, што тое, што вы робіце кожны дзень, напісаць значна прасцей.

Але ўсё становіцца сумна. Ты не можаш быць добрым, калі толькі чытаеш, трэба нешта рабіць. І вы можаце рабіць гэта кожны раз:

Затым паспрабуйце зрабіць гэта самастойна

Напрыклад, адкрыты дрыблінг. Ёсць вельмі шмат выдатных канструкцый! Што вы робіце з імі Рэалізуйце. Проста выбірайце і паспрабуйце зрабіць усё ідэальным на ўсіх экранах.

Чаму? Таму што гэта выглядае добра і вы выдатна адчуваеце сябе, калі бачыце, як гэта працуе.

Проста не выкарыстоўвайце яго, як калі б гэта быў ваш уласны дызайн, ён не будзе круты. Захоўвайце яго ў мясцовым асяроддзі распрацоўшчыка альбо пішыце дызайнеру, калі вы хочаце зрабіць што-небудзь з ім.

Вы можаце знайсці яго па адрасе: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

Затым выберыце дызайнера, які не падабаецца распрацоўшчыкам. Той, у якім усё перакрываецца паўсюль, дзе на сетцы - замежнае слова, якое апісвае вагу кіта ў бананах і каляровую кансістэнцыю, - гэта тэрмін, які ўжываюць хіпстэры.

Чаму? Таму што гэта складана. Вы падумаеце значна больш пра тое, як арганізаваць свае пазнакі і стылі. Паспрабуйце зрабіць піксель ідэальным! Бонусныя балы за анімацыю.

Ці вы таксама дызайнер, выкарыстоўвайце свае ўласныя праекты, каб закадаваць іх. Гэта таксама выдатнае практыкаванне. Я зрабіў гэта, калі некалькі гадоў таму перарабіў экран выбару Лігі чэмпіёнаў.

Завершаны менш чым за дзве гадзіны, закадаваны ў прамым эфіры прыблізна за 6 гадзін.

Вы можаце ўбачыць рэалізаваную версію тут. Ён не адказвае, бо не быў часткай першапачатковага плана. Вы таксама можаце назіраць прамежак часу ўсяго працэсу.

Праверце свой код

Гаворка ідзе не толькі пра аб'ём працы, але і пра якасць. Праверце свой стары код і знайдзіце магчымыя паляпшэнні.

Што заахвоціла вас перапісаць яго часткі? Што вас страшна! Важна дадаць? Ці маеце вы справу з запытамі ў СМІ? Вы напісалі 4-5 узроўняў глыбокіх селектараў?

Ёсць шмат лепшых практык, якія трэба шукаць. Вось толькі некалькі:

  1. 20 protips для напісання сучасных CSS
  2. Модульныя канвенцыі пра назвы CSS
  3. Ці гэта велізарнае кіраўніцтва для практычна ўсяго CSS.

Палепшыць - значыць працаваць хутчэй, больш эфектыўна і з меншай колькасцю памылак. Вы павінны паспрабаваць стварыць сваю старонку з першага разу, не перапісваючы, рэдагуючы альбо выдаляючы частку кода.

Вы павінны планаваць загадзя з самага пачатку!

Як кампаненты будуць працаваць разам? Што ўкладзена, што ўспадкоўвае стылі?

Трэба навучыцца добра планаваць

Гэта мае вырашальнае значэнне. Пры праглядзе прадстаўленых мадэляў, прататыпаў або канструкцый вам трэба з самага пачатку спланаваць макет і структуру разметкі.

Якія элементы, дзе яны выкарыстоўваюцца некалькі разоў? Ці адрозніваюцца яны неяк? Ці адрозніваюцца яны па тых жа правілах?

Усё гэта кажа вам пра тое, якія мадыфікатары вам патрэбныя, як структураваць разметку, каб вы маглі максімальна паўторна выкарыстоўваць яе.

Звярніце ўвагу на раздзелы

Такое планаванне дазваляе вам зэканоміць час і грошы пазней. Чым больш праект расце, тым важней мець добры падмурак. Вы не даведаецеся гэтага ў невялікіх праектах.

І калі вы не згодныя з праблемамі з захаваннем большай базы кода, над якой працуе шмат людзей, вам варта вывучыць увесь аб'ём праекта і правільна спланаваць, як структураваць увесь праект.

Каб рэгуляваць вялікую яго частку, іншыя распрацоўшчыкі распрацавалі канвенцыі аб найменнях. Набор правілаў для наймення кампанентаў, іх дзяцей, мадыфікатараў, утыліт і г.д.

І кожны з іх карысны для розных праектаў. Аднак калі вы добра ведаеце аб'ём і абмежаванні, вы можаце выбраць найбольш прыдатны для вашага праекта.

  • Тут таксама распаўсюджваюцца модульныя ўмоўныя назвы з блога sass
  • Уводзіны ў аб'ектна-арыентаваны CSS (OOCSS)
  • SMACSS
  • BEM
Як адчуваеш барацьбу з CSS, калі нічога не арганізавана. Перапісванне, змяненне, змяненне і даданне ўсё больш уласцівасцей часта прыводзіць да хаосу, які лёгка парушыць.

Ёсць шмат іншых, вы павінны даведацца, што найлепшым чынам адпавядае вашым патрэбам. Аднак я рэкамендую прачытаць дакументацыю, прычыну і праблемы, якія вырашаюць гэтыя канвенцыі.

Магчыма, вы не карыстаецеся ні адным з іх, але важна ведаць, чаму яны існуюць.

TL; ДР

  • Напішыце як мага больш CSS. Калі вы не знайшлі ніводнага добрага праекта, над якім будзеце працаваць, вазьміце праект і ажыццявіце яго.
  • Кожны раз удасканальвайце свой код. Паспрабуйце кожны раз пісаць кожны кампанент больш разумна, пакуль вы не будзеце задаволены сваім падыходам у канчатковым рахунку.
  • Вучыцеся ў вялікіх хлопчыкаў - паглядзіце, як гэта робяць маштабныя сайты. Паглядзіце, чаму вы можаце даведацца адтуль і рэалізаваць гэта ў сваіх праектах.
  • Выкарыстоўвайце альбо, па меншай меры, зразумейце, чаму існуюць умовы названня. Ведайце, якія праблемы яны вырашаюць. Вызначце, які з іх падыходзіць для вашага праекта.

CSS здаецца простым, але ёсць так шмат, што можа пайсці не так. Прайшоўшы больш за 5000 ліній, усё можа стаць вельмі брудным. Дрэннае планаванне прыводзіць да перазапісу змесціва, няправільныя медыя-запыты запускаюцца ў нечаканыя моманты, і правільныя правілы могуць стаць кашмарам.

Каб паправіцца, вам трэба шмат прачытаць пра ўсе гэтыя праблемы, вызначыць іх з дапамогай уласнага кода і спланаваць, як структураваць прыкладанне / сайт, каб вам не прыйшлося хвалявацца з гэтай нагоды.

Калі вам спадабаўся гэты артыкул, калі ласка, не забудзьцеся націснуць на сімвал сэрца ніжэй.