Korrekte Formatierung für custom.css

Question

Ich habe einer custom.css-Site eine Menge zusätzliches CSS hinzugefügt, und das Stylesheet war ein wenig durcheinander.

Ich habe mich entschieden, das benutzerdefinierte Stylesheet (custom.css) in Abschnitte der Website zu zerlegen, um es sauber zu halten mit/* --- und Caps für jeden Block von CSS.

Kommentare wurden hinzugefügt, wo nicht sofort ersichtlich ist, was in dieser Stiländerung passiert.

Dann schließlich @media Anfragen wurden an der Unterseite jeden Taktabschnitt (anstatt eine langen Liste unten) hinzugefügt

Gibt es einen Industriestandard, wie Stylesheets formatiert werden soll und was die oben erstellen irgendwelche Probleme? Bedenkt, dass es auch ein unberührtes stylesheet.css gibt.

Hier ist ein kleines Beispiel dafür, was ich getan habe:

/*------------------------------------ 
     MAIN CONTENT 
    ------------------------------------*/ 

    @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 

    body { 
     font-family: "Open Sans"; 
     font-weight: 400; 
     font-style: normal; 
     font-size: 13px; 
     color:#000; 
    } 

    h1 { 
     font-size: 22px; 
    } 

    a { 
     color: #333; 
    } 

    /* Move * on account page */ 
    .form-horizontal .has-feedback .form-control-feedback { 
     padding-top: 10px; 
    } 

    /* Sort line gaps in category box */ 
    #columnLeft > .panel > .panel-body .nav > li > a { 
     padding: 1px 15px; 
    } 

    /* Widen side column when they appear to thin */ 
    @media (min-width: 992px) and (max-width: 1265px) { 

    .col-md-pull-8 { 
     right: 60%; 
    } 

    .col-md-push-2 { 
     left: 20%; 
    } 

    .col-md-2 { 
     width: 20%; 
    } 

    .col-md-8 { 
     width: 60%; 
    } 
    } 

    /*------------------------------------ 
     PRODUCT PAGE 
    ------------------------------------*/ 

    .page-header > h1 > a > span { 
     color:#000; 
    } 

    .page-header > h1 > small > span { 
     color:#000; 
    } 

    /* Remove filter by on Category and Distributors Page */ 
    #bodyContent > .contentContainer > div > div.well.well-sm { 
     display:none; 
    } 

    .productlogo { 
     width: 90px !important; 
    } 

    /*------------------------------------ 
     NAV MENUS 
    ------------------------------------*/ 

    i.fa.fa-chevron-down { 
     float: none; 
    } 

    i.fa.fa-bars { 
     float: left; 
     position: relative; 
     top: 7px; 
    } 

    /* Set mobile select button */ 
    .navbar-default .navbar-toggle { 
     background-color: #333 !important; 
     color: white; 
    } 

    /* Enlarge side columns */ 
    @media (min-width: 768px) and (max-width: 991px) { 
    #bs-navbar-collapse { 
     display: -webkit-box !important; 
     display: -ms-flexbox !important; 
     display: flex !important; 
     -webkit-box-orient: horizontal; 
     -webkit-box-direction: normal; 
     -ms-flex-direction: row; 
     flex-direction: row; 
     -ms-flex-pack: distribute; 
     justify-content: space-around; 
    } 
    } 

    @media (min-width:992px) { 
    /* Show category menu to 992px width */ 
    #catMenu { 
     display: none; 
    } 
    } 

    /*------------------------------------ 
     ACCOUNT HEADER BUTTONS 
    ------------------------------------*/ 

    #headerShortcuts { 
     margin-top: 10px; 
    } 

    .accountLinkList > li { 
     padding-left: 15px; 
    } 

    /* Slightly smaller cart buttons in top right of page */ 
    @media (min-width:768px) and (max-width:1065px) { 
    #headerShortcuts { 
     width: 39%; 
     margin-bottom: 10px; 
     margin-top: 12px; 
     padding: 0; 

    } 
    } 

    /* Change font size and padding on cart buttons */ 
    @media (max-width:425px) { 
    #headerShortcuts > .btn-group >.btn { 
     padding: 3px 2px; 
     font-size: 11px; 
    } 
    } 

    /*------------------------------------ 
     OFFERS PROMO BOX 
    ------------------------------------*/ 

    /* Home Page Offers */ 
    .offerscontainer { 
     margin:0 auto; 
     width:610px; 
     height:320px; 
    } 

    .offeroftheday { 
     float: left; 
    } 

    .freeshipping { 
     float: right; 
    } 

    .24hrdelivery { 
     float: left; 
     clear: left; 
     padding-top:15px; 
    } 

    @media (max-width: 770px) { 
    .offerscontainer { 
     width:100%; 
     margin: 0 auto; 
     height:auto; 
    } 

    .offeroftheday{ 
     float: right; 
     display:none; 
    } 
     .freeshipping{ 
     float: none; 
    } 

    .24hrdelivery { 
     float: none; 
     clear:both; 
    } 
    } 

Answer 1

ich es glaube nicht, dass irgendein Industriestandard als solche, seine bis zu Ihnen, wie Sie Ihr Stylesheet formatieren möchten.

Was ich in der Regel tun, ist wie folgt

• Anruf Importe oben (ich versuche Aufruf Einfuhren auf CSS zu vermeiden, die meiste Zeit aber)

• Dann alle meine generische Stile hinzufügen

• Dann fügen Sie alle benutzerdefinierten Designs für jede Seite/Abschnitt deutlich mit Kommentarblöcke erwähnt

• Dann habe ich meine Helfer Klasse

• Dann meine Medienanfragen hinzufügen (Einige Zeit habe ich die Medien-Anfragen auf einer separaten CSS-Datei als auch)

Dinge im Auge zu behalten

• versuchen Sie sich nicht wiederholen, versuchen stil~~POS=TRUNC wieder zu verwenden, wo immer es möglich ist

• Vermeiden Sie Unterstreichen als alter Browser haben Probleme mit ihm

• Validate mit W3C Validator um sicherzustellen, dass Sie auf dem richtigen Weg sind

• Wenn Sie mit Sass oder weniger Versuch bequem sind, es zu benutzen, wie es Verschachtelung ermöglichen und verbessert die Lesbarkeit des Codes

Hoffe, dass hilft!