Válasz a következő kérdésre: „Hogyan lehet jót csinálni a CSS-sel”

Tipp - a gyakorlat elvégzése, de a nagyobb kép megragadása is szükséges.

Valószínűleg már hallottál a Quora-ról, ez egy nagyon ügyes platform az ismeretek megszerzésére és megosztására. Több száz aktív kategória létezik, amelyben bármire felkérheti és megválaszolhatja az érdeklődőket.

Az egyik leggyakrabban feltett kérdés a dolgok nagyobb képére vonatkozik. Noha a kérdés-válasz fogalom hasonló a StackOverflow ehhez, a kérdések és válaszok jellege eltérő.

A jó kérdések, és pontosabban: a Quora-ban szereplő válaszok nem a következők: „Hogyan tehetem a háttérképemet a gördítés közben” vagy „Hogyan állítsam be a lágy szegélyeket a gombhoz”. Ne tévessze meg téged itt, vannak ilyen kérdések, de ezeknek nincs különös jelentősége.

Érdekes azonban a „Hogyan tudok gyorsan gyorsulni” vagy „Hogyan rendezem a kódomat”. Egy olyan típusú kérdés, amely nem örül a StackOverflow-nak, mivel valószínűleg tudod, mivel nem elég pontos.

És ez a célom itt - megválaszolni az egyszerű kérdést: „Hogyan lehet jó?” Nem mélyülök bele a műszaki részletekbe, mivel ezek nem fontosak.

Megérteni a fogalmakat

Ez az, ami fontos. Fogja meg a nagyobb képet.

Valószínűleg tudja, hogy mi a háttér szín, akkor is tudja, hogy mit csinál a transformX, az úszó, a flexbox és a rács. Elolvashatja őket, hogyan lehet használni és megvalósítani. Ez nem a nehéz rész. (+ van egy google, amely segít.)

De a legtöbb ember küzd azzal, hogy minden hogyan kapcsolódik egymáshoz. Miért hoztak döntéseket, és miért szeretik az emberek saját kereteket feltalálni és megnevezni az egyezményeket.

Meg kell értenie, hogy az indulás módja többé-kevésbé meghatározza a projekt teljes szerkezetét. Ezért kell bizonyosodnia arról, hogy tisztában van a lehetséges problémákkal és azok megoldásának módjával.

Először kezdjük azzal, hogyan lehet az alapokat megfelelően lebontani.

Rengeteg CSS tulajdonság van odakint. Nem szabad megemlítenie őket. Maga az oldal neve „referencia”. Nem jár az iskolába, senki sem fogja kérni, hogy nevezze meg az összes szegélybeállítást, amelyet a stíluslapon beállíthat.

De emlékezni fog rájuk, miután számtalanszor használta őket. Ha nem biztos benne, hogyan kell használni valamit, akkor a Google segítségével. Ezután írja meg magát, játsszon körül a beállításokkal és nézze meg az eredményt.

Néhány hónapos kemény munka után olyan lesz, mint anyanyelven írni.

Ez fontos, mert gyakran gyorsan szállítania kell. A projektvezető / menedzser ezt követeli tőled. Nem nagyon kell az alapvető tulajdonságokat keresnie.

A legtöbb tulajdonság ismerete szintén növeli a hibakeresési képességeit. Ha megismerné az egyes tulajdonságok működését és létezését, sok időt fog megtakarítani. Ez az oka annak, hogy a tapasztalt fejlesztők percek alatt megbirkózzanak számos kérdéssel.

https://xkcd.com/1350/

Sok kódot kell írni

Nincs körül. Ugyanaz a helyzet az élettel, sok időt kell rá fordítania. És itt rejlik az egyik fő kérdés, amelyet látok, amikor az emberek azt kérdezik, hogyan lehetne jobbat csinálni.

Mit kell pontosan írni?

Ha irodában vagy szabadúszóként dolgozik, akkor valószínűleg megvan, mit kell dolgoznia, de ha nem, akkor íme néhány tipp:

Nézd, hogy csinálják a nagy fiúk

Ha ez az első, akkor valószínűleg rengeteg idő áll a rendelkezésére. És ez jó, ez azt jelenti, hogy szabadon tehetsz bármit, amit akarsz.

