Nettoyer et optimiser ma CSS

[Ancients]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

En avançant dans mon forum, je résous pleins de problèmes plus ou moins important, et cela m'invite à ajouter à chaque fois des lignes de codes dans ma CSS.

Je me retrouve perdu avec pleins de lignes de code et beaucoup sans commentaire.

J'aurais aimé avoir une sorte de nettoyage de ma CSS :

- supprimer les lignes inutiles
- regrouper les lignes qui peuvent être ensemble et les optimiser
- remettre des commentaires sur chaque ligne

Voici ma CSS :

Code:

.postbody .content {
    margin-left: 10%!important;
    margin-right: 10%!important;
}

#cp-main .panel {
    background-color: transparent;
}

.content {
    line-height: 1.7em;
}

.postprofile .label,
.postprofile .label img[alt="Battle Tag"]{
  display: inline-block;
  vertical-align: middle;
}

ul.navlinks{border:none;}

#page-header{margin-top:300px;}

#search-box {
    margin-top: 0px!important;

}

.inputbox {
    color:#00B4FF;
}

.inputbox:hover {
    border: 1px solid #00B4FF;
}

input.search {
    background: #ffffff!important;
    padding: 5px 6px;
    border: none;
    font: 12px Arial, sans-serif;
    border-radius: 5px;
    box-shadow: 0 0 5px #000;
}

form[action="/privmsg"] dl:nth-last-of-type(2) label:nth-last-of-type(1):not(:first-child) {
  display: none !important;
}

.signature_div img{
    max-width: 500px !important;
    max-height: 200px !important;
}

/*Couleur pour les Admins*/
#M14_Color_Admin.inner .postbody .content
{
color:#00B4FF !important;
}

/*Couleur pour les Modos*/
#M14_Color_Modo.inner .postbody .content
{
color:red !important;
}

.headerbar, #logo {
    padding: 0;
}

    /*Le bouton twitch*/
#M14_btn_slide:before
{
  content:"";
  position:absolute;
  background:url(http://i84.servimg.com/u/f84/19/42/85/35/14573010.png)no-repeat;
  width:64px;
  height:64px;
  margin-left:200px;
}
 
 
 
#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
 
    /*Le bloc du slide*/
 
    #M14_btn_slide
    {
    position:fixed;/*on fixe le slide*/
    top:60px;/* on le positionne a 60px du haut du fofo*/
    width:200px;/*on lui donne une largeur en relation avec l image*/
    height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
    left:-205px;/*on cache le bloc*/
    background:#;/*couleur de fond*/
    text-align:center;/*on centre le lien*/
      /*La transition*/
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    }
    /*Le slide effectue par le script*/
    #M14_btn_slide.margin{left:0px;}
 
 
 .lien-sous-forum{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
}
 
 
 .table-index1 > div{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
    color: #000000
}

/*---  Index HOME Image 1 ---*/
.table-index1 {
    background: url(http://i65.tinypic.com/1zluhlj.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index1:hover {
    background-position: center -201px;
}
 

/*---  Index HOME Image 2 ---*/
.table-index2 {
    background: url(http://i65.tinypic.com/bj5x8j.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index2:hover {
    background-position: center -199px;
}

/*---  Index HOME Image 3 ---*/
.table-index3 {
    background: url(http://i67.tinypic.com/257odxy.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index3:hover {
    background-position: center -199px;
}


.qeel {
    background-image:url("http://i84.servimg.com/u/f84/19/42/85/35/fond_a14.png");
}


h2.topic-title img {
    display: none;
}

div#main-content{
    background-image:url(http://oi63.tinypic.com/1zldtgl.jpg);
    background-repeat:repeat;
    padding:5px;
    border:2px solid #000;
    border-radius: 10px
}

#video-background {
    position: fixed;
    top: 50%;
    left: 50%;

    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg') repeat-x;
    background-size: cover;
    transition: 1s opacity;
}


.img-whois {
    display: none;
}

.avatar-mini strong {
}

.footer-home {
    position: absolute;
    left: -500px;
    top: -500px;
    max-width: 1px;
    max-height: 1px;
}

#page-footer ul.linklist li.rightside {
    float: none;
}

#page-footer .inner {
    text-align: center;
}

.online {
    background-position: ;
}

.postprofile {
    background: url('');
    background-repeat: no-repeat;
    border-color: #322e2e;
    padding-top: 5px;
    padding-left: 8px;
    font-family: "Arial", sans serif!important;
    font-size: 11px!important;
    text-align: center;
}

/* On redonne leur taille de base aux images */
form[action="/privmsg?folder=inbox"] .postprofile img {
    width: inherit;
    height: inherit;
}
 
/* Mais on fait en sorte que l'avatar fasse 64px*64px */
 
form[action="/privmsg?folder=inbox"] .postprofile > dt > img:first-child,
.postprofile dt img {
    background-color: #000;
    background-position: 1px 1px;
    background-repeat: no-repeat;
    border: 1px solid #483A30;
    border-bottom-color: #3D2F26;
    border-radius: 3px;
    border-top-color: #887465;
    height: 64px;
    overflow: hidden;
    padding: 1px;
    width: 64px;
}

#wrap, td.avatar-mini img, .headerbar {
    background-color: transparent;
}

