7 vigtige tip til at skrive bedre CSS

Et af de største problemer i programmering er at håndtere vedligeholdelse. I et virkeligt scenarie begynder vi ikke altid at udvikle projekter fra bunden. For det meste får vi tildelt (eller tager) et projekt, der allerede er skrevet måske et par år før eller endnu længere.

For at arbejde effektivt på dette projekt skal vi først forstå kildekoden. Dette er det punkt, hvor vi straks indser vigtigheden af ren kode. Som udviklere skal vi prøve at skrive vores kode så rent som muligt.

Dette er også tilfældet for CSS. Der er nogle punkter, vi skal være opmærksomme på, når vi skriver CSS. I dette indlæg vil jeg gerne dele nogle af de vigtigste med dig. Jeg tror, ​​at disse 7 tip hjælper dig med at forbedre kvaliteten af ​​din CSS-kode.

Så lad os begynde ... ‌ ‌

1. TØRR

DRY står for "Don't Repeat Yourself" . Dette er et generelt softwareudviklingsprincip og kan anvendes på ethvert programmeringssprog såvel som i CSS. Som vi kan forstå ud fra dets navn, har DRY til formål at undgå eller reducere gentagelse så meget som muligt.

For eksempel kan vi oprette 3 CSS-klasser til 3 knapper som denne:

.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; }

Eller vi kan bruge DRY-princippet ved at skrive de fælles regler en gang i en ekstra klasse og de forskellige regler hver i andre klasser:

.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; }

Som vi kan se, undgår anvendelse af DRY-princippet gentagelse, mindsker antallet af linjer og forbedrer læsbarheden og jævn ydeevne.

2. Navngivning

Navngivning af CSS-vælgere er et andet vigtigt punkt for at skrive bedre CSS. Navnet på en vælger skal være selvbeskrivende og læsbar ...

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

Normalt,

er et HTML-tag og står for afsnit. Ovenfor kan vi ikke rigtig forstå, hvad klasse p er. Desuden bør du undgå navne som myFirstForm , og jeg kan ikke råde ved hjælp camelcase .

Brug i stedet deklarative navne (adskilt af en bindestreg til flere navne):

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

Jeg synes navnene giver mere mening nu :)

At navngive ting i programmering er ikke så let, men der er forskellige navngivningskonventioner, som du kan bruge i dit projekt. BEM (blokelementmodifikator) er en af ​​dem. Jeg har arbejdet med BEM før, og jeg kan anbefale det.

3. Brug ikke inline-stilarter

Der er argumenter på nettet om dette: nogle fortæller dig, at du aldrig skal bruge inline-stilarter, mens andre hævder, at det i nogle tilfælde kan være nyttigt.

Efter min mening er den bedste praksis faktisk ikke at bruge integrerede stilarter. Jeg vil her fokusere på, hvorfor vi ikke skulle.

Adskillelse af bekymringer

I henhold til princippet om adskillelse af bekymringer skal design (CSS), indhold (HTML) og logik (JavaScript) adskilles af grunde som bedre læsbarhed og vedligeholdelse.

Inkludering af CSS-regler i HTML-tags bryder denne regel:

 Some Text 
Vi skal hellere beholde vores stylingsregler i eksterne CSS-filer.

Vanskeligheder ved søgning

Et andet problem ved brug af inline-stilarter er, at vi ikke kan søge efter dem. Så når vi skal foretage en ændring i styling, ser vi normalt efter CSS-vælgere af HTML-elementet.

Lad os for eksempel ændre skriftstørrelsen på teksten på vores webside. For at gøre det finder vi først den specifikke del i browseren, hvor ændringen er nødvendig ved at se på HTML-strukturen:

 Some Text 

Så er vi nødt til at finde vælgeren, som er den tekstfede klasse her. Endelig går vi til den klasse og foretager ændringerne:

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

Men hvis reglerne er skrevet inline-stil i stedet for at bruge klasser:

 Some Text 

Selvom vi finder HTML-koden, kan vi ikke vide, om der er andre regler for skriftstørrelse inde i HTML eller ej. Da der ikke bruges nogen vælger, skal vi gennemgå alle HTML-siderne en efter en, prøve at finde de andre regler for skriftstørrelse og ændre dem også.

Ville det ikke være lettere med en CSS-vælger? Men der er noget endnu værre ...

Problemer med specificitet / overskrivning

Inline-Styles har den højeste specificitet blandt CSS-vælgere (når vi ikke tæller vigtige tags ).

I betragtning af at vi bruger både en klasse og en inline-stil til et element:

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

Her vil skriftstørrelsen på teksten være 14 pixel , fordi inline-typografier har højere specificitet end CSS-klasser. Når du foretager en ændring i klassen:

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

Skriftstørrelsen vil stadig være 14 pixel. Så din ændring i CSS-klassen fungerer ikke, hvilket får dig til at ende med at sige:

"Hej, hvorfor fungerer min CSS-kode ikke? Jeg hader CSS!"

og få dig til at bruge et ! vigtigt tag, der gør magien:

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

Hvilket er et stort nej-nej og fører os til det næste punkt ...

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.

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!