-
Notifications
You must be signed in to change notification settings - Fork 1
/
guide-style-010-forme.twig
158 lines (158 loc) · 6.8 KB
/
guide-style-010-forme.twig
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
{% embed './views/partials/_recommandation.twig' %}
{% set recVersion = '1.0.2' %}
{% block recTitle %}
Mise en forme des règles
{% endblock %}
{% block recContent %}
<ol>
<li>
Dans une liste de sélecteurs, il est <abbr title="" class="rfc2119">recommandé</abbr>
de ne mettre qu’un sélecteur par ligne.
</li>
<li>
De même, il est <abbr title="" class="rfc2119">recommandé</abbr>
de ne mettre qu’une déclaration par ligne.
</li>
<li>
Chaque déclaration <abbr title="" class="rfc2119">doit</abbr> se terminer par un point-virgule <code class="language-none">;</code>, même quand celui-ci est facultatif.
</li>
<li>
Les espacements <abbr title="" class="rfc2119">doivent</abbr> être utilisés de façon cohérente sur l’ensemble d’un site.
</li>
<li>
Il est <abbr title="" class="rfc2119">recommandé</abbr> de ne pas mettre d’espace
entre une propriété et le séparateur <code class="language-none">:</code>,
mais d’en mettre un systématiquement après ce séparateur.
De même, il est <abbr title="" class="rfc2119">recommandé</abbr>
de mettre un espace après chaque virgule <code class="language-none">,</code>
dans une liste de valeurs, mais pas devant.
Il est également <abbr title="" class="rfc2119">recommandé</abbr> de faire précéder
les accolades ouvrantes <code class="language-none">{</code> d’un espace.
</li>
</ol>
<aside class="bonus">
<p>
En résumé :
un <span id="forme-sel-legende">sélecteur</span> /
<span id="forme-decl-legende">déclaration</span> par ligne,
<span id="forme-term-legende">point-virgule obligatoire</span>,
<span id="forme-sp-legende">un espace ici</span>,
mais <span id="forme-nosp-legende">aucun là</span>.
</p>
<pre><code class="language-css"><span id="forme-sel-ex1">h1</span>,
<span id="forme-sel-ex2">h2</span><span id="forme-sp-ex1"> {</span>
<span id="forme-decl-ex1">margin<span id="forme-sp-ex2">: </span>0 auto;</span>
<span id="forme-decl-ex2">color: green;</span>
<span id="forme-decl-ex3">font-famil<span id="forme-nosp-ex1">y:</span> Arial<span id="forme-sp-ex3">, </span>Helvetic<span id="forme-nosp-ex2">a,</span> sans-serif<span id="forme-term-ex">;</span></span>
}</code></pre>
</aside>
{% endblock recContent %}
{% block recRationale %}
<ol>
<li value="3">
La même logique préside aux trois premiers points :
un changement doit pouvoir être localisé sur une ou plusieurs lignes,
mais pas au sein d’une ligne.
La principale raison est la <a class="principle" href="principes.html#ppe-maintenance">maintenabilité</a>.
Ceci permet aux systèmes de versionnement, Git ou autre, de suivre
individuellement chaque modification, limitant ainsi les risques
de conflits au moment des fusions <code class="language-git">merge</code>.
Accessoirement, cela permet aussi de faire des tests en commentant plus
aisément tel ou telle déclaration.
En effet, à titre de contre-exemple, si l’on plaçait des déclarations de
<span class="language-css token property">position</span>,
<span class="language-css token property">top</span>,
<span class="language-css token property">left</span> et
<span class="language-css token property">right</span>
sur une même ligne, il ne serait pas facile d’agir sur la seule déclaration
de <span class="language-css token property">top</span>.
</li>
<li>
La raison la plus souvent invoquée pour la règle précédente,
« un changement par ligne », est la
<a class="principle" href="principes.html#ppe-lisible">lisibilité</a>,
mais il semble que celle-ci dépende surtout des habitudes de chaque codeur.
C’est donc la principale raison du point n°4.
</li>
<li>
Le point n°5 est également motivé par des raisons
de <a class="principle" href="principes.html#ppe-lisible">lisibilité</a>.
Les espaces recommandés permettent une séparation visuelle suffisante.
L’absence d’espace devant les séparateurs permet de respecter la
typographie de l’anglais, langue de référence du CSS, et donc d’assurer
une meilleure
<a class="principle" href="principes.html#ppe-coherence">cohérence</a>
à un niveau international.
</li>
</ol>
<script src="assets/js/leader-line.min.js" defer></script>
<script>
window.addEventListener('load', function() {
let opt = {path: 'straight', size: 1.75, color: '#003399', startSocket: 'bottom', endSocket: 'top', dropShadow: {dx:1,dy:1,blur:1}};
new LeaderLine(
document.getElementById('forme-sel-legende'),
document.getElementById('forme-sel-ex1'),
opt
);
new LeaderLine(
document.getElementById('forme-sel-legende'),
document.getElementById('forme-sel-ex2'),
opt
);
new LeaderLine(
document.getElementById('forme-decl-legende'),
LeaderLine.pointAnchor(document.getElementById('forme-decl-ex1'), {x: '70%', y: 0}),
opt
);
new LeaderLine(
document.getElementById('forme-decl-legende'),
LeaderLine.pointAnchor(document.getElementById('forme-decl-ex2'), {x: '90%', y: 0}),
opt
);
new LeaderLine(
document.getElementById('forme-decl-legende'),
document.getElementById('forme-decl-ex3'),
opt
);
new LeaderLine(
document.getElementById('forme-term-legende'),
LeaderLine.areaAnchor(document.getElementById('forme-term-ex'), 'rect'),
opt
);
opt.path = 'fluid';
opt.color = '#339900';
opt.endSocket = 'right';
opt.startSocketGravity = [-100, +50];
new LeaderLine(
document.getElementById('forme-sp-legende'),
LeaderLine.areaAnchor(document.getElementById('forme-sp-ex1'), 'rect'),
opt
);
new LeaderLine(
document.getElementById('forme-sp-legende'),
LeaderLine.areaAnchor(document.getElementById('forme-sp-ex2'), 'rect'),
opt
);
new LeaderLine(
document.getElementById('forme-sp-legende'),
LeaderLine.areaAnchor(document.getElementById('forme-sp-ex3'), 'rect'),
opt
);
opt.color = '#990033';
opt.startSocketGravity = 'auto';
opt.endSocketGravity = [200, 100];
new LeaderLine(
document.getElementById('forme-nosp-legende'),
LeaderLine.areaAnchor(document.getElementById('forme-nosp-ex1'), 'rect'),
opt
);
opt.endSocketGravity = [100, 50];
new LeaderLine(
document.getElementById('forme-nosp-legende'),
LeaderLine.areaAnchor(document.getElementById('forme-nosp-ex2'), 'rect'),
opt
);
});
</script>
{% endblock recRationale %}
{% endembed %}