Je suis en train de refaire l’interface de Blogotext.
Ça va faire un peu plus moderne.

C’est complètement pompé sur le design de Google, mais à vrai dire j’aime beaucoup ce thème : je le trouve joli et surtout il ne se met pas en travers de mon chemin, que ce soit avec des informations inutiles ou avec des boutons dont on ne se sert pas et qui nous gênent.

L’interface de Google (material) est selon moi un juste milieu entre le "flat pur" (comme Windows 8 : très coloré, aucune ombre, peu de dégradés) et un truc super détaillé, très artistique (les premiers iOS : les icônes magnifiques, mais parfois trop).
J’utilise pas de Framework tout fait de 50 Mo, mais j’utilise quelques icônes de Google : https://github.com/google/material-design-icons , qui sont sous CC-BY facultatif.

Au menu, des animations et des transitions CSS à foison, mais je rassure les 4±1,5 utilisateurs de Blogotext : c’est pas blingbling au point de ressembler à un .ppt de chatons avec des citations philosophiques partout:p.

Le CSS3 permet beaucoup de choses et j’en tire partie, d’autant plus qu’en ce moment, le CSS3 est à 99% cross-browser sur tous les derniers navigateurs (IE <11, gtfo) :

Par exemple, pour les sélecteurs :

#top #search input[type='search']:not([value=""]):not(:focus) {}

form[action="maintenance.php"] p label+*:first-of-type {}

#billets li > span:nth-of-type(odd) {}

Mais aussi flex box : franchement, si vous n’utilisez pas encore ça, allez-y : c’est incroyablement puissant et c’est pas si compliqué que ça.
— (permalink)

@Timo: tu peux t'inspirer de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

et aussi de http://oli.jp/2011/ids/ qui explique POURQUOI l'utilisation des ID en tant que sélecteurs CSS est parfois une mauvaise idée.

Bref, le CSS et encore plus avec CSS3, c'est puissant et pas si simple ;)
(Permalink)

Je maintiens mon usage global (j’ajoute juste les « > » qu’ils expliquent sur le MDN).

Le lien http://oli.jp/2011/ids/ est intéressant, mais il oublie commence fonctionne un navigateur à un nouveau encore plus bas et ça rend son explication incomplète et qui ne me convainc pas.

Concernant le fait que « #id a » est plus lent : ça ne sera pas plus lent qu’un « .class a » : ça fonctionne de droite à gauche quelque soit le sélecteur.

Lors du parsage du document, un navigateur constitue 4 tableaux pour trier les éléments dom : les ID, les classes, les éléments eux mêmes (a, div…) et les pseudo éléments.
Utiliser les ID permet de se positionner directement dans l’arbre dom, sans avoir à tout parcourir.

Mettre des classes partout, c’est lourd au niveau du parsage ! Moins au niveau du rendu, mais plus au niveau du parsage : plus de classe augmente la taille des arbres dom.

Le DOM contient non seulement les éléments (div, a, p…) mais aussi les classes, ID ainsi que tous les attributs et les événements (côté JS). C’est pour ça que les sélecteurs « a[href="http…"] » sont si lent comparés au reste : ce sélecteur doit trouver non seulement l’élément, mais en plus ouvrir les branches contenant les attributs, puis les valeurs de ces attributs et parser ces derniers.

Certes on peut les utiliser en CSS, aucun problème, mais on doit juste savoir que c’est lent.

Pour en revenir aux ID, il y a une chose à retenir, c’est ce qu’il explique dans le dernier paragraphe : la spécificité d’un sélecteur.

Faire « #id .classe {} » sera prioritaire sur « .classa1 .classe1 », lui même prioritaire sur « div a ».
C’est tout… Mais ça c’est si basique qu’aucun cours sur le CSS en parle, même celui du SDZ n’en parlait pas à l’époque.
Ainsi, mettre « #id > #autreId ». Mais là encore, ça a une application pour les spécificités.

Pour le reste, l’ID n’est qu’une classe avec une spécificité plus grande et avec des règles en plus (unicité dans le document, syntaxe de la valeur…). C’est pas "mal" de l’utiliser.
Tout dépend de sa page web, et son application : si le élément possède un ID pour le JS ou pour créer une ancre dans le document (usage légitime), pourquoi ne pas les utiliser en CSS aussi ?


Pour l’usage que j’en fais, j’ai du CSS pour tout mon programme, avec les formulaires et tout le bordel : je préfère utiliser des ID pour chaque page plutôt que d’utiliser des classes en grand nombre et avec des noms à ralonges, ce qui alourdirait à la fois le chargement du fichier (plus de code), le parsage (plus de longueur de texte à parser + d’avantage de classes), le rendu et la maintenance.
J’utilise les classes aussi, mais je rajoute un couche avec les ID pour être plus précis.
— (permalink)

Timo, je suis tombé un par hasard sur ce Framework CSS : [materialzecss](http://materializecss.com/) je me suis dis que ça pourrais quand même t'intéresser.

Seul truc un peu dommage, il fonctionne avec jquery.
(Permalink)