Reset css conseil wordpress

Pfiou... que de poussières

En lisant "radical", un instant j'ai pensé à un reset de 4km de long mais finalement pas tant que ça. A dire vrai, le miens est plus long mais touche moins de propriétés.

Ce qui me gêne dans celui-ci (et selon mes usages) :
- il touche à des propriétés que systématiquement je définis pour chaque projet donc inutile de remettre à zéro une propriété que je vais définir plus tard de façon systémique.
- il touche à des balises que je n'utilise pas forcément (par exemple time ou ruby qu'on n'utilise pas forcément pour chaque projet)
- il est trop restrictif finalement et nécessite quelques retouches.

Plutôt que de prendre un reset clé en mains, je travaille autrement. J'ai créé une trame (quasie) complète qui ne touche que les balises et propriétés "universelles". A chaque projet j'intègre cette trame et la déleste de tout ce qui n'est pas utilisé dans le projet. Par exemple, okay pour un reset sur les tables mais si le projet n'en intègre pas, je vire. Ainsi chaque projet part d'une base propre et minimaliste.
Ensuite je développe de manière très souple et laisse toujours un maximum de repères à l'utilisateur.
En découle un affichage légèrement différent selon le navigateur mais dont l'utilisation des valeurs relatives permet de garder un design cohérent et homogène.

Alors certes, ce demande d'y consacrer un peu de temps et pour démarrer, j'avoue m'être inspiré de celui inclus dans Knacks qui me paraît pertinent et que je n'ai pus m'empêcher d'y mettre mon empreinte hihi

Celui que j'utilise actuellement sur un de mes projet en cours vous inspirera peut-être:

html {
  box-sizing: border-box;
}
html * {
  box-sizing: inherit;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}
summary {
  display: list-item;
}
summary > * {
  display: inline-block;
}
a {
  background-color: transparent;
}
a:link,
select {
  position: relative;
  font-size: inherit;
}
a:link,
a:visited,
[type="button"] {
  display: initial;
}
strong,
h1,
h2 {
  font-weight: bold;
}
h1 {
  text-align: center;
}
dfn,
em {
  font-style: italic;
}
small {
  font-size: .8em;
}
sub,
sup {
  position: relative;
  line-height: 0;
  font-size: .75em;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}
img {
  border: 0;
  vertical-align: middle;
}
svg {fill: #000000;      }
svg {fill: currentColor; }
svg {
  width:  1em;
  height: 1em;
  overflow: auto;
}
svg:not(:root) {
  overflow: hidden;
}
svg:target {
  display: block;
}
svg foreignObject[width="0"][height="0"] {
  overflow: hidden;
}
figure {
  margin: 0;
}
hr {
  height:   0;
  overflow: visible;
}
pre {
  overflow: auto;
}
ol,
ul {
  margin:  0;
}
button,
input,
optgroup,
select,
textarea {
  font:   inherit;
  margin: 0;
}
button {
  overflow: visible;
  background-image: none;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
}
button:hover,
input:hover,
label[for]:hover,
select:hover,
summary:hover,
textarea:hover {
  cursor: pointer;
}
:disabled:hover,
:invalid[type="submit"]:hover {
  cursor: not-allowed;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border:  0;
  padding: 0;
}
[type="submit"] {
  position:    relative;
  font-weight: bold;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input:focus,
input:valid,
textarea:focus,
textarea:valid {
  font-style: normal;
  opacity: 1;
}
fieldset,
form {
  position: relative;
}
legend {
  border:  0;
  padding: 0;
}
textarea {
  width: 100%;
  resize: vertical;
  overflow-y: auto;
}
[placeholder] {
  font-style: italic;
  opacity: .9;
}

Je l'enrichi en fonction de mes besoins et des disparités gênantes que je constate lors de mes essais avec les différents navigateurs.

PS: la suite de mon Css est essentiellement travaillé en 3 temps : personnalisations générales (valables partout dans le site), un gabarit pour la page (selon le type de page appelé) puis par composant (menu principal, toolbox etc).