Css-files council szervezése 1 - zászlók - css
Nagy CSS-fájlokat kellett írni és dolgoznia? Végtelen gördülést kínáltunk felfelé és lefelé keresve a kód szükséges részét? A gyakran használt CSS fájlok gyakran elég nagyok. Folyamatosan le kell görgetnie néhány képernyőt lefelé, hogy megváltoztasson egy vagy másik szabályt, vagy adj hozzá egy újat. A mostani projekten dolgozva úgy döntöttem, hogy egy kis trükköt használok, aminek köszönhetően majdnem azonnal megtalálom, amire szükségem van.
Csoportos CSS szabályok
Néhány hónappal ezelőtt a CSS Szervezet előző cikkében enyhén megérintettem ezt a témát. Például, ha valaha is megnézted a CSS fájljaidat, akkor valószínűleg észrevette, hogy mindig a fájlokat a legfontosabb szakaszokba osztom. Minden olyan projektben, amelyen dolgozom, az összes CSS kódot a következő részekre osztom:
- Fejléc (fejléc)
- Structure (szerkezet)
- Nav (navigáció)
- Keresés (search)
- Rovatok (fejlécek)
- List (lista)
- Űrlapok (űrlapok)
- Linkek (linkek)
- Egyéb (egyéb)
Ennek a trükknek köszönhetően nagyon könnyű nekem - vagy egy ügyfélnek, aki munkát vállal tőlem - egy bizonyos szabály megtalálásához vagy annak megértéséhez, hogy a terv melyik része vagy ez a szabály vonatkozik. Ennél is fontosabb, hogy ez a szervezési módszer sok időt takaríthat meg, amikor szerkeszteni kell a CSS kódot, különösen akkor, ha korrigálnia kell a régi projekteket, amikor még nem emlékszik arra, hogy mit írt oda.
Hogyan találjuk meg gyorsan?
Tehát hogyan találja gyorsan meg a szabályokat, amikor egy fájlon dolgozik? Egyes alkalmazások lehetővé teszik, hogy a jelölőket olyan dokumentumba helyezzük, amelyet gyorsan meg lehet ugranni egy adott billentyűkombináció megnyomásával. Ez rendben van, ha csak ilyen programot használsz. De még mindig vannak nehézségei minden új CSS-fájlban, ahol a programjelzők még nincsenek elhelyezve.
És ez is előfordul, hogy a "Find" parancs általában nem feltétlenül találja meg, amire szüksége van: azt mondjuk, hogy egy olyan rész van, amelyet az "RDE" rövidítéssel jelölt meg:
A legegyszerűbb megoldás: zászlók
Tegnap eszembe jutott az ötlet. Ha tesz egy kis doboz mellett a szakasz címét - például „=” karakter, amely nem használható a szintaxis osztály nevét (osztály) és az azonosítók (id) - rögtön egy egyszerű szöveges keresés ugrás a kívánt rész számomra. A "Find" ablakban a "= rde" szöveget tárcsázza, azonnal oda mennék, ahol akarok:
Minimális billentyűleütések. Nem zavart más hasonló sorokkal. Az "=" szimbólumot még közvetlenül a szekció címének elé sem kell elhelyezni. A jelenlegi projektben több részem van a "MISC" -ből. Ezért a fejléc legegyedibb szója előtt a "=" zászlót tettem:
Ennek köszönhetően gyorsan eljutok azon a ponton, ahol a listák szabályai csoportosulnak. Ehhez be kell írnia a "= listát" a kereséshez.
Természetesen ez a trükk csak akkor működik, ha szigorúan ragaszkodik a szabályhoz, hogy az összes nagy CSS-fájlt ilyen módon tagolja.
A következő tipp az, hogy miként osztottam le a CSS-fájlt szakaszokra, és hogyan döntenek arról, hogy mely szabályokat kell elhelyezni, melyik részben, ha ez vagy ez a szabály alkalmas erre és egy másik szakaszra.