• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

  • Astuces
    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Normes du code SCSS – Freddie Mac

Caleb by Caleb
juin 19, 2022
in Language HTML5
0
0
Normes du code SCSS – Freddie Mac
333
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


Utiliser seulement minusculeet séparez les termes dans les noms de classe par tirets, pas de soulignement. Nommez les classes à usage unique en utilisant le schéma de nommage SMACSS : conteneur-élément-modificateur.

 // Good
.grid-block {}
.grid-block-title {}

// Not this
.CustomButton {}
.menu_bar {}

Évitez d’utiliser des #ids dans les sélecteurs. Tenez-vous en aux cours.

 // Good
.primary-nav {}

// Not This
#primary-nav {}

Nommez les classes polyvalentes ou modificatrices sans désignation de bloc ou d’élément.

.uppercase {}
.weight-black {}
.vertical-baseline {}

Écrire pour la lisibilité – utilisez des sauts de ligne entre les déclarations et les sélecteurs et utilisez 2 espaces pour chaque niveau d’indentation. Le compilateur condensera les espaces et supprimera les retours de ligne dans le css minifié.

 figure {
  margin: 0;
  img {
    width: 100%;
    &:hover,
    &:focus {
      opacity: 0.9;
    }
  }
}

Lorsque vous stylisez des sous-éléments d’un composant, préférez écrire une nouvelle classe plutôt qu’utiliser un sélecteur de balises lorsque c’est possible. Cela réduit la spécificité du sélecteur, ce qui permet à l’utilisateur de remplacer plus facilement les styles par défaut. Cela réduit également le risque que les styles de balises ne s’infiltrent dans d’autres éléments.

 // Okay, and occasionally necessary to override Foundation's defaults
.menu-bar > li {}

// Better
.menu-bar-item {}

Gardez les sélecteurs peu profonds

Dans la mesure du possible, évitez d’imbriquer un sélecteur dans son parent. Le but de l’imbrication est de créer une portée, mais en incluant le nom de la classe parent dans la classe enfant, vous l’avez déjà effectivement délimitée.

Plus votre nid est profond, plus il faut de bande passante pour servir votre CSS et plus il faut de travail au navigateur pour le rendre, car les navigateurs évaluent chaque règle CSS de droite à gauche, en commençant par le sélecteur le plus à droite.

 // Avoid Whenever Possible
.menu-bar {
  .menu-bar-item {}
}
.menu-bar .menu-bar-item {}

// Better
.menu-bar {}
.menu-bar-item {}

Lorsque vous écrivez des CSS profondément imbriqués tels que les suivants, vous forcez le navigateur à

  1. Trouver tous les éléments d’ancrage
  2. Vérifiez s’ils sont dans un élément li
  3. Si c’est le cas, vérifiez si ceux-ci sont dans un élément ul
  4. Si c’est le cas, vérifiez si ceux-ci se trouvent dans un élément de navigation
  5. Si c’est le cas, vérifiez si ceux-ci se trouvent dans un élément avec la classe .header
  6. Si c’est le cas, vérifiez si cet élément est un élément div
  7. Si c’est le cas, changez la couleur de l’élément d’ancrage en #666
 // Do Not Deeply Nest
div.header nav ul li a {
  color: #666;
}

Lorsque vous stylisez une balise, envisagez d’utiliser le sélecteur enfant pour éviter les conflits, surtout pour les composants structurels qui pourraient inclure n’importe quel code HTML à l’intérieur.

 // Problematic, because now *every* <li> inside tabs will be styled this way
.tabs li {}
// Better, because you've restricted the reach of the selector
.tabs > li {}
// Even better, because you've reduced specificity
.tabs-item {}

Pour les noms de classe vraiment génériques (tels que .large ou .small), ou des noms de classe utilisés dans plusieurs composants, enchaînez-les à la classe principale. Foundation réutilise souvent les mêmes noms de classe pour différents composants, de sorte que chaque instance doit être isolée des autres. Il est également possible que d’autres bibliothèques ou styles entrent en conflit avec un mot générique.

 // Good
.button.primary {}
.callout.large {}

// Not this
.large {}
.primary {}

Éviter la concaténation inutile

