Tufte-css: Formatage CSS

J'ai choisi la norme de mise en forme utilisée dans ce projet parce que je ne vois pas la nécessité de donner de l'espace aux accolades ouvertes ou fermées, et parce que je trouve que l'horizontale est décalée pour être une béquille visuelle / mentale utile pour différencier les blocs de sélection.

Puisque l'indentation CSS «standard» diminue la lisibilité pour moi, la seule valeur ajoutée que je vois pour son utilisation serait d'augmenter la cohérence du code avec les projets externes. Une partie de la raison pour laquelle je ne trouve pas cela extrêmement convaincant est que je ne passe pas beaucoup de temps avec CSS dans d'autres projets, donc je n'ai pas de surcharge mentale impliquée dans le changement de contexte. Le manque de familiarité est-il perturbateur pour les autres? Y a-t-il d'autres avantages à l'indentation "standard" que je ne vois pas?

Dans mon cas, j'en ai converti une grande partie en SCSS pour mon propre projet, et c'était douloureux d'avoir à tout reformater à la norme. Je ne me souviens pas si c'était simplement pour éliminer les avertissements ou parce que cela causait également des erreurs. Des choses comme l'imbrication nécessitent certainement un reformatage.

Cela me décourage également de revenir pour des mises à jour qui seraient autrement plus faciles à fusionner.

Sur un éditeur avec softwrapping à 80 caractères (ce qui est assez normal), les parties avec les requêtes média deviennent vraiment désordonnées.

Non pas que je veuille gémir! :) Chacun a ses méthodes de formatage préférées, juste pour vous faire connaître mon expérience.

Cordialement,

@ yb66 La conversion

... mais après un examen plus approfondi, des outils comme http://csstoss.com/ ne font-ils pas cela sans douleur? Ou même simplement sélectionner toutes les accolades ouvertes, ajouter une nouvelle ligne après, puis sélectionner toutes les accolades fermées, ajouter une nouvelle ligne avant, puis ré-indenter le fichier?

Je reconnais également la question de l’emballage souple.

Je pense que spécifier un format et fournir la spécification d'un outil de linter / formateur donné serait très utile. Je pense que soutenir un tel outil, puis imposer son utilisation avec chaque commit fusionné, permettrait en fait aux gens de faire des contributions et de tirer des demandes plus facilement. Je ne pense pas que quiconque veuille passer son temps à jouer avec les retraits et les accolades, alors que vous pourriez simplement exécuter une commande sur le fichier *.css avant de valider et en finir. Je ne sais pas quel format est choisi, juste qu'il peut être satisfait en exécutant un simple outil de ligne de commande avant de valider les modifications.

Une option est stylelint.io mais il y en a d'autres également.

modifier: grammaire

Je veux dire, nous avons la section CSS Style Guide dans le README depuis l'époque où les dinosaures parcouraient la terre et les commits étaient envoyés par bateau à travers l'Atlantique. Ma politique sur l'application de cette norme a été

1. espère que les gens se conforment
2. accepter les RP indépendamment
3. contraindre manuellement le code non conforme à la conformité

Ce projet fait moins de 300 lignes. Je ne vois respectueusement pas la nécessité d'introduire une dépendance à un outil de ligne de commande afin d'automatiser le processus consistant à prendre 90 secondes pour corriger les six à huit accolades que la plupart des PR ont.

Certes, j'ai été lent à résoudre les bogues et les PR, mais ce n'est pas dû à des problèmes de style, mais à une pression de temps externe et à la complexité des tests de changements sur de nombreux appareils et scénarios.

Mon point d'origine, que je suis désolé de ne pas avoir clarifié, est que l'œil est obligé de zigzaguer pour lire le code.

Comparons le formatage actuel à deux autres options A et B.

Actuel:

.table-caption { float:right;
                 clear:right;
                 margin-right: -60%;
                 width: 50%;
                 margin-top: 0;
                 margin-bottom: 0;
                 font-size: 1.0rem;
                 line-height: 1.6; }

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
                                           font-family: et-book-roman-old-style;
                                           position: relative;
                                           vertical-align: baseline; }

