visual - there is no document formatter for ''css''-files installed.
¿Hay alguna forma correcta e incorrecta de formatear CSS? (13)
Cuando empecé a escribir CSS, lo estaba escribiendo en una forma expandida
div.class {
margin: 10px 5px 3px;
border: 1px solid #333;
font-weight: bold;
}
.class .subclass {
text-align:right;
}
pero ahora me encuentro escribiendo css así: (Ejemplo del código que 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 el primer formulario hecho en ejemplos en línea, mientras que el segundo formulario me resulta mucho más fácil para 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? ¿Debo usar el formulario vertical en su lugar?
Creo que también depende de su editor. Utilizo el formato de multilínea y condensé todas las definiciones con el plegado de Vim (configuré las marcas de plegado para que sean { y } ), así que obtengo una etiqueta / clase / id por línea, ampliable cuando sea necesario.
Al usar los comentarios para identificar las "secciones", obtengo un aspecto muy limpio con un desplazamiento vertical mínimo, a la vez que mantengo la legibilidad de varias líneas en definiciones ampliadas.
El estilo en el que escribes es tu elección (prefiero la línea múltiple), pero Rajat dijo que deseas eliminar cualquier espacio en blanco adicional después del desarrollo. Cada vez que puede reducir el tamaño de los archivos y la carga útil, está haciendo un favor a su sitio y a sus visitantes.
Indicar la jerarquía mediante sangría no es una mala idea. Sin embargo, debes tener cuidado de no engañarte. En su ejemplo, puede suponer que .scrollButton siempre está dentro de .object1. Pero CSS no obedece esa regla. Si usara una clase .scrollButton fuera de .object1, todavía obtendría los estilos.
Me gusta escribir css en multilínea. 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. Principalmente cuando un diseñador trabaja con css y se lo entrega al desarrollador para que desarrolle un sitio que el desarrollador pueda entender fácilmente. Así que creo que css multilínea es mejor manera de trabajar.
No sé sobre ti, 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, desea 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.
Personalmente encuentro que ambos ejemplos son difíciles de leer, 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. Tu sangría puede llevarte a creer que lo es.
Prefiero el método básico y probado de multilínea, con orden razonable / lógico:
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 desplazamiento, 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 que sea muy coherente con su trabajo y en todo un equipo (si corresponde), entonces ninguna respuesta es más correcta.
Personalmente prefiero el primer estilo. Me gustan las cosas que son fáciles de leer y no me importa desplazarme. La densa naturaleza del segundo estilo ralentiza mi lectura, mi capacidad para seleccionar los elementos que me interesan.
Ciertamente, hay concesiones que deben considerarse 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 creado hasta ahora.
En última instancia, lo importante es que cualquiera que sea el estilo que elija usar es ser consistente. Esa coherencia simplificará su vida cuando tenga que actualizar su CSS o cuando otro desarrollador tenga que actualizar su CSS.
Prefiero el segundo estilo, pero ten 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, yo 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 esta es la razón por la que tantos ejemplos utilizan la versión de más espacios en blanco; tiene la reputación (si no es propiedad confirmada) de ser más fácil de leer.
Elige el que más te guste y quédate con él. Si tiene un equipo con el que cooperar, intente llegar a un consenso, o para evitarlo, escriba algunos scripts de auto-formateo y manténgase alejado de los demás. No es que sea terriblemente difícil transformar mecánicamente uno en el otro.
Prefiero multilínea hasta desplegar. En ese punto quiero que se minimice.
Siempre me ha gustado este estilo:
#something1 {
color : #ffffff;
background : #000000;
}
#something2 {
color : #000000;
background : #ffffff;
}
Pero responda a su pregunta: siempre que funcione de la misma manera, no hay una forma "adecuada" o "mejor" de formatear su código. Use un estilo que le resulte cómodo.
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 descubrir que prefiero que mi CSS se contraiga a menos que esté escribiendo o depurando en profundidad 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.
Tal vez, cuando tienes múltiples selectores y una regla, como esta:
#header li a, #header li span {
display:inline-block;
}
Por lo tanto, prefiero hacer:
#header li a,
#header li span {
display:inline-block;
}
Bueno, aquí está lo que más dice :)
Resumen: css-tricks.com realizó una encuesta. Por un margen de aproximadamente 3 a 1, la mayoría de la gente prefería los estilos de línea múltiple sobre línea simple.