¿Existe una forma correcta e incorrecta de formatear CSS?

Question

Cuando empecé a escribir CSS, lo estaba escribiendo en una forma ampliada

div.class { 
    margin:  10px 5px 3px; 
    border:  1px solid #333; 
    font-weight: bold; 
    } 
    .class .subclass { 
     text-align:right; 
     } 

pero ahora me encuentro escribiendo css como esto: (Ejemplo de código En realidad estoy escribiendo ahora)

.object1 {} 
    .scrollButton{width:44px;height:135px;} 
     .scrollButton img {padding:51px 0 0 23px;} 
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;} 
    .featuredObject .symbol{line-height:30px; padding-top:6px;} 
    .featuredObject .value {width:90px;} 
     .featuredObject .valueChange {padding:5px 0 0 0;} 
     .featuredObject img {position:absolute;margin:32px 0 0 107px;} 

y estoy empezando a preocuparme porque la mayoría de las veces veo la primera forma en ejemplos en línea, mientras que la segunda me resulta mucho más fácil de trabajar. Tiene una altura vertical más baja, por lo que puedo ver todas las clases de un vistazo con menos desplazamiento, la tabulación de la jerarquía parece más aparente, y se parece más al código que escribiría con javascript o html. ¿Es esta una forma válida de hacer código o cumplir con los estándares al ponerlo en línea si utilizo la forma vertical?

Answer 1

Personalmente prefiero el primer estilo. Me gustan las cosas que son fáciles de leer y no me importa desplazarme. La naturaleza densa del segundo estilo ralentiza mi lectura, mi capacidad para seleccionar los elementos que me interesan.

Ciertamente, hay compensaciones que se deben considerar con CSS debido al tamaño del archivo. CSS puede ser comprimido. Considero que el tamaño de los archivos CSS es la menor de mis preocupaciones con los sitios que he construido hasta ahora.

En última instancia, lo importante es que el estilo que elijas usar sea consistente. Esa coherencia te simplificará la vida cuando tengas que actualizar tu CSS o cuando otro desarrollador deba actualizar tu CSS.

Answer 2

Well, here is what say the most :)

Resumen: css-tricks.com corrió una encuesta. Por un margen de aproximadamente 3 a 1, la mayoría de las personas prefirieron estilos de CSS multilínea sobre línea única.

Answer 3

No sé ustedes, pero me gusta el modo vertical durante el desarrollo, ya que es mucho más fácil de leer para mí.

Sin embargo, en prod, quiere comprimir su CSS para reducir la carga útil y, por lo tanto, el segundo estilo tiene sentido. Sobre todo, estarías usando algún compresor CSS para hacer esto.

Answer 4

me gusta escribir css en varias líneas. porque esto es más fácil de escribir y leer. podemos encontrar el error lo antes posible y una vista es agradable con sangría. sobre todo cuando un diseñador trabaja con CSS y le dio al desarrollador para desarrollar un sitio que el desarrollador puede entender fácilmente. así que creo que el CSS de varias líneas es una mejor manera de trabajar.

Answer 5

La indicación de la jerarquía mediante sangría no es una mala idea. Sin embargo, debes tener cuidado de no engañarte a ti mismo. En su ejemplo, puede suponer que .scrollButton siempre está dentro de .object1. Pero CSS no obedece esa regla. Si usó una clase .scrollButton fuera de .object1, aún obtendría los estilos.

Answer 6

Prefiero el segundo estilo, pero tenga en cuenta que es un estilo. De la misma manera que algunas personas prefieren

function (arg) 
{ 

    body(); 

} 

a

function(arg){ 
    body(); 
} 

Yo no lo entiendo, a mí mismo. El argumento es "es más fácil de leer", y mi respuesta es consistentemente "... para ti".Como nota, tengo la sensación de que este es el motivo por el que tantos ejemplos usan la versión más en blanco; tiene la reputación (si no es una propiedad confirmada) de ser más fácil de leer.

Elija el que más le guste y quédese con él. Si tiene un equipo con el que cooperar, trate de llegar a un consenso o, salvo eso, escriba algunas secuencias de comandos de formato automático y manténgase alejado del resto. No es que sea terriblemente difícil transformar mecánicamente uno en el otro.

Answer 7

El estilo que escriba es su elección (prefiero la línea múltiple) pero como Rajat dijo que desea eliminar cualquier espacio en blanco adicional después del desarrollo. Cada vez que puede reducir el tamaño del archivo y la carga, está haciendo un favor a su sitio y a sus visitantes.

Answer 8

Creo que también depende de su editor. Utilizo el formato multilínea y condenso cada definición con el plegado de Vim (configuré las marcas de doblado para que sean { y }) de modo que obtengo una etiqueta/clase/ID por línea, ampliable cuando sea necesario.

Al utilizar los comentarios para identificar "secciones" obtengo un aspecto muy limpio con un desplazamiento vertical mínimo mientras mantengo la legibilidad de las líneas múltiples en las definiciones ampliadas.

Answer 9

Solo quiero señalar que Textmate tiene una opción que le permite cambiar fácilmente entre estos dos estilos seleccionando un área y presionando Ctrl-Q/Ctrl-Alt-Q para expandir/contraer. Como consecuencia, he llegado a la conclusión de que prefiero que mi CSS se haya colapsado a menos que esté escribiendo o depurando profundamente una sección específica. Pero, con la capacidad de cambiar fácilmente entre los dos, veo que ambas formas son útiles para diferentes circunstancias.

Answer 10

Prefiero multilínea hasta que lo implementemos. En ese punto lo quiero minificado.

Answer 11

Personalmente encuentro difíciles de leer sus dos ejemplos, especialmente el segundo.

La línea múltiple es más fácil de seguir, y la sangría puede ser engañosa ya que CSS no se aplica necesariamente de esa manera. Su sangría puede llevarlo a creer que es.

Yo prefiero el método básico probado y verdadero de varias líneas, con un orden razonable/lógica:

div.class 
{ 
    margin: 10px 5px 3px; 
    border: 1px solid #333; 
    font-weight: bold; 
} 
.class 
{ 
    text-align: center; 
    margin-left: 10px; 
} 
.class .subclass 
{ 
    text-align:right; 
} 

ocupa un poco más de espacio y requiere un poco de movimiento en sentido vertical para tomar, pero es fácil de seguir . Aquellos preocupados por la optimización siempre pueden usar herramientas de reducción de CSS para producir archivos CSS.

Al final, siempre y cuando sea muy en consonancia con su trabajo y en un equipo (si corresponde), entonces no hay una respuesta más correcta.

Answer 12

Tal vez, cuando se tienen varios selectores y una regla, así:

#header li a, #header li span { 
    display:inline-block; 
} 

lo tanto, yo preferiría hacer:

#header li a, 
#header li span { 
    display:inline-block; 
} 

Answer 13

siempre me ha gustado este estilo:

#something1 { 
    color   : #ffffff; 
    background  : #000000; 
} 

#something2 { 
    color   : #000000; 
    background  : #ffffff; 
} 

Pero usted responde su pregunta: Siempre y cuando funcione de la misma manera, no hay una forma "adecuada" o "mejor" de Formatea tu código. Usa un estilo con el que te sientas cómodo.