.sidenote-number:after { content: counter(sidenote-counter);
                         font-size: 1rem;
                         top: -0.5rem;
                         left: 0.1rem; }

.sidenote:before { content: counter(sidenote-counter) " ";
                   top: -0.5rem; }

blockquote .sidenote, blockquote .marginnote { margin-right: -82%;
                                               min-width: 59%;
                                               text-align: left; }    

p, footer, table, div.table-wrapper-small, div.supertable-wrapper > p, div.booktabs-wrapper { width: 55%; }

Option A

.table-caption               { float:right;
                               clear:right;
                               margin-right: -60%;
                               width: 50%;
                               margin-top: 0;
                               margin-bottom: 0;
                               font-size: 1.0rem;
                               line-height: 1.6; }

.sidenote-number             { counter-increment: sidenote-counter; }

.sidenote-number::after,
.sidenote::before            { content: counter(sidenote-counter) " ";
                               font-family: et-book-roman-old-style;
                               position: relative;
                               vertical-align: baseline; }

.sidenote-number::after      { content: counter(sidenote-counter);
                               font-size: 1rem;
                               top: -0.5rem;
                               left: 0.1rem; }

.sidenote::before            { content: counter(sidenote-counter) " ";
                               top: -0.5rem; }

blockquote .sidenote,
blockquote .marginnote       { margin-right: -82%;
                               min-width: 59%;
                               text-align: left; }    

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper         { width: 55%; }

Option B:

.table-caption {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.0rem;
  line-height: 1.6;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after,
.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-family: et-book-roman-old-style;
  position: relative;
  vertical-align: baseline;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 1rem;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width: 59%;
  text-align: left;
}

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper {
  width: 55%;
}

Ayant écrit des centaines de milliers de lignes de CSS dans ma vie, je suis le plus habitué à lire l'option B, mais je peux absolument voir un cas en cours pour quelque chose comme l'option A. Cela étant dit, j'ai du mal à voir comment l'option A ne fonctionne pas 'pas surpasser le formatage actuel en lisibilité. Bien sûr, comme vous le faites remarquer, c'est <300 lignes, donc ce n'est pas grand-chose de toute façon.

À ce stade, je penche vers quelque chose de plus conventionnel, de sorte qu'il soit plus lisible et conforme aux normes CSS dans la communauté plus large. L'option B semble être plus reconnaissable pour les gens.

J'irais aussi pour l'option B. N'existe-t-il pas un moyen de spécifier un format lisible par l'homme et lisible par machine pour plusieurs formateurs / linters?

Je suis finalement arrivé à ça. Merci d'avoir soulevé cette question Adam, et merci à tous les autres d'avoir ajouté vos deux cents.

S'il vous

Cela me va bien, @daveliepmann. Je sais à quel point il peut être difficile de trouver l'énergie nécessaire pour faire face à de vieux problèmes comme celui-ci, donc l'effort est très apprécié! Je suis en train de republier mon blog sur un nouveau site, je vais donc utiliser ces modifications et vous faire savoir si je trouve des problèmes.

@daveliepmann est superbe. Je te remercie tellement d'avoir fait cela.

@ yb66 Avez-vous ... avez-vous votre SCSS quelque part? Comme, dans github? J'utilise un outil de messagerie qui permet de remplacer le style lors de l'affichage de parties HTML mime, et il utilise SCSS. J'adorerais utiliser Tufte pour cela, et si quelqu'un a déjà effectué une conversion SCSS, cela rendrait cela beaucoup plus facile.

@serussell Le CSS n'est-il pas valide SCSS?

@adamschwartz : haussement d'épaules: Cela ne m'est pas

Puis-je suggérer également d'utiliser un linter! Stylelint s'illumine comme à Noël quand j'utilise le css ici. Bien que certains d'entre eux soient une question de style, il existe également de nombreuses incohérences dont nous pouvons nous débarrasser facilement.