És ez fantasztikusnak érzi magát, sokan irigyellek.

Ha igen, tegye a következőket: Lépjen egy csodált webhelyre. Bónuszpontok, ha a forgalom nagy. Keresse meg az elemek ellenőrzését, megnézze, hogy a mérnökök hogyan hajtották végre az egyes alkatrészeket / elrendezéseket.

Néhány útmutatás arról, mit kell keresni:

  • Használtak valami különleges elnevezési konvenciót? Az olyan cégek, mint az Airbnb, a BBC és mások nyilvános kódszabályokkal rendelkeznek, ezeket megkeresheti.
  • Nagyon sok kódot írnak felül? Nézze meg, hogy egy adott osztály hány tulajdonságot írt felül. Minél kevesebb - annál jobb, lássuk, hogyan sikerült ezt elérni.
  • Hogyan valósult meg valami? A bal oldali egyszerű szöveg és a jobb oldali kép nagyon trükkös lehet, amikor a kép a webhely tárolójának kívül lebeg, a szakasz aljára ragaszkodik, és a felső lapot lefedi, miközben a szöveg függőlegesen központos és az összes ez reagáló.
  • Keresse meg a különbséget a kód és a saját között. Használ több úszót, több pozicionálást, több hacket? Nagyon valószínű, hogy amit minden nap csinálsz, sokkal egyszerűbben lehet írni.

De mindez unalmassá válik. Nem juthat el jól azáltal, hogy csak olvas, csak meg kell tennie valamit. És itt van, amit tehet meg minden egyes alkalommal:

Akkor próbáld meg csinálni magad

Például nyissa meg a csöpögést. Csak annyira fantasztikus minták vannak! Mit csinálsz velük? Végrehajtja őket. Válasszon könnyű fájlokat, és próbálja meg mindent tökéletesíteni az összes képernyőn.

Miért? Mert jól néz ki, és nagyszerűen fogja érezni magát, amikor látja, hogy működik.

Ügyeljen arra, hogy ne használja úgy, mintha a saját dizájnja lenne, nem lesz jó. Tartsa a helyi dev környezetben, vagy írjon a tervezőnek, ha szeretne valamit csinálni vele.

Lásd: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

Akkor válasszon egyet, amelyet olyan tervező készített, amely nem gondolja a fejlesztőket. A hipsterek által használt kifejezés az, amelyben mindenhol fedik egymást, ahol a rács egy idegen szó, amely leírja a bálna súlyát a banánban és a szín állandóságát.

Miért? Mert nehéz. Ez arra készteti Önt, hogy sokkal jobban gondolkodjon a jelölések és a stílusok rendezésében. Próbáld ki, hogy tökéletes legyen a pixel! Bónusz pontok az animációkért.

Vagy ha Ön is tervező, akkor használja a saját terveit a kódoláshoz. Nagyszerű gyakorlat is. Ezt tettem akkor is, amikor néhány évvel ezelőtt újraterveztem a League of Legends bajnok kiválasztási képernyőjét.

Készült kevesebb, mint két órán belül, kb. 6 óra alatt kódolva, míg az élő streaming.

Itt láthatja a megvalósított verziót. Nem reagál, mivel ez nem volt az eredeti terv része. Megnézheti az egész folyamat timelapse felvételét is.

Nézze át a kódját

Nem csak az elvégzett munka nagy része, hanem a minőség is. Vizsgálja meg újra a régi kódot, keresse meg a lehetséges fejlesztéseket.

Mi okozta neked annak egyes részének átírását? Mi tette hozzá fontosnak az ijesztőt! Küzdött a média kérdéseivel? Írtál 4–5 szintű mélyválasztót?

Számos bevált gyakorlatot kell keresni. Itt csak néhány ezek közül:

  1. 20 protips a modern CSS írásához
  2. Moduláris CSS elnevezési konvenciók
  3. Vagy ez a hatalmas útmutató a CSS-hez.

Ahhoz, hogy jobb eszközöket kapjon a gyorsabb, hatékonyabb és kevesebb hibával történő munkához. Meg kell próbálnia elkészíteni oldalt az első alkalommal anélkül, hogy újra kellene írnia, szerkesztenie vagy törölnie kellene a kód egyes részeit.

