Pregunta teniendo dificultades para entender este código css receptivo


así que he estado tratando de entender el código a continuación, pero nunca he visto a gente usar css de esta manera.

¿Alguien puede explicar lo que están haciendo? cuándo y por qué debería usar: \ , > , < , * , +. Además, ¿qué hace el 00\25 significa, etc.?

¡Si alguien pudiera arrojar algo de luz sobre esto, estaría muy agradecido! Sé que probablemente pueda encontrar todo esto en una documentación en alguna parte, pero si  ¡Ya poseo este conocimiento, estaría muy agradecido si pudieras compartirlo conmigo!

Aquí hay un segmento del código.

    .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;
    }

Aquí hay un JSfiddle con más CSS: http://jsfiddle.net/c788hvmw/


8
2017-07-15 10:11


origen


Respuestas:


¿Alguien puede explicar lo que están haciendo? cuándo y por qué debería usar: \,>, <, *, +.

Son diferentes tipos de Selectores de CSS.

> es un selector de niños. Un ejemplo de su uso es:

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>

* es un selector de comodines. Esto seleccionará todos los elementos en el nivel en que se usa.

\ se usa para escapar caracteres Unicode, por lo tanto, en su código se usa para escapar de diferentes porcentajes, p.

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

Actualizar

Pero, ¿cuándo sería útil usar \ 30 \ 25 por ejemplo?

Sería útil si tuviera una clase / ID que comenzó con un dígito, ya que las reglas de sintaxis de CSS no lo permiten, por lo tanto, escaparía del dígito. Mira esto JSFiddle usando tu CSS de ejemplo.

Habiendo dicho eso, yo personalmente evitaría comenzar con un dígito a menos que se encuentre en la necesidad de trabajar con el código de otra persona, ya que es más difícil de leer.


4
2017-07-15 10:56



Parece que están escapando personajes por su CSS. No estoy seguro de qué sentido tiene esto, pero el caso de uso general sería usar comillas con una clase o nombre de identificación. Entonces podrías hacer lo siguiente:class="my\'classname\'", que también se puede escribir class="my\27classname\27" donde 27 es el valor hexadecimal para una comilla simple ('). Aquí está un lista de los valores de hex y ascii

Como dije, no estoy seguro de por qué alguien haría esto, pero puedes.

Algunos de los ejemplos tienen algún tipo de sentido de esta manera. .row.uniform.\35 0\25 podría ser traducido para significar .row.uniform.5 0%  Realmente no estoy seguro de lo que eso significaría, pero si (y no sé mucho sobre esto) el espacio puede ser ignorado, podría ser una fila con 50% de ancho o dos columnas, cada una de 50%. Aquí hay un (más antiguo) artículo en eso.


1
2017-07-15 10:54