More

    CSS codestyle-a jó ízlés szabályai az elrendezésben

    Gyönyörű kód nem írja magát szeptember 14, 20212 minutes35https: / / gbcdn.mrgcdn. ru/feltöltések/post/2752/og_image / 38a96bea7d0ca1615b41bbe362efe65b.png

    Az előző cikkben megvizsgáltuk a HTML formázási szabályokat, most beszéljünk a CSS-ről. Ezek a szabályok segítenek, hogy a kód olvashatóbb, könnyebb megérteni.

    Osztályok tervezése

    Írja be az osztályok nevét latinul és angolul. Ha az angol nyelv nehéz, az online fordítók segítenek-eléggé megfelelnek a feladatnak. Ez a szabály segít a kód karbantarthatóságának növelésében, valamint a kódolással kapcsolatos problémák elkerülésében.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке1

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке2

    Használjon kisbetűt. Az is szokás, hogy csak kisbetűket használnak az osztálynevekben. A terek helyett általában kötőjel (“- “szimbólum) van.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке3

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке4

    Használjon népszerű címkéket. Már létezik egy lista a közös nevekről a fejlesztők körében. Például az img-t képekhez (rövid kép — kép), valamint gombokhoz (Angolul “gomb” – ként fordítva) használják. 

    Az elrendezés során a címkék megváltozhatnak, és előfordulhat, hogy ugyanazok a stílusok nem felelnek meg a hozzárendelt címkéknek. Például egy oldalon a bekezdés paraméterei megegyeznek a felirat paramétereivel egy másik oldalon. 

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке5

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке6

    Próbálja meg elkerülni a számozást, mert akkor nehéz lesz navigálni a kódot, hogy megértsék a különbséget.

    OLVASS TOVÁBB:  A Fullstack Fejlesztő útja a Novgorod régióból Londonba

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке7

    A nevek megkülönböztető paraméterek alapján vagy a gomb használatának blokkjaiból adhatók meg. 

    Az alábbi példában megszabadulhat a gomb – 2 választótól a gombosztály használatával a méretekhez, a fehér szín pedig a színhez. Így aztán rugalmasan újra felhasználhatjuk a második választót. 

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке8

    Egy projekt-egy módszertan. Ha úgy dönt, hogy módszertant használ a projektben, például a BEM vagy az atomic CSS, akkor az egész projekt során egyetlen megközelítést kell követnie. A keverési megközelítések megszakítják a szerkezetet. Érdemes megemlíteni, hogy néha egy atomi megközelítés keveredik a BEM-be az Általános stílusokhoz-például a listák stílusainak visszaállításához. De ez inkább kivétel a szabály alól, mint maga a szabály. 

    Tegyen egy pontosvesszőt a tulajdonságok végére. Ez egy nagyon fontos szabály, mivel ennek a jelnek a hiánya hibákat okozhat.

    OLVASS TOVÁBB:  Információs rendszerek építész-új szakma

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке9

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке10

    Behúzások és terek használata

    A HTML-hez hasonlóan a CSS-nek is megvannak a saját szabályai A behúzások és terek formázására.

    Indítson el egy tulajdonságot az osztályban, amelynek behúzása 2 szóköz vagy 1 lap.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке11

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке12

    Tegyen egy helyet az ingatlan és az érték között.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке13

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке14

    Helyezzen egy üres karakterláncot a kiválasztók közé.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке15

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке16

    Helyezzen egy helyet a választó és a nyitókonzol közé.

    OLVASS TOVÁBB:  Új intenzitás az Autotestek létrehozásában a React-ben

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке17

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке18

    Tulajdonságok tervezése

    A CSS-nek nincsenek szigorú szabályai és ajánlásai a tulajdonságok sorrendjére vonatkozóan. De számos megközelítés létezik erre a kérdésre.

    Rendezze a tulajdonságokat betűrendben. 

      Кодстайл CSS – правила хорошего тона при вёрстке19

    Rendezzen tulajdonságokat egy bizonyos logika szerint. Íme néhány példa az ilyen szabályok használatára: 

    • az első lehetőség. 
    • a második lehetőség.

    És néhány szabály a jó formában

    Az alábbiakban felsoroljuk azokat a szabályokat, amelyek nem állítják, hogy kötelezőek. De segítségükkel javíthatja a kód minőségét.

    Az egyik típusú idézőjelek minden fájlban. Például, ha kettős idézeteket választott, akkor mindig használja őket.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке20

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке21

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке22

    Ha 0-t ír a tulajdonságra, akkor ne adja meg a mértékegységet.

    Helytelen:

    Кодстайл CSS – правила хорошего тона при вёрстке23

    Helyesen:

    Кодстайл CSS – правила хорошего тона при вёрстке24

    A CSS érvényességét online érvényesítő segítségével is ellenőrizheti.

    Friss cikkek

    A történet arról, hogy milyen nehéz volt weboldalt készíteni a Prostobank számára

    Miután meghallotta a "bank weboldalát", a legtöbb fehér hátteret fog elképzelni, amelynek különböző oldalain nyereséges hitelek kamatikonokkal másznak az arcodba. De nem minden bank...

    5 ok arra, hogy inspirálja a gyermeket a programozással

    A programozás olyan hobbivá válhat, amely a jövőben hasznos lesz, és a felnőtt élet készségeinek fejlesztése20213. szeptember 22. perc38A cikk szerzője Lisa TurlychkinaA cikk...

    Kapcsolódó történetek

    HOZZÁSZÓLOK A CIKKHEZ

    Kérjük, írja be véleményét!
    írja be ide nevét

    Maradjon op - Ge a napi híreket a postaládájában