Correct formatting for custom.css

I have been adding lots of extra CSS to a custom.css site and the stylesheet ended up a bit of a mess.

I have decided to break the custom stylesheet (custom.css) into sections of the website to keep it clean with /*--- and caps for each block of CSS.

Comments have been added where it isn't immediately apparant what is happening in that style change.

Then finally, @media queries have been added at the bottom of each clock section (rather than a long list at the bottom)

Is there an industry standard in how stylesheets should be formatted and does the above create any issues? Bearing in mind there is a untouched stylesheet.css too.

Here is a small example of what I have done:

    /*------------------------------------
        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;
    }
    }

Solution

I dont think there is any Industry standard as such, its upto you how you want to format your style sheet.

What I Usually do is as follows

Call imports on top (I try to avoid calling imports on css most of the time though)
Then add all my generic styles
Then add all the custom styles for each page/section mentioned clearly with comment blocks
Then I have my helper class
Then add my media queries (Some time I have the media queries on a separate css file as well)

Things to keep in mind

Try not repeat yourselves, try to reuse style rules where ever possible
Avoid using underscores as old browsers have issues with it
Validate with w3c validator to make sure you are on track
If you are comfortable using Sass or Less try to use it as it enable nesting and improves code readability

Hope that helps !