inspringen head, body
Inspringen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
</body>
</html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
</body>
</html>
...of niet inspringen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
</body>
</html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
</body>
</html>
Wat is het meest gebruikelijk?
Gewijzigd op 22/02/2013 21:09:00 door Ozzie PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
</body>
</html>
Offtopic:
Als ik naar jou andere topics kijk dan heb ik het idee dat je erg opzoek bent naar "de beste stijl om te programmeren"
Gewijzigd op 22/02/2013 21:23:08 door Jordi Kroon
Ik ben benieuwd naar nog meer reacties. Spring je de <head> en <body> wel of niet in?
Het grote voordeel: de open en sluit tags van een bepaald element staan dan onder elkaar, met alles dat erbinnen zit ingesprongen.
Toevoeging op 23/02/2013 00:18:32:
En nu we dan toch bezig zijn... maken jullie gebruik van witregels in je html code?
Doe je bijvoorbeeld dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
of dit...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
Gewijzigd op 23/02/2013 00:19:17 door Ozzie PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang=nl>
<head>
<meta charset=utf-8>
<title>Hello World</title>
<link rel=stylesheet href=...>
<link rel="shortcut-icon" href=...>
</head>
<body class=page>
<header class=page__head>
<hgroup>
<h1>...</h1>
<h4>Slogan</h4>
</hgroup>
</header>
<div class=page__content>
<article class=article>
<header class=article__header>
<h1>...</h1>
<time ...>...</time>
</header>
<p class=article__excerpt>...</p>
</article>
</div>
<footer class=page__footer>
<small>© Wouter J</small>
</footer>
</body>
</html>
<html lang=nl>
<head>
<meta charset=utf-8>
<title>Hello World</title>
<link rel=stylesheet href=...>
<link rel="shortcut-icon" href=...>
</head>
<body class=page>
<header class=page__head>
<hgroup>
<h1>...</h1>
<h4>Slogan</h4>
</hgroup>
</header>
<div class=page__content>
<article class=article>
<header class=article__header>
<h1>...</h1>
<time ...>...</time>
</header>
<p class=article__excerpt>...</p>
</article>
</div>
<footer class=page__footer>
<small>© Wouter J</small>
</footer>
</body>
</html>
Gewijzigd op 23/02/2013 10:24:07 door Wouter J
Ozzie PHP op 22/02/2013 23:42:47:
of dit...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
Exact zo.
Al die onnodige regels maken de pagina alleen maar langer.
Omdat <head> een element in <html> is, spring je in.
Moet trouwens in de <article> geen <p> om de tekst heen?
Toevoeging op 23/02/2013 11:00:36:
@ Wouter J: waarom geen dubbele haakjes in je HTML bij de classes?
Jij doet:
Code (php)
1
<body class=page>
Moet dat niet dit zijn:
Code (php)
1
<body class="page">
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?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.home .sidebar {
float: left;
}
.page .sidebar {
float: right;
}
float: left;
}
.page .sidebar {
float: right;
}
Nu hoef je dus niet met allerlei classes te werken zoals 'sidebar left' of 'sidebar right' etc. Nu heb je 1 algemene class waar je de pagina mee kan stijlen.
Dit zou je bijvoorbeeld ook kunnen doen met meertaligheid met <body class="home nl"> aan de hand van de class nl kun je dan bv nederlandse afbeeldingen inladen en dat soort bende ;-)
Gewijzigd op 23/02/2013 11:08:17 door Joakim Broden
Quote:
Moet dat niet dit zijn:
Nee, het mag zonder haakjes. Zolang je maar geen spaties of ", ', `, =, <, en > gebruikt. Zie ook http://mothereffingunquotedattributes.com
Quote:
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.
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?
Code (php)
1
2
3
2
3
h1 {
font-size: 15px;
}
font-size: 15px;
}
Pas als je variaties wilt toepassen op de standaard, kun je met classes gaan werken.
Code (php)
1
2
3
2
3
h1.product {
color: red;
}
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??
En dat Google de HTML begrijpt, is natuurlijk ook om andere redenen nooit verkeerd :)
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
Ozzie PHP op 23/02/2013 14:58:18:
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".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?
Gewijzigd op 23/02/2013 15:06:27 door Ward van der Put
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
<head>
<title>Foo Bar</title>
</head>
<body>
<p>Hallo!</p>
<article>
bladiebla bla bla
</article>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>
<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.
Gewijzigd op 23/02/2013 15:21:13 door Ward van der Put
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 :) )
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.
Gewijzigd op 23/02/2013 16:26:13 door Ward van der Put