Bonjour,

Je suis débutant en CSS, j'aimerais bien avoir votre avis sur ma petite création. Avant tout, j'ai comme même une question. Y a-t-il une convention à suivre pour les intitulés des classes? Parce que je manque souvent d'inspirations...

Voici une image de ma partie HEADER.

J'aimerais vraiment savoir si mon code tient la route et que j'ai bien compris les bases pour la partie Header et Nav. 

<header id="banner">
      <div class="header-transparent">
          <nav id="nav-secondary">
            <ul class="nav-secondary-left-list">
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Languages</a></li>
           </ul>
           <ul class="nav-secondary-right-list">
            <li><a href="#">Support</a></li>
            <li><a href="#">Login</a></li>
           </ul>
          </nav>
         <nav id="nav-primary">
           <ul>
             <li><a class="active" href="#">Home</a></li>
             <li><a href="#"> Plan</a></li>
             <li><a href="#">Commission</a></li>
             <li><a href="#">About us</a></li>
             <li><a href="#">Features</a></li>
             <li><a href="#">Register</a></li>
             <li><a href="#">Pages</a></li>
             <li><a href="#">Contact us</a></li>
           </ul>
         </nav>
         <div class="header-container">
            <div class="header-container-01">7.6%-18% daily for 16 days</div>
            <div class="header-container-02">Min deposit $10 - Max deposit $50,000</div>
            <div class="header-container-03">We accept Perfectmoney,Payeer and Bitcoin</div>
        </div>
      </div>
    </header> 

body{
  margin: 0;
  padding: 0;
}

 
header{
  background-image: url("https://zupimages.net/up/20/13/5or2.jpg");
  height: 538px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.header-transparent{
  height: 98px;
  margin: 0 0 2rem;
  background-color: rgba(0, 0, 0, 0.5);
}


#nav-secondary  {
  display: flex;
  justify-content: space-between;
}

#nav-secondary ul li {
  list-style: none;
  font-size: 11px;
}


.nav-secondary-left-list{
  margin-left: 430px;
}

.nav-secondary-right-list{
  margin-right: 80px;
}

#nav-primary{
  margin-right:60px;
  float: right;
}
 

nav ul{
  list-style: none;
  margin: 0.5rem;
  padding: 0;
}

 
nav ul li {
  display: inline-block;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

 
nav ul li a {
  padding: 8px 16px;
  text-decoration: none;
  color: #FFF;
  border-radius: 3px;
  display: inline-block;
}

 
nav ul li a:hover {
  background-color: #FFF;
  color: black;
}

.active {
  background-color: #cd2122;
  color: #FFF;
  padding: 8px 16px;
  border-radius: 3px;
}

.header-container{
  color: #fff;
  line-height: 1.3;
  text-align: center;
}
.header-container-01{
  font-size: 22px;
  border-left: 5px solid #fff;
  background-color: #000;
  margin-top: 284px;
  margin-left: 89px;
  width: 388px;
  padding: 4px 4px;
}

.header-container-02 {
  font-size: 30px;
  background: linear-gradient(300deg, transparent 0, transparent 50px, #000 0,#000 100%);
  opacity: 0.9;
  padding: 10px 10px 10px 10px;
  margin-top:  29px;
  width: 52%;
}

.header-container-03 {
  font-size: 16px;
  background: linear-gradient(300deg, transparent 0, transparent 50px, black 0,black 100%);
  padding: 10px 10px 10px 10px;
  opacity: 0.7;
  margin-top: 8px;
  width: 36%;
}

Je vous remercie pour vos retours.

-
Edité par Fred2000Fred2000 30 mars 2020 à 18:32:27

-
Edité par ChrisYk22 31 mars 2020 à 5:38:01

Bonjour,

pour les conventions de nommage il en existe différentes comme OOCSS et BEM par exemple.

Il existe également SMACSS qui est une manière d'organiser son CSS.

Après tu peux très bien définir ta propre convention de nommage.

Voici un article intéressant à ce sujet: https://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html

Bon courage dans ton dev !

Bonjour à tous,

@ChrisYk22: Merci Christ pour ton retour. ^^ 

@-RR-: Merci RR, je vais consulter le lien que tu proposes. ^