.post {
    background-color: #12110f;
    opacity: 0.9!important;
    border:2px solid #000;
    background: url('http://eu.battle.net/d3/static/images/layout/cms/post_bg.jpg');
    background-size: cover;
}

.portal {
    opacity: 0.9;

}

a.forumtitle {
    font-size: 12;
}

@font-face {
    font-family: NSPFONT;
    src: url(http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-light.woff);
}

.inner h2 {
    color: #f3e6d0;
    font: normal 18px/100% "NSPFONT","Palatino Linotype", "Arial", serif;
    letter-spacing: -1.5px;
    text-shadow: 0 0 5px #241209;
}
 
h1.page-title {
    font-size: 12;
}

/*suppression boutons code, date, heure et mode*/
a.sceditor-button-code, a.sceditor-button-date, a.sceditor-button-time, a.sceditor-button-source {
    display: none;
}

#textarea_content {
    min-width: 702px;
}

a:hover {
    text-decoration: none!important;
}

select {
    color: #999999;
}


/*--- Bloc réponse rapide ---*/
 
.sceditor-container.ltr.sourceMode {
    width:100% !important;
    max-height: 450px!important;
    background-color: #12110f !important;
    border-color: #131210!important;
}
.sceditor-container.ltr.wysiwygMode {
    width:100% !important;
    max-height: 450px!important;
    background-color: #12110f !important;
    border-color: #131210!important;
}

/*---  Citation ---*/

blockquote {
    background-color: #1b1915!important;
    border-color: #999999!important;
    border-width: 1px!important;
    border-style: double;
}

/*---  Partie texte area : fond ---*/
 
.sceditor-container iframe, .sceditor-container textarea {
    line-height: 16px;
    width: 100% !important;
    color: #00B4FF !important;
    font-size:12px !important;
}



/*---  Groupe de boutons ---*/
 
div.sceditor-group {
    background-color: # !important;
}

/*---  Boutons ---*/
 
a.sceditor-button {
    background: url('');
    border-color: #!important;
}


/*---  Boutons sélectionnés ---*/
 
a.sceditor-button.hover {
    background-color: # !important;
}

Changer la largeur de l'éditeur
/* largeur de l'éditeur */
.sceditor-container {
    width: 710px!important;
}

/* fond de groupe de bouton */
body div.sceditor-group {
    background: #white;
}

/* fond d'un bouton survolé ou activé */
 
.sceditor-button.hover, a.sceditor-button:hover {
    background: #00B4FF;
}

/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
    background-color: #131210 !important;
    border-color: #00B4FF!important;
    border-width: 2px!important;
}

.sceditor-group
{
    background: #333333 !important;
    border: 1px outset #000000 !important;
    border-radius: 5px !important;
}

a.sceditor-button
{
    background: #777777 !important;
    border-radius: 30px !important;
}
a.sceditor-button:hover
{
    background: #AD835A !important;
}

a.sceditor-button.active
{
    background: #c2c2c2 !important;
}

fieldset dl:hover dt label {
    color: #FAF8F7;
}

a.button1, a.button2, button.button2, input.button1, input.button2 {
background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png');
height:31px;
width:auto!important;
color:#000!important;
border:none;
font-size:10px;
}

#page-footer .inner {
}

ul.profile-icons {
    list-style: none;
    margin-top: 10px;
    margin-right: 0px!important;
}

/*---  Couleur barre profil signature ---*/
#cp-main .panel.sig {
    background-color: #12110f;
}

#tabs .activetab a span {
    color: #00B4FF;
}

a.mentiontag.tooltipstered {
    color: #00B4FF;
}

.signature_div {
    color: #00B4FF!important;
    font-family: "Arial", sans serif!important;
    font-size: 12px!important;
    text-align: center!important;
}

dd.dterm {
    background-position: 85%!important;
}

.pagination span a:active, .pagination span a:link, .pagination span a:visited {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #AD835A!important;
    display: inline-block;
    font-size: 9px;

    text-decoration: none;
}

.pagination span strong {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #999999;
    font-size: .9em;
 
    text-decoration: none;
}


/*Suppression de la couleur de fond des Notifications*/
#fa_notifications
{

background-color:#000000 !important;
color:#fff !important;
}

/*La partie notification*/
#notif_list
{
position:fixed !important;
bottom:0% !important ;
right:0px !important;
}

/*Le bouton de fermeture partie Notifications*/
#M14_close_see_all
{
text-decoration:none !important;
text-align:left !important;
color:red !important;
cursor:pointer !important;
position: absolute !important;
left: 10px !important;
width:10px !important;
height:10px !important;
}

#BDN
{
background: url('http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png') no-repeat 0px 0px;
    height: 111px;

}

Merci d'avance,
Bien à vous

[demeter1]

http://www.dirtymarkup.com

http://www.css-validator.org

Pour les commentaires, il vous faudra les apposer vous même

[Ancients]

Bonjour,

Je vais faire avec vos liens,

Merci pour votre aide,
Bien à vous.