Compte-rendu de la dotCSS 2014 Compte-rendu de la dotCSS 2014

Compte-rendu de la dotCSS 2014

par ,
le 19 novembre 2014

0
0

altima° était présent à la dotCSS qui s’est déroulée à Paris le 14 novembre 2014. Nous n’allons pas vous résumer chaque conférence mais vous apporter notre ressenti et ce que nous en avons retiré.

CE QUE NOUS AVONS RETENU

LE RÔLE CENTRAL DU FRONT-END DEVELOPPER DANS UN PROJET

Harry Roberts nous a présenté Ten Principles for Effective Front-end Development où ce slide était présent :

front-end developper between client, user and consultant

Nous avons retenus ce slide car il met en évidence quelque chose d’extrêmement important et qu’on oublie trop souvent : le développeur front-end a un rôle essentiel dans un projet. Il est le pont entre le client, le consultant et le Web designer. En effet, il est au plus près de ces trois facettes principales d’un projet : il peut alerter le consultant sur la faisabilité ou non d’un élément, sur sa pertinence pour l’utilisateur et également comprendre rapidement les besoins du clients pour en apporter les meilleures solutions techniques possibles.

L’ARCHITECTURE D’UN PROJET : LA DÉCOUPE EN COMPOSANT

Les webs components ont été très rapidement évoqués durant la dotCSS, par contre nous avons beaucoup parlé de découper le projet en composant par fonctionnalité afin de pouvoir réutiliser leur style (entre autres) et le rendre plus maintenable et scalable. Il est en effet facile d’imaginer la création d’un composant de connexion qui aurait son style, facilement modifiable aux besoins du clients et de pouvoir réutiliser ses bases pour un autre projets.

SASS

Pendant les différentes sessions, le pré-processeur SASS a été énormément abordé. Hugo Giraudel nous a proposé un talk évoquant différents points important. Vous pouvez retrouver les slides sur Speaker Deck.

KISS & KYSS

« Keep Your Sass Simple »

Keep Your SASS Simple, tel a été l’un des credos de Hugo Giraudel pendant sa conférence Keep Calm and Write Sass. En effet les pré-processeurs permettent de faire tellement de chose impossible nativement en CSS qu’il peut être parfois tentant de dériver vers des algorithmes, des calculs de couleurs ou de tailles, ou tout autre chose qui n’a pas sa place dans un pré-processeur maintenable.

TEST

Hugo Giraudel encourageait également la mise en place de tests au même titre que les tests unitaires en Javascript (entre autres) afin de s’assurer de l’intégrité d’autres éléments ou de la compatibilité entre navigateurs qui pourrait être impactée par des modifications.

COMMENTAIRES

Dans la même philosophie que KYSS, Hugo Giraudel nous a encouragé à commenter le plus possible notre code. Personnellement nous pensons qu’il est utile de commenter le style mais qu’il ne faut pas en faire trop, pour éviter une perte de temps.

slide commentaire sass

VARIABILISATION

Les préprocesseurs permettent de créer des variables, des mixins, des partials. Le développeur a pour rôle, dès le début du projet, d’identifier toutes les couleurs et typographies du site, leur donner un nom tel que « Gris clair », « Framboise écrasé », « Titre 1 », « Sous-titres 3 », …,  afin d’avoir un vocabulaire clair avec le graphiste et pouvoir les nuancer très facilement.  Les typographies auront comme propriétés leur police mais également leur taille, leur espacement entre les lettres, leur interlignes, ect…

Cette liste de variables et de Mixins peut-être centralisée dans un fichier spécifique.

LES BONNES PRATIQUES

Cette dotCSS a également été l’occasion de nous rappeler de nombreuses bonnes pratiques que l’on oublie malheureusement.

LA SIMPLICITE

Notre feuille de style (CSS natif ou écrit avec un pré-processeur) ne doit pas être une démo technique de nos capacités. Il est nécessaire de la rendre toujours le plus simple possible, en utilisant des propriétés basiques pour plusieurs raisons :

  • Privilégier la compatibilité entre les navigateurs
  • Permettre à d’autres développeurs, qui auraient à lire notre code, de le comprendre facilement

!IMPORTANT

Estelle Weyl nous a expliqué comment surcharger un important grâce à l’utilisation d’animation. !important est un sujet très épineux chez les intégrateurs. Je pense qu’il ne faut pas le bannir mais savoir justement quand l’utiliser, il peut être utile lorsque l’on bosse en surcouche et qu’un !important est déjà présent. Dans la plupart des cas, son utilisation est évitable grâce à l’augmentation de la précision du sélecteur.

LA PRIORITE

Tout le monde a déjà été confronté aux problèmes de priorité des sélecteurs : on applique son style avec un sélecteur bien propre et le style n’est au final pas appliqué. Ce problème vient la plupart du temps du fait qu’un style soit déjà appliqué sur l’élément et que son sélecteur est plus précis.

Estelle Weyl nous a expliqué grâce à ses CSS SpeciFISHity comment ne plus se tromper ! CSS SpeciFISHity La règle générale pour retenir le principe de priorité des sélecteurs est simple : plus votre sélecteur est précis, plus il aura de chances de modifier le style de votre élément.

@SUPPORTS

Cette règle CSS permet de tester le support d’une propriété CSS et de réagir en conséquent, très utile pour la compatibilité entre navigateurs. Retrouver les spécifications de cette règle sur le MDN.

ET APRES ?

Bert Bos a proposé dans les années 90s le concept de feuilles de style en cascades (CSS) avec Håkon Wium Lie. Il nous a évoqué les problèmes que posent les différentes règles de typographies selon les pays : emplacement de la virgule, forme des guillemets, espace avant la ponctuation ou non, ect…

Ces problèmes pourraient être réglés en CSS dans le futur ?

DOTCSS : BONNES PRATIQUES, ASTUCES ET BON SENS !

Cette après-midi de talks nous a donc rappelé quelques bonnes pratiques, donnée des astuces très intéressantes et nous a fait réfléchir à des problématiques fréquemment rencontrées.

dotCSS speakers

mots-clés :

, , , ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

Compte-rendu de la dotCSS 2014