# data[].attributes.body
Quand je travaille sur un nouveau projet, je prends vraiment du temps pour observer et regarder ce qui est commun et, avec l'expérience, je sais déjà de quel genre de structure HTML je vais avoir besoin pour chaque bloc. Je sais aussi identifier les choses qui pourraient me poser des problèmes.

# data[].attributes.headline
La Dactylo,  les raccourcis clavier, Emmet

# data[].attributes.subject
La Dactylo,  les raccourcis clavier, Emmet

# data[].attributes.body
C'est con comme la pluie mais ça m'aide tellement de connaître mon clavier et de taper sans le regarder. A côté de ça, Emmet et les raccourcis clavier liés à VsCode sont des game-changer aussi je pense

# data[].attributes.body
La propriété width: fit-content permet à un élément d’adapter automatiquement sa largeur en fonction de la taille de son contenu, sans l’étendre inutilement. Cela signifie que l’élément prendra juste la place nécessaire pour afficher son contenu.

En pratique :

Si l’on crée un élément destiné à être utilisé dans plusieurs contextes différents, et que l’on souhaite qu’il conserve une largeur adaptée uniquement à son contenu, on peut utiliser width: fit-content pour éviter qu’il s’adapte à la taille de son conteneur.

# data[].attributes.body
Utiliser la méthodologie B.E.M. ou autre, du moment que l'on garde une structure claire et réutilisable/modifiable facilement partout pour tous projets.

# data[].attributes.body
Je prends d'abord le temps pour une structuration générale du HTML, du header au footer, en suite je cible tous les éléments ayant une structure commune du coté CSS et je finis par le CSS.

# data[].attributes.body
J'utilise un maximum les balises sémantiques qui me permettent de directement structurer mon code.

Les balises de segmentation : header, main, footer, section, etc.

Et les balises liées à un usage : figure/figcaption, article, address, button, etc.

# data[].attributes.body
Se créer des snippets, permet d'avoir des blocs structurels en place. Par exemple pour les média screen :

"Media queries medium size": {

"prefix": "mqmd",

"body": [

"@media screen and (min-width:576px) and (max-width:960px) {}"

],

"description": "screen medium size - config media "

},

"Media queries large size": {

"prefix": "mqlg",

"body": [

"@media screen and (min-width:960px) {}"

],

"description": "screen large size - config media "

}

# data[].attributes.body
L'usage de plusieurs classes me permet de mettre une configuration par défaut sur la première classe, et puis de jouer sur les autres classes pour apporter des modifications spécifiques.

A connecter avec BEM

# data[].attributes.body
Ne pas hésiter à se créer des snippets pour les éléments qu'on utilise souvent (ex : pour les ::before/::after , les overlays, les éléments en position absolute etc..)

# data[].attributes.body
Se faire un dossier avec des démos sur les spécificités permet aussi de garder des exemples concrets dont on peut s'inspirer.

Librairie de bouton, démo sur comment retirer les bullets des ul>li, rendre un <a> téléchargeable, card flip, faire tourner un cube, etc.

# data[].attributes.body
Par exemple si il y a 8 cards consécutive qui sont toutes très similaires. Il vaut mieux d'abord faire le css de la plus complexe, puis la dupliquer au niveau de l'HTML.

Cela évite d'éventuelle modification sur tous les doublons.

# data[].attributes.body
Ne pas hésiter à utiliser les variables & les mixins dans Sass :