7 fontos tipp a jobb CSS megírásához

A programozás egyik legnagyobb kérdése a karbantartás. Valódi helyzetben nem mindig kezdjük el a projektek fejlesztését a semmiből. Leginkább egy olyan projektet jelölünk ki (vagy vállalunk), amelyet talán már pár évvel korábban írtak, vagy még tovább.

Ahhoz, hogy hatékonyan dolgozzunk ezen a projekten, először meg kell értenünk a forráskódot. Ez az a pont, amikor azonnal rájövünk a tiszta kód fontosságára . Fejlesztőként meg kell próbálnunk a lehető legtisztábban írni a kódunkat.

Ez a CSS esetében is érvényes. Van néhány pont, amelyre figyelnünk kell a CSS írásakor. Ebben a bejegyzésben a legfontosabbakat szeretném megosztani veletek. Úgy gondolom, hogy ez a 7 tipp segít javítani a CSS-kód minőségét.

Tehát kezdjük ... ‌ ‌

1. SZÁRAZ

A DRY jelentése: "Ne ismételje meg önmagát" . Ez egy általános szoftverfejlesztési elv, és bármely programozási nyelvben, valamint CSS-ben is alkalmazható. Mint a nevéből megértjük, a DRY célja az ismétlés lehető legnagyobb mértékű elkerülése vagy csökkentése.

Például létrehozhatunk 3 CSS osztályt 3 gombhoz, így:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

Vagy használhatjuk a DRY elvet úgy, hogy egy közös osztályban egyszer megírjuk a közös szabályokat , más osztályokban pedig a különböző szabályokat:

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

Mint láthatjuk, a DRY elv alkalmazása elkerüli az ismétlést, csökkenti a sorok számát, javítja az olvashatóságot és az egyenletes teljesítményt.

2. Névadás

A CSS szelektorok elnevezése egy másik fontos pont a jobb CSS megírásához. A választó neve legyen önleíró és olvasható ...

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

Normális esetben,

egy HTML tag és a bekezdést jelenti. Fent nem igazán tudjuk megérteni, mi az a p osztály . Ezenkívül kerülje az olyan neveket, mint a myFirstForm , és nem tanácsolom a teve tok használatát .

Ehelyett használjon deklaratív neveket (több névhez kötőjel választja el):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

Szerintem a neveknek most már van értelme :)

A dolgok elnevezése a programozásban nem olyan egyszerű, de különféle elnevezési szokások vannak, amelyeket felhasználhat a projektjében. A BEM (blokkelem-módosító) egyike ezeknek. Korábban dolgoztam a BEM-mel és tudom ajánlani.

3. Ne használjon Inline-stílusokat

Nos, az interneten vannak ezzel kapcsolatos érvek: vannak, akik azt mondják, hogy soha ne használja a belső stílusokat, míg mások azzal érvelnek, hogy ez bizonyos esetekben hasznos lehet.

Véleményem szerint a legjobb gyakorlat valójában az inline stílusok használata. Itt arra fogok koncentrálni, hogy miért ne kellene.

Az aggodalmak elkülönítése

Az aggályok elkülönítésének elvének megfelelően a dizájnt (CSS), a tartalmat (HTML) és a logikát (JavaScript) el kell különíteni olyan okokból, mint a jobb olvashatóság és a karbantartás.

A CSS-szabályok HTML-címkékbe történő felvétele megsérti ezt a szabályt:

 Some Text 
Stílusszabályainkat inkább külső CSS fájlokban kell tartanunk.

A keresés nehézségei

Az inline stílusok használatának másik problémája, hogy nem tudunk rájuk keresni. Tehát amikor változtatni kell a stíluson, akkor általában a HTML elem CSS-választóit keressük.

Változtassuk meg például a weboldal betűméretét . Ehhez először meg kell találnunk a böngészőben azt a bizonyos részt, ahol a változtatásra van szükség, ha megnézzük a HTML struktúrát:

 Some Text 

Ezután meg kell találnunk a választót, amely itt a félkövér szöveg osztály. Végül arra az osztályra járunk, és elvégezzük a változtatásokat:

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

De ha a szabályokat inline stílusban írják osztályok használata helyett:

 Some Text 

Még ha megtaláljuk is a HTML címkét, nem tudhatjuk, hogy vannak-e más betűméret- szabályok a HTML-ben, vagy sem. Mivel nincs választó, ezért egyenként meg kell haladnunk az összes HTML-oldalt, meg kell próbálnunk megtalálni a többi betűméret- szabályt, és azokat is megváltoztatni.

Nem lenne egyszerűbb egy CSS-választóval? De van még ennél is rosszabb ...

Konkrét / felülírási kérdések

Soros-stílusok a legmagasabb specificitása között CSS szelektor (ha nem számítjuk ! Important tag ).

Figyelembe véve, hogy mind egy osztályt, mind egy inline stílust használunk egy elemhez:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

Itt a szöveg betűmérete 14 képpontos lesz , mert az inline stílusoknak nagyobb a specifitása, mint a CSS osztályoknak. Ha változtat az osztályon:

.text-bold { font-size: 20px; font-weight: bold; }

A betűméret továbbra is 14 képpontos lesz. Tehát a CSS osztályban végzett változtatása nem fog működni, ami azt eredményezi, hogy a végén ezt mondja:

"Hé, miért nem működik a CSS kódom? Utálom a CSS-t!"

és arra késztet, hogy használj egy ! fontos címkét, amely varázslatokat varázsol:

.text-bold { font-size: 20px !important; font-weight: bold; }

Ami nagy nem-nem, és a következő pontra vezet minket ...

4. Avoid the !important tag

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!