Már a kezdetektől előre kell terveznie!

Hogyan fognak működni az alkatrészek egymással? Mi van beágyazott, mi fogja örökölni a stílusokat?

Meg kell tanulnia jól megtervezni

Ez döntő fontosságú. Az elejétől kezdve, amikor megvizsgálja a mellékelt maketeket, prototípusokat vagy terveket, meg kell terveznie az elrendezést és a jelölési struktúrát.

Mik az elemek, hol használják őket egyszer? Valahogy különböznek egymástól? Ugyanazok a szabályok különböznek egymástól?

Mindez megmondja, hogy milyen módosítókra van szüksége, hogyan kell felépíteni a jelölést, hogy a lehető legnagyobb mértékben újrafelhasználhassa.

Vegye figyelembe a „hibakeresés” és az „újragondolás részét” :) És igen, ahelyett, hogy egy szuper okos automatizálási eszközt találna ki, próbáljon mindent előbb optimalizálni. Csak akkor, ha szükséges, gondoljon az automatizálásra. Https://xkcd.com/1319/

Ez a tervezés később időt és pénzt takarít meg. Minél tovább növekszik a projekt, annál fontosabb, hogy jó alapot kapjon. Ez valami, amit nem fog megtanulni kis projektekkel.

És ha nem rendben van a nagyobb kódbázis fenntartásával, és sok ember dolgozik rajta, akkor mindenképpen meg kell vizsgálnia a projekt teljes hatókörét, és meg kell terveznie, hogy mindent felépítsen.

Annak érdekében, hogy ennek nagy részét rendezni lehessen, más fejlesztők előálltak az elnevezési konvenciókkal. Szabálykészlet az alkatrészek, gyermekelemek, módosítók, segédprogramok és így tovább megnevezéséhez.

És mindegyik jól használható különböző projektekben. De ha elég jól ismeri a hatókört és a korlátozásokat, akkor kiválaszthatja a legjobbat a projektjéhez.

  • Megint a moduláris elnevezési konvenciók a sass blogból
  • Bevezetés az objektum-orientált CSS-be (OOCSS)
  • SMACSS
  • BEM
Milyen érzés harcolni a CSS-sel, ha semmit sem rendeznek? Egyre több tulajdonság felülírása, módosítása, módosítása és hozzáadása leggyakrabban olyan rendetlenséget eredményez, amely könnyen eltörik.

Sokan vannak, meg kell találni azt, ami megfelel az Ön igényeinek legjobban. De azt javaslom, hogy olvassa el a dokumentációt, az okot és a problémákat, amelyeket ezek az egyezmények megoldanak.

Lehet, hogy egyiket sem használja, de fontos tudni, miért léteznek.

TL; DR

  • Írjon minél több CSS-t. Ha nem talál olyan jó projektet, amelyen dolgozni szeretne, fogjon valahol helyet a tervből, és hajtsa végre.
  • Javítsa a kódot minden alkalommal. Próbáljon minden egyes elemet okosabb módon írni minden tanulás közben, amíg hosszú távon elégedett a megközelítéssel.
  • Tanuljon a nagy fiúktól - nézze meg, hogy a nagyszabású webhelyek hogyan csinálják. Nézze meg, mit tanulhat onnan, és hajtsa végre a projektjein.
  • Használja vagy legalább megértse, miért léteznek elnevezési konvenciók. Tudja meg, milyen problémákat old meg. Döntse el, melyik a legmegfelelőbb a projektjéhez.

A CSS egyszerűnek tűnik, de csak annyi van, ami rosszul fordulhat elő. Miután 5000 vonalat ment, a dolgok valóban rendetlensé válhatnak. A rossz tervezés miatt a dolgok felülíródnak, a nem megfelelő médialekérdezések váratlan pontokban válnak szükségessé, a reagáló szabályok rémálommá válhatnak.

A jobb fejlődés érdekében sokat kell olvasnia ezekről a kérdésekről, meg kell határoznia azokat a saját kódjából, és meg kell terveznie az alkalmazás / webhely felépítésének módját, hogy neked mindenekelőtt aggódjon.

Ha tetszett ez a cikk, kérjük, ne felejtsd el megütni az alábbi szívikonot.