inspringen head, body

Door Ozzie PHP op 22-02-2013 21:08 gewijzigd op 22-02-2013 21:09

2.845 views

Ola... uit nieuwsgierigheid... springen jullie je <head> en <body> in, of niet?

Inspringen:


<!DOCTYPE html>
<html>
    <head>
        <title>Foo Bar</title>
    </head>

    <body>
        <p>Hallo!</p>
    </body>

</html>

...of niet inspringen?


<!DOCTYPE html>
<html>
<head>
    <title>Foo Bar</title>
</head>

<body>
    <p>Hallo!</p>
</body>

</html>

Wat is het meest gebruikelijk?

Wouter J

23-02-2013 11:05

Moet dat niet dit zijn:

Nee, het mag zonder haakjes. Zolang je maar geen spaties of ", ', `, =, <, en > gebruikt. Zie ook http://mothereffingunquotedattributes.com

Trouwens, waarom een class op <body>? Je hebt toch maar 1 body? Waarom dan in je CSS body.page benoemen? body alleen volstaat toch prima? Wat is de reden? Meerdere soorten <body>'s?

De rede is dat ik met OOCSS en de BEM techniek werk. Vandaar dat je ziet page en page__header ect. In ben tegenwoordig van mening dat je in CSS nooit zomaar een tag mag aanroepen.

En meerdere soorten body elementen heb je op een site heel vaak, dat maakt dit ook heel handig. Denk bijv. aan page--home en page--single-article of page--contact.

Eddy E

23-02-2013 12:11

Zit wat in. De argumenten die Hertog Jan (yum!) aandraagt zijn duidelijk en handig.
Beter dan voor elke pagina een losse CSS-stijlblad extra.
Ik heb nu een algemeen.css die overal wordt ingeladen en een contact.css/nieuws.css/route.css etc. Dat is dan inderdaad niet nodig. Goed idee!

Maar waarom zou je geen tag mogen aanroepen in CSS?
<hr> of <input> (desalniettemin met het type erbij in CSS) kan toch prima? Dat hoeft toch niet per se via een ID of class?

Ozzie PHP

23-02-2013 14:42

Een element kun je ook gewoon los aanroepen. Bijv.


h1 {
  font-size: 15px;
}

Pas als je variaties wilt toepassen op de standaard, kun je met classes gaan werken.


h1.product {
  color: red;
}

Wat betreft die witregels. Ik herken de stijl van Wouter heel erg goed. Ik denk dat ik het zelf ook ongeveer zo doe, maar die willekeur die klopt eigenlijk niet. Óf je moet witregels aanbrengen via een bepaalde structuur, óf je moet helemaal geen witregels aanbrengen. Hmmm...

Nog andere mensen die het wellicht weer anders doen??

Ward van der Put

23-02-2013 14:53

Kijk zeker ook eens naar de Google HTML/CSS Style Guide, want die noemt eigenlijk al het voorgaande al.

En dat Google de HTML begrijpt, is natuurlijk ook om andere redenen nooit verkeerd :)

Ozzie PHP

23-02-2013 14:58

Thanks voor de link Ward. Waar ik benieuwd naar ben, hoe doe jij het? Kun jij eens een voorbeeld geven hoe jouw document opzet met head en body eruit ziet?

Grappig trouwens... op jouw link zie ik nu al dat het beter is om een minteken - te gebruiken dan een liggend streepje voor class namen. Dit button-red is beter dan button_red terwijl ik zelf de laatste manier zou gebruiken eigenlijk

Ward van der Put

23-02-2013 15:03 gewijzigd op 23-02-2013 15:06

Ozzie PHP op 23/02/2013 14:58:18
Waar ik benieuwd naar ben, hoe doe jij het? Kun jij eens een voorbeeld geven hoe jouw document opzet met head en body eruit ziet?

In PHP schrijf ik alles uit, in CSS en JavaScript ook, maar daarna maak ik vrijwel alles minified. Ik ben nog uit de tijd van "elke byte telt".

Ozzie PHP

23-02-2013 15:07

Maar ik bedoel hoe je de structuur van de pagina uitschrijft, zoals dit... hoe zou jij dit doen:


<html>
    <head>
        <title>Foo Bar</title>
    </head>
    <body>
        <p>Hallo!</p>
        <article>
            bladiebla bla bla
        </article>
    </body>
</html>

Ward van der Put

23-02-2013 15:20 gewijzigd op 23-02-2013 15:21

Ja, precies zoals Joren het ook zegt: een inspringing is een container met een begin én ergens verderop een einde. Dus in dit geval niet bij de doctype (want die staat op zich) en niet bij de title (want die is kort en bevat geen extra regeleinden of overbodige spaties):


<!DOCTYPE html>
<html>
  <head>
    <title>Foo Bar</title>
  </head>
  <body>
    <article>
      <p>
        Bla-de-die-bla
      </p>
      <p>
        Nog-meer-bla
      </p>
    </article>
  </body>
</html>

Verder vind ik het wel prettig om in te springen met vier spaties in PHP (de PSR-richtlijn) en twee spaties in HTML, CSS en JavaScript (de Google-richtlijn), zodat iedereen in een oogopslag het verschil ziet tussen server-side en client-side.

Ozzie PHP

23-02-2013 16:07

Dankjewel Ward!

Je gebruikt geen witregels dus zie ik.

Maar je springt maar 2 spaties in? Da's toch onhandig? Mijn editor springt automatisch 4 spaties in (kan ik instellen). Lijkt me niet handig als dat telkes wisselt eigenlijk...?

(Ik zie nu dat Reshad in het voorbeeld hierboven maar 1 spatie inspringt :) )

Ward van der Put

23-02-2013 16:24 gewijzigd op 23-02-2013 16:26

Dat is haast een hoogst persoonlijke werkstijl. Ik spring nieuwe code in met één druk op de Tab-toets. Dat werkt snel én zorgt voor een zichtbaar verschil met de oude code (want die gebruikt spaties). Is het nieuwe ding af, inclusief wat tests, dan gaat de opdracht "Tabs omzetten in spaties" van de editor eroverheen.

Voor het overige houd ik graag een scheiding aan tussen ontwikkeling / test / productie. De productieserver krijgt de minified versie zonder inspringingen en regeleinden, maar in de ontwikkeling moet code leesbaar zijn. De testomgeving ertussenin (vaak een live test.example.com) kan beide versies voorgeschoteld krijgen, afhankelijk van wat je wilt testen.

Reageren

Inloggen om te reageren