Éviter de sans signification concaténation et écriture pour la trouvabilité. Gardez à l’esprit que d’autres développeurs partageront les mêmes fichiers SCSS.

 // Good -- clear without needing concatenation
.image-portrait {}
.image-square {}

// Meaningless Concatenation
// If another developer searched all scss files for class names that started with "image-", they’d fail to find these styles.
  .image {
    &-portrait {}
    &-square {}
  }

Utilisation significative concaténation lors de la génération de noms de classe basés sur une carte de valeurs (points d’arrêt, tailles, palettes) pour

  • accélérer le développement
  • assurer une dénomination cohérente
  • Assurez-vous que les modifications apportées à une carte (telles que l’ajout d’un nouveau point d’arrêt, d’une nouvelle taille ou d’une nouvelle couleur de palette) sont immédiatement disponibles dans les noms de classe.
 // Meaningful Concatenation
// this code uses interpolation to create a class for each color in $orbit-palette.
  @each $name, $color in   $orbit-palette {
    $current-contrast: color-contrast($color, $white);
    .background-#{$name} {
      background-color: $color;
      @if ($current-contrast > 1.6) {
        color: $white;
      }
    }
  }

Commentez fortement !

Utilisez les commentaires pour documenter les mixins, les fonctions, les variables, les espaces réservés, nombres magiqueset les modifications apportées aux valeurs par défaut de la Fondation.

 // This single-line comment won't be included in the generated CSS.

/* In fact, even this multiline comment won't be
included in the generated CSS. */

span /* Multi-line comments can be written anywhere
    * whitespace is allowed. */ .sans {
  font: Helvetica, sans-serif;  // So can single-line commments.
}

Requêtes multimédias

Utilisez des requêtes multimédias à l’intérieur du sélecteur chaque fois que possible.

 // Good
.container {
  background-color: $white;
  color: $black;
  @include breakpoint(small) {
    max-width: 100%;
  }
  @include breakpoint(large) {
    max-width: 50%;
    float: left;
  }
}

// Not this.
.container {
  background-color: $white;
  color: $black;
}
@include breakpoint(small) {
  .container {
    max-width: 100%;
  }
}
@include breakpoint(large) {
  .container {
    max-width: 50%;
    float: left;
  }
}

Classes dynamiques modifiées par JavaScript

Les classes dynamiques modifiées par JavaScript doivent être précédées du mot .is-. Cela les distingue en tant que type spécial de classe CSS et garantit également que l’UnCSS ne les supprime pas.

Certaines classes dynamiques modifient temporairement l’état d’un élément.

 // Basic tab pane
.tab-pane {
  display: none;
}

// Tab pane made visible
.tab-pane.is-active {
  display: block;
}

D’autres classes dynamiques appliquent la logique structurelle nécessaire au fonctionnement d’un plugin. Les plugins de menu en sont un bon exemple.

 // Applied to the top-level <ul> of a dropdown menu
.is-dropdown-menu {}

// Applied to nested <ul>s in a dropdown menu
.is-dropdown-submenu {}

// Applied to <li>s that house a nested <ul>
.is-dropdown-submenu-parent {}

Tailles de police et hauteurs de ligne

Utilisation rem-calc() pour les tailles de police et les rapports sans unité pour la hauteur de ligne.

Les compositions du studio de conception ont généralement des tailles et des hauteurs de ligne basées sur les pixels. En utilisant rem-calc(), vous pouvez conserver leur valeur px dans le SCSS tout en produisant des unités rem standard. Pour les rapports de hauteur de ligne, divisez la hauteur de ligne souhaitée par la taille de la police (telle que 52/43)

Certaines classes dynamiques modifient temporairement l’état d’un élément.

 // Good
h1 {
  font-size: rem-calc(43);
  line-height: 1.21;
}

// Not This
h1 {
  font-size: 43px;
  line-height: 52px;
}

— to www.freddiemac.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5603 shares
    Share 2241 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1702 shares
    Share 681 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    513 shares
    Share 205 Tweet 128
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    711 shares
    Share 284 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

février 5, 2023
La panne généralisée d’eftpos devrait maintenant être terminée

La panne généralisée d’eftpos devrait maintenant être terminée

février 5, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.