Laatste regel afsluiten!
Jan R gaf een voorbeeldcode. Daarvan zei ik: dat is eigenlijk een lijst en kun je dus beter in html als <ul> opmaken. Omdat het een specifieke lijst lijst is (met komma's) voeg je dan aan de ul de class 'comma-list' (of hoe je het ook wil noemen) toe. Die class gebruik je dan om de komma's toe te voegen. Op het moment dat je dan een komma-gescheiden lijst wil maken, dan gebruik je die class.
Vervolgens zeg jij:
>> De enige aanvulling die ik nog heb is om de CSS class niet direct aan .comma-list > li te binden.
>> In mijn optiek kan je CSS beter zo min mogelijk, tot nooit, direct koppelen aan de HTML-tags.
>> Als je li als selector gebruikt, geldt dat meteen voor alle li's, en kan opmaak in elkaar over lopen door inheritance zonder dat je dat in de gaten hebt of wilt.
Wat bedoel je precies? Je gebruikt toch die class? Dan geldt het toch helemaal niet voor alle li's.
Gewijzigd op 11/01/2023 15:06:36 door Ozzie PHP
Als algemeen op de site is aangegeven dat een <li> een opsommingsteken dat uitziet als een en driehoek, en rood is, dan zal nu ook je lijstje met komma's rood worden en driehoekjes tonen.
Dat geeft dan weer ellende om dat weer terug te draaien voor de li in deze komma-lijst. Dan snap ik de opmerking van Ad.
Hier gaat het om een <ul> met een class en daaronder de <li> in de css-definitie. Dat staat vlak naast elkaar, en daar zie ik niet veel problemen in.
Maar in het licht van wat ik hierboven zeg, zou je dan misschien juist de li de class-aanduiding moeten geven.
Vandaag nog zoiets gezien: kennelijk vond mijn voorganger het handig om alle <h2> op de pagina wit te maken als het in een <div class="nieuws"> staat. Dat is honderd regels verderop.
En in combi met een witte achtergrond vandaag niet handig.
Dan geef ik dat liever lokaal in een blok aan, ipv dat alle <h2>'s maar gelijk moeten zijn.
En dan is <h2 class=nieuws> duidelijker.
Het probleem komt vaak pas na een flinke tijd boven.
Ik had het eerder al duidelijker kunnen opschrijven.
>> En dan is <h2 class=nieuws> duidelijker.
Dat hangt er maar net vanaf. Het is niet vreemd om te zeggen binnen het blok nieuws is de achtergrond zwart en zijn de h2's wit. Dat is logischer dan alle h2's stuk voor stuk wit maken. Blijkbaar gaat het in jouw voorbeeld ergens anders fout, maar dat neemt niet weg dat de initiële gedachte (waarschijnlijk niet helemaal lekker uitgevoerd) wel degelijk prima is.
Gewijzigd op 11/01/2023 16:57:47 door Ozzie PHP
Het enige dat ik duidelijk wilde maken is dat je soms onverwachte dingen kan krijgen met CSS omdat CSS cascading is.
Vergelijk dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<style>
.d { color: blue; }
.d span { text-decoration: underline; }
.t { color: red; }
.t span { font-weight: bold; }
</style>
<div class="d">
In deze tekst <span>is dit speciaal</span>.
<p class="t">En deze tekst is <span>onbedoeld onderstreept</span>.</p>
</div>
.d { color: blue; }
.d span { text-decoration: underline; }
.t { color: red; }
.t span { font-weight: bold; }
</style>
<div class="d">
In deze tekst <span>is dit speciaal</span>.
<p class="t">En deze tekst is <span>onbedoeld onderstreept</span>.</p>
</div>
met dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<style>
.alinea { color: blue; }
.alinea .uitgelicht { text-decoration: underline; }
.regel { color: red; }
.regel .markering { font-weight: bold; }
</style>
<div class="alinea">
In deze tekst <span class="uitgelicht">is dit speciaal</span>.
<p class="regel">En deze tekst is <span class="markering">nu goed gemarkeerd</span>.</p>
</div>
.alinea { color: blue; }
.alinea .uitgelicht { text-decoration: underline; }
.regel { color: red; }
.regel .markering { font-weight: bold; }
</style>
<div class="alinea">
In deze tekst <span class="uitgelicht">is dit speciaal</span>.
<p class="regel">En deze tekst is <span class="markering">nu goed gemarkeerd</span>.</p>
</div>
Het verschil is subtiel, maar met meer CSS (wat meestal het geval is) worden verschillen al snel groter. Bovenstaande illustreert dat je er beter aan doet HTML tags als CSS selector helemaal te vermijden.
Gewijzigd op 12/01/2023 16:28:13 door Ad Fundum
Aan jouw eerste voorbeeld is niks vreemds. Als je in jouw "d" class aangeeft dat iedere span moet worden onderstreept, dan gebeurt dat ook in een paragraaf die in die "d" class staat. Dat is gewoon overerving. Dat is hoe CSS werkt. Dat is dus niet 'onbedoeld onderstreept', maar simpelweg niet juist ingesteld :-) Dat het daar onderstreept wordt, is logisch.
Quote:
Oké. Dit heeft alleen dus niks met mijn voorbeeldcode te maken ;-)
Dat zeg ik. Fijn dat we het eens zijn.
Het eerste voorbeeld is om aan te geven dat als je HTML tags gebruikt in CSS selectors, dat het gemakkelijk onbedoelde effecten kan geven. Want wat is een "span", en voor welk gebruik is de onderstreping bedoeld? Dat blijkt niet uit de CSS bij gebrek aan semantische naamgeving.
Als de CSS code nog geen 50 regels lang is, is dat geen probleem. Maar bij een beetje website of webapplicatie is de CSS al snel 1000+ regels lang. En dan ben je bij een conflict met opmaak wel even bezig om de CSS uit elkaar te halen en te maken zoals je het eigenlijk had bedoeld. Je kunt die situatie voor zijn met de tip in het tweede voorbeeld.
Maar zoals altijd: YMMV.
Dat is waar ... dat kan flink oplopen. De keuze is om een goede balans te vinden tussen algemeen specificeren waar het kan, en specifiek genoeg waar nodig. Ieder element een class geven <h2 class="nieuws"> lijkt mij in ieder geval niet wenselijk. Dat kun je dan beter via de omsluitende div (container) doen, dus .nieuws h2. Maar de kans is reëel dat alle h2's overal hetzelfde formaat moeten hebben, en dan gebruik je dus weer gewoon h2, en de uitzonderingen pas je aan via een omsluitende div, of met een class op het element zelf. En als het een sporadische aanpassing is, kun je ook nog inline style toepassen.
Voor performance in de browser maakt het niet uit, het vraagt slechts een beetje meer bandbreedte wanneer je zonder JavaScript / WebAssembly front end werkt.
Als ik opmaak wil delen met andere tags maak ik vaak gebruik van meerdere classes per tag met in de naamgeving waar de opmaak voor is bedoeld.
Het is wel zo dat ik aan het begin van de CSS bepaalde elementen 'reset', zoals met een de elementen html, body, div, etc. die krijgt standaard 0 marge. Ook alle headers krijgen dezelfde opmaak voor positionering. Maar zodra ik iets opgeef in CSS dat afwijkt van een zo minimalistisch en leeg mogelijke CSS, is het al belangrijk om classes te gebruiken. Dat voorkomt dat CSS overgenomen wordt op tags waar je dat niet wilt.
Maar zo zijn er wel meer (off-topic) inzichten die ik na langere tijd tegenkwam. Zo wil je in CSS eigenlijk nooit met ID's '#' werken. Als je dan een style wilt hergebruiken gaat dat mis, omdat ID's vanwege de functie maar 1x voor zouden moeten komen in HTML.
Dan is het nu tijd om het topic terug te geven aan de vragensteller. Er zijn meerdere opties om waarden aan elkaar te plakken in een string. Het kan in elke laag van de applicatie; in de database met een concatenatiefunctie voor strings zoals GROUP_CONCAT of STRING_AGG, in PHP met een lus of implode(), in de browser met JavaScript of CSS. Wat het handigst is hangt af van de context van het samenvoegen.
Gewijzigd op 14/01/2023 10:04:38 door Ad Fundum
Omdat het onhandig is om iedere h1 h2 h3 of p een class te geven en in veel (of bijna alle) gevallen ook totaal onnodig. Daarbij kun je ook denken aan situaties waarin jij of de klant iets in een cms-editor moet invoeren. Dan is het hartstikke onhandig als je bij ieder element een class moet toevoegen.
>> Zo wil je in CSS eigenlijk nooit met ID's '#' werken.
Daar kan ik me iets bij voorstellen. Een id komt maar 1 keer op een pagina voor. Soms ontkom je er niet aan omdat een bepaald framework of plugin er gebruik van maakt. Of je hebt zelf iets gemaakt wat maar 1 keer op de pagina voorkomt, maar dan moet je inderdaad heel zeker zijn dat het niet vaker voorkomt. Anders is inderdaad een class op z'n plaats.
Toevoeging op 14/01/2023 22:48:13:
@Kees Mulder: is jouw vraag inmiddels voldoende beantwoord?
https://www.disney.com
Gewijzigd op 03/04/2023 09:57:50 door - Ariën -
Dit topic is gesloten.