div of p

Door Lord Gaga op 10-02-2015 14:49

4.538 views

Hallo,

Onderaan mijn website zou ik graag een grijze balk willen, met een breedte van 100%.
In deze balk moet één regel komen te staan met een copyright teken, de naam van de website en noem maar op.

Ik weet van mezelf dat ik "dwangmatisch" programmeer (een soort smetvrees, maar dan op gebied van programmeren) en nu stoor ik me heel erg aan iets dat ik hiervoor veel heb gebruikt:


<footer id="footer">
    <p id="copyright">Copyright ...</p>
</footer>

Geen idee waarom, maar het voelt gewoon niet goed aan. Veel liever zou ik het op deze manier hebben:


<footer id="footer">
    <div id="copyright">
        <p>Copyright ...</p>
    </div>
</footer>

In dit laatste geval zou de div, de grijze balk weergeven en de p de inhoud ervan.
Maar nu vraag ik me dus af of dit wel een goede aanpak is?

Ten slotte nog de vraag of er meer mensen zijn die "programmeren met smetvrees", ik stoor me er namelijk heel erg aan en het zit ook behoorlijk in de weg van het leren van nieuwe dingen.

Alvast bedankt!

Ozzie PHP

12-02-2015 21:59

>> Oke, op dit moment doe ik erg m'n best om code te schrijven zónder commentaar, en tot nu toe lukt dit aardig, al dan niet met veel moeite. :P

Dat is niet de bedoeling. Je moet wel degelijk commentaar schrijven, maar niet boven iedere regel. Ik zou zeker boven iedere functie/method een korte omschrijving plaatsen zodat je over een paar maanden nog weet wat de functie doet.

>> De website heeft maar 1 header, 1 footer, etc., daarom gebruik ik id's.

Dat is niet nodig. Het zijn elementen die maar 1 keer voorkomen en juist daarom hoef je ze geen ID te geven. Je kunt ze rechstreeks aanspreken.

>> Mocht ik ooit een article element gebruiken met een header en footer, dan moet deze niet dezelfde stijl krijgen als de header en footer in de layout.

De header/footer in een article spreek je dan (als ik me niet vergis) als volgt via css aan: "article > header { color: red; }".

Lord Gaga

12-02-2015 23:13

Krijgt de header in article dan niet alsnog dezelfde stijl mee van de header in de body?

Ozzie PHP

13-02-2015 00:05

Je kunt dan eerst de algemene header stylen, en daarna de article headers op punten waar die afwijken van de algemene header:


header {
  color: red;
  font-size: 14px;
}

article > header {
  color: blue;
}

Wouter J

13-02-2015 00:35

Alsjeblieft, vermijd het gebruik van >. Deze selector is aanzienlijk trager dan gewoon descendants.

Tevens raad ik aan altijd classes te gebruiken. Dus .article__header bijv. en .page__header. Zie ook artikelen over de BEM methode: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Ozzie PHP

13-02-2015 01:02

>> Alsjeblieft, vermijd het gebruik van >. Deze selector is aanzienlijk trager dan gewoon descendants.

Bedoel je "article header" ipv "article > header"?

Maar waarom altijd classes gebruiken voor iets wat je ook zonder classes kunt aanspreken?

Onbekende gebruiker

13-02-2015 10:14

De descents zijn ervoor om het 1e level elementen aan te spreken.

Ward van der Put

13-02-2015 10:52

>> Maar waarom altijd classes gebruiken voor iets wat je ook zonder classes kunt aanspreken?

Als je BEM verkeerd gebruikt, krijg je inderdaad classitis.

X Y is de descendant combinator.
X > Y is de child combinator.

Handig voor in de bookmarks: cheatsheet met 30 CSS-selectors

Ozzie PHP

13-02-2015 10:57

>> Als je BEM verkeerd gebruikt, krijg je inderdaad classitis

Raad jij dan aan om elementen via de semantiek aan te spreken, of (zoals Wouter voorstelt) overal een class aan geven en die class aanspreken?

Ward van der Put

13-02-2015 11:12

Beide eigenlijk. Probeer het eerst met de taal zelf op te lossen: CSS3. Wordt de taal zelf ontoereikend, dan pas je de BEM-methodiek toe.

Het een sluit het ander niet uit: BEM is vooral een systeem om tot logisch gestructureerde CSS-klassen te komen. Kan het zonder CSS-klassen, dan kan het dus zonder BEM.

Alles uit HTML nog eens overdoen in CSS is onzinnig:


<footer class="footer">
  ...
</footer>

Alleen kun je wel in een situatie verzeilen waarin een browser (meestal the usual suspect) iets niet goed doet en je dat moet omzeilen:


<footer>
  <div class="footer">
    ...
  </div>
</footer>

De vraag is dan dus: moet je dat op voorhand al doen? Ik denk persoonlijk van niet. Een probleem los je op als het zich aandient. Alleen als je grootschalige frameworks bouwt, loont het de moeite om problemen bij voorbaat al uit te sluiten.

Ozzie PHP

13-02-2015 11:23

Helder verhaal waar ik me ook wel in kan vinden. Echter (maar wellicht zit ik er naast) raadt Wouter aan om altijd classes (BEM) te gebruiken, volgens mij vanwege performance (omdat het zoeken naar een class sneller gaat dan het zoeken naar een (genest) element). Dus ik ben ook wel wel benieuwd naar Wouter's exacte beweegredenen.

Reageren

Inloggen om te reageren