Werken met Cascading Style Sheets (CSS) kan moeilijk zijn voor beginners. Met behulp van CSS kunt u het uiterlijk van uw toepassing structureren, bijwerken en onderhouden. Maar de taal vereist vaardigheden om HTML-pagina's te manipuleren om de gewenste lay-out te krijgen.
Hier zijn enkele fouten die u moet vermijden bij het werken met CSS. Ze besparen u tijd en vergemakkelijken uw ontwikkelingsproces.
1. px gebruiken voor lettergroottes
De eenheid "px" staat voor pixels. U kunt het gebruiken om verschillende lengtes op een webpagina uit te drukken, van de breedte en hoogte van een element tot de lettergrootte.
px vergrendelt uw ontwerp echter op een vast formaat voor alle schermen. Een afbeelding in px kan de volledige breedte van het ene scherm beslaan en slechts een klein deel van een ander scherm. Als u een meer proportioneel element wilt, gebruik relatieve metingen zoals rem, of percentages (%).
De beste relatieve meting om te gebruiken is rem. Deze eenheid verwijst naar de lettergrootte van het hoofdelement die een lezer vaak kan instellen in zijn browserinstellingen. Je kunt de impact van px en rem op een element zien in het volgende voorbeeld:
html>
<HTML>
<hoofd>hoofd>
<lichaam>
<h1>Dit is rubriek 1h1>
<h2>Dit is rubriek 2h2>
<P>Dit is een alinea.P>
<P>Dit is een andere alinea.P>
lichaam>
html>U kunt de lettergroottes in dit document opmaken met behulp van px-eenheden met de volgende CSS:
h1 {
lettertypegrootte: 50px;
}h2 {
lettertypegrootte: 30px;
}
P {
lettertypegrootte: 15px;
}
De resulterende pagina ziet er acceptabel uit wanneer u deze op een groot scherm bekijkt:
Maar het ziet er niet representatief uit op een kleiner scherm, zoals op een telefoon:
Pas vervolgens rem toe op dezelfde inhoud. Specificeer een basislettergrootte op het html-element en de grootte van andere elementen met behulp van rems, zoals hieronder geïllustreerd:
html {
lettertypegrootte: 16px;
}h1 {
lettertypegrootte: 3rem;
}h2 {
lettertypegrootte: 2rem;
}
P {
lettertypegrootte: 1rem;
}
Let op het verschil tussen de grote en kleine schermen. Met rem schaalt de inhoud beter, ongeacht de schermgrootte. De elementen zullen nooit groter zijn dan de ingestelde schermgrootte. Daarom is het beter om relatieve lengtes te gebruiken in plaats van pixels.
Op een desktopscherm:
Op een klein scherm is tekst in remeenheden nog leesbaar:
2. Al uw stijlen in één bestand stoppen
Het gebruik van één CSS-bestand voor een groot project kan een puinhoop veroorzaken. Je hebt een bestand met lange regels code die verwarrend zullen zijn bij het updaten. Probeer verschillende bestanden te gebruiken voor CSS-stijlpagina's voor verschillende componenten.
U kunt bijvoorbeeld verschillende bestanden hebben voor navigatie, koptekst en voettekst. En een andere voor secties op het lichaam. Door uw CSS-bestanden te scheiden, kunt u uw app structureren en de bruikbaarheid van code stimuleren.
3. Inline CSS ongepast gebruiken
In vanilla CSS kun je net als op HTML-pagina's stijlen schrijven CSS-frameworks zoals Bootstrap en TailwindCSS. Met Inline CSS kunt u een unieke stijl toepassen op een HTML-element. Het gebruikt het stijlattribuut van het HTML-element.
De volgende code is een voorbeeld van inline CSS.
<h2stijl="kleur groen;">Dit is een groene rubriekh2>
<Pstijl="kleur rood;">Dit is een rode paragraaf.P>
De tekst zal er als volgt uitzien:
HTML met alleen inline CSS kan echter rommelig zijn. Aangezien er geen andere locatie is voor CSS, bestaat alle CSS in hetzelfde bestand als de HTML. Het zal er druk uitzien. Het bewerken van zo'n bestand is moeilijk, vooral als het niet jouw code is.
Met inline CSS moet je ook code schrijven voor elk element. Dit verhoogt de herhaling en vermindert het hergebruik van code. Gebruik altijd een combinatie van externe stylesheets en inline CSS om uw webpagina's te stylen.
4. Overmatig gebruik !belangrijk
In CSS, de !belangrijk regel voegt meer belang toe aan een eigenschap/waarde. Het overschrijft andere stijlregels voor die eigenschap op dat element.
Je zou er maar een paar moeten hebben !belangrijk regels in je code. Gebruik het alleen als het nodig is. Het heeft geen zin om code te schrijven en deze vervolgens te overschrijven. Uw code ziet er rommelig uit en veroorzaakt problemen wanneer deze op sommige apparaten wordt uitgevoerd.
html>
<html>
<hoofd>hoofd>
<lichaam>
<P> Ik ben oranje P>
<Pklas="mijn klas"> ik ben groen P>
<PID kaart="Mijn ID"> Ik ben blauw. P>
lichaam>
html>CSS:
#Mijn ID {
Achtergrond kleur: blauw;
}.mijn klas {
Achtergrond kleur: groente;
}
P {
Achtergrond kleur: oranje !belangrijk;
}
Het resultaat is zo:
5. Niet volgen van naamgevingsconventies
CSS heeft naamgevingsconventies die ontwikkelaars begeleiden bij het schrijven van standaardcode. Dit is essentieel als je eindigt debuggen van het CSS-bestand op een toekomstige datum.
Een van deze standaarden omvat het gebruik van koppeltekens om gegroepeerde woorden van elkaar te scheiden. Een andere is het benoemen van een selector op basis van wat het doet. Dus wie ernaar kijkt, hoeft niet te raden. Het maakt het ook gemakkelijker om code te lezen, te onderhouden en te delen. Bijvoorbeeld:
In plaats van dit:
.afbeelding1 { marge-links: 3%; }Schrijf het zo:
.boy-beeld { marge-links: 3%; }Als je naar de stylesheet kijkt, weet je precies voor welke afbeelding de code is. De HTML/CSS-stijlgids van Google somt nog veel meer conventies op die elke ontwikkelaar zou moeten kennen.
Commentaar schrijven is de meest ondergewaardeerde vaardigheid in programmeren. Veel mensen vergeten opmerkingen te schrijven om hun code uit te leggen. Maar het scheelt tijd. Opmerkingen zijn essentieel voor het lezen en onderhouden van code.
Aangezien CSS losjes gestructureerd is en iedereen zijn eigen conventies kan ontwikkelen, zijn opmerkingen essentieel. Het is een goede gewoonte om goed gestructureerde opmerkingen te gebruiken om uw stylesheet uit te leggen. U kunt opmerkingen schrijven waarin secties van de code worden uitgelegd en wat ze doen.
/* video-elementen hebben ruimte nodig om te ademen */
.video {
marge-top: 2em;
}
/* styling van de heldensectie */
.begroeting {
marge-top: 1em;
}
7. Niet van tevoren ontwerpen
Veel mensen doen het, maar het is een ernstige vergissing om te beginnen met coderen zonder een plan. CSS bepaalt hoe de structuur van je front-end eruit ziet. Het design zegt veel over je programmeerskills.
Een ontwerp voor uw site verduidelijkt uw visie en de middelen die nodig zijn om u daar te krijgen. Heb een mentaal beeld van uw project. Ontwerp het dan op papier of gebruik een ontwerptoolkit zoals Canva visualiseren wat je wilt.
Wanneer u een volledig beeld van het project hebt, verzamelt u al uw bronnen en begint u met coderen. Het bespaart u tijd en redundantie.
Waarom u deze aanbevelingen zou moeten overwegen
Als u toepassingen op het web ontwikkelt, gebruikt u CSS. Goed werken met CSS vereist oefening en het volgen van de standaardconventies. Conventies maken uw code niet alleen leesbaar, maar ook onderhoudbaar.
Het schrijven van gestandaardiseerde code bespaart u tijd en moeite. De tijd die u zou hebben besteed aan het formatteren van de front-end, kunt u besteden aan complexere functies. Het zorgt er ook voor dat je code kunt hergebruiken en delen met anderen. Schrijf betere code door de vastgestelde conventies te volgen en word een betere ontwikkelaar.
