having a hard time understanding this responsive css-code

Question

so I've been trying to understand the code below but i've never seen people use css in this way.

Can someone explain what they are doing? when and why should you use: \ , > , < , * , +. Also what does the 00\25 mean etc?

If anyone who could shed some light on this I would be very thankful! I know that I can probably find all of this in a documentation somewhere, but if you already possess this knowledge i would be very thankful if you could share it with me!

Here's a segment of the code.

    .row.\30 \25 > * {
        padding: 0 0 0 0em;
    }

    .row.\30 \25 {
        margin: 0 0 -1px 0em;
    }

    .row.uniform.\30 \25 > * {
        padding: 0em 0 0 0em;
    }

    .row.uniform.\30 \25 {
        margin: 0em 0 -1px 0em;
    }

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1.5em 0 0 1.5em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
        padding: 0 0 0 3em;
    }

    .row.\32 00\25 {
        margin: 0 0 -1px -3em;
    }

    .row.uniform.\32 00\25 > * {
        padding: 3em 0 0 3em;
    }

    .row.uniform.\32 00\25 {
        margin: -3em 0 -1px -3em;
    }

    .row.\31 50\25 > * {
        padding: 0 0 0 2.25em;
    }

    .row.\31 50\25 {
        margin: 0 0 -1px -2.25em;
    }

    .row.uniform.\31 50\25 > * {
        padding: 2.25em 0 0 2.25em;
    }

    .row.uniform.\31 50\25 {
        margin: -2.25em 0 -1px -2.25em;
    }

    .row.\35 0\25 > * {
        padding: 0 0 0 0.75em;
    }

    .row.\35 0\25 {
        margin: 0 0 -1px -0.75em;
    }

    .row.uniform.\35 0\25 > * {
        padding: 0.75em 0 0 0.75em;
    }

    .row.uniform.\35 0\25 {
        margin: -0.75em 0 -1px -0.75em;
    }

Here's a JSfiddle with more of the CSS: http://jsfiddle.net/c788hvmw/

Answer 1

Can someone explain what they are doing? when and why should you use: \ , > , < , * , +.

They are different types of CSS Selectors.

> is a child selector. An example of it use is:

p {
  color: blue;
}
div > p {
  color: red;
}

<p>This text will be blue</p>
<div>
  <p>This text will be red</p>
  <form>
    <p>This text will not be red, but blue</p>
  </form>
</div>

* is a wildcard selector. This will select all elements at the level it is used.

\ is used to escape unicode characters, so in your code it is used to escape different percentages e.g.

/* this means .row.0% */
.row.\30 \25 > * {
    padding: 0 0 0 0em;
    color: red;
}

<div class="row 0%">
  <p>Red text</p>
  <span>Red text</span>
  <br>
  default colour text
</div>

Update

But when would it be useful to use \30\25 for instance?

It would be useful if you had a class/ID that started with a digit as CSS syntax rules don't allow this, therefore you would escape the digit. See this JSFiddle using your example CSS.

That being said, I would personally avoid starting with a digit unless you find yourself needed to when working on someone else's code as it's harder to read.