Ando buscando un articulo que ley hace tiempo sobre el orden de las propiedades en las hojas de estilos, por mucho que pregunto al señor google y a los expertos no doy con el enlace.
Trata de saber el orden adecuado para escribir CSS, no el orden de la hoja de estilos, sino saber si primero ha de ir los margins y padddings, luego las fuentes, los colores, etc..
Os suena?
Comentarios
Me suena haber visto algo en uno smashing magazine pero no te puedo asegurar... échale un ojo a ver si tienes suerte.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
:)
# · Chema · hace 1685 días
Tengo "CSS: the definitive guide" y me suena haber leído algo de eso al principio (cuando habla de la cascada, obviamente). Pero creo que el problema deviene al utilizar navegadores antiguos.
# · Marc · hace 1685 días
En la Smashing también hay uno realmente bueno que habla de el orden en que se aplican las ordenes, pero no por tipo de propiedad sino por especificidad en las declaraciones.
# · RUDE · hace 1685 días
También tengo la idea de haber leído algo, pero estoy casi seguro de que no hay un orden determinado para hacerlo. De hecho hay un artículo en Samshing Magazine que reúne técnicas para una buena escritura de CSS, y algunos los ordenan alfabéticamente, por ejemplo. Lo que sí importa según tengo entendido es el orden de los selectores y el tipo de selector. Lo que me da curiosidad es esa coincidencia en los editores visuales de hojas de estilo de tener cierto orden en la interfase: fuentes, fondos, padding, margin, float, etc... La dejo picando y seguiré investigando. Gracias por picarme con la curiosidad.
# · Lex · hace 1685 días
Pues yo tengo mi método que no sé si será el mejor o no, pero me gusta. Primero declaro las propiedades que definen tamaños y posiciones de bloque, luego tipografía y al final colores y bordes ¿por qué? porque lo que más guerra suele dar es lo primero y así de un vistazo veo qué está afectando a la colocación y dimensiones de los elementos y al final dejo lo menos "importante", colorines y tipografía. Mi orden viene a ser algo así: position, float, left, top, width, height, display, overflow, font, background y border
# · Jorge Hernández Añón · hace 1685 días
Como lo hago yo es
1) como se va a comportar ( display ) ej block, linea
2) su tamaño height y width :
3) su posicionamiento, aqui entraria position y float
4) sigo el modelo de cajas, primero el margen segundo el border y tercero el padding
y a partir de aqui ya si que voy un poco descontrolado con lo que queda, pero intento poner
1) la alineacion de ese texto
2) la fuente;
3) el color
4) el background
sigo esto para separar un poco como se va a colocar y despues como se va a ver
saludos
# · noth · hace 1685 días
Los artículos smashingmagazine son geniales, ambos los he leído por encima y ayudan un montón.
@RUDE en el primer enlace que es donde hablan de ponerlos alfabéticamente.
A mi la idea de ponerlos alfabéticamente no me gusta, prefiero colocarlo por comportamientos y características aunque todo es probar.
Veo que tanto Jorge como noth coinciden en colocar primero los comportamientos de la caja y por ultimo aunque cada uno al azar sobre su aspecto.
Trabajare sobre los dos a ver cual me viene mejor.
He estado buscando y no encontraba nada, ahora todo esta mas claros, gracias a todos :).
# · IceBeat · hace 1684 días
El orden lógico seria de afuera para adentro... margenes, tamaño, estilo, alineacion del texto, texto... siguiente caja (div)... no?
# · ZydRick · hace 1684 días
@ZydRick Síp, yo uso esa forma
# · ImZyos! · hace 1684 días
Hay varias técnicas, y cada uno debería usar la que le vaya mejor, porque considero que muchos programadores no optan por la opción con más legibilidad y que sea entendible por otros.
A base de muchos proyectos vas aprendiendo cosas, como que input[type=text] no aplicará a IE6, pero quizá no es tan grave que los usuarios de IE6 no vean estos estilos, o que no hace falta #content #main para solventar especificidad en IE, mejor jugarlo de otra forma. O intentar no usar !important a menos que sea totalmente necesario.
Otra cosa importante, es que separar los estilos en muchos archivos no es tan óptimo, a veces es complicado separar css por páginas, mejor usar, forms.css, base.css, ie.css y se acabó, en fin, todo un mundo...
Gracias por el post ;)
# · frenadoll · hace 1684 días
@frenadoll en este mundo en el que se quiere estandarizar todo sería bueno tener un forma, programando "Alone" estaría perfectamente de acuerdo contigo, pero si el trabajo es en grupo necesitas saber donde buscar y no recorrer todo el css para encontrar la propiedad, en cuanto a lo de separar en diferentes archivos, yo uso base, typography, forms, grid y por ultimo y no menos importante "iesucks.css"
# · ImZyos! · hace 1684 días
Yo tuve la misma pregunta que tu hace tiempo y no encontré nada mas que alfabéticamente, yo los he empezado a ordenar hace poco, con ayuda de algunas cosas que he visto en mi actual trabajo, yo pongo:
display, postion, float
# · boton · hace 1683 días
Yo tuve la misma pregunta que tu hace tiempo y no encontré nada mas que alfabéticamente, yo los he empezado a ordenar hace poco, con ayuda de algunas cosas que he visto en mi actual trabajo, yo pongo:
display, postion, float - mas importantes de ver para mi margin, border, padding - sigo también el modelo de cajas width, height background, color font, text-....
P.D.: He visto que otras personas que usan un orden parecido ,creo que no seria mala idea discutir un orden entre todos para, optimizar la localización de cada propiedad... yo la dejo caer P.D: Publico 2 veces por que se me trunco el anterior mensaje, supongo, que por el sistema de seguridad...
# · boton · hace 1683 días
@boton Curioso, es lo que hace la w3c XD!
# · ImZyos! · hace 1683 días
yo también declaro de afuera hacia adentro, creo que es más que nada por comodidad, primero ubícas bién las cajas(a veces poniedo bordes o bg--color aleatorios solo para distingir bién las cajas) luego las decoras.
# · acido · hace 1683 días
lei
# · leo · hace 1683 días
He empezado a aplicar los estilos como comentáis, es mejor ir acompañando al modelo de caja y luego terminar con las propiedades que solo afectan al diseño como fondos y colores.
Luego publico mi forma aunque es muy parecida a la que usáis (esta basada en ellas).
display overflow clear
position float
height width
margin border padding
font text
background color
:)
# · Icebeat · hace 1683 días
Yo también recuerdo haber leído ese post, pero parece que no me lo guardé, acabo de mirar el del.icio.us y nada.
Imagino que en parte dije: ¡ey, que coño más dará! :)
# · Nordic · hace 1682 días
@Nordic jeje, bueno la importancia es intentar tener un orden en toda la hoja de estilo, ya que te pones te pones :P.
# · IceBeat · hace 1682 días
Uy!!! cambio eso de ley por leí.... ;-)
# · corsaria · hace 1681 días
19 eso es cierto. Yo no utilizo ningún orden consciente, aunque sí tengo mis normas internas para saber encontrar las cosas. Por ejemplo:
# · Nordic · hace 1681 días
Vaya, el comentario salió fatalmente formateado. :(
# · Nordic · hace 1681 días
@Nordic esto me recuerda que tengo que actualizar jeje.
Algunos de esos puntos también los hago yo, sobre todo hoja para IE e ir de lo genérico a lo concreto.
# · IceBeat · hace 1681 días
pues yo lo de dividir los css, en hojas distintas, lo hago de la siguiente forma, trabajo maquetando y programando para una empresa web, con webs bastante grandes en secciones.
Lo que propenis, una hoja para texto otra para formularios y así, lo probé pero le veo un error, pierdes la consciencia de la herencia, no sabes que puedes estar heredando, porque sencillamente está en otra hoja.
Yo lo hago así
Tengo un general.css, donde coloc: 1) mis estilos reset que suelo utilizar 2) la estructura de la web , header, content, pie etc.. 3) algunos estilos que casi siempre se usa, nav-utiidades, nav-menu, enlaces, y h1
esto así al empezar
después miro el proyecto, imaginemos que es un concesionario tendremos, varias secciones, marcas, modelos, venta automoviles
pues creo una css solo para cada seccion
de esta forma en el head, si estoy viendo la seccion de marcas, solo cargaría el general.css y marcas.css
no necesito saturar la carga, con un formulario de contacto que no estoy viendo, y así lo tengo bastante más ordenado y algo en marcas no sale bien, voy directo.
y dentro de marcas.css
si que tengo /*** estructura ***/
/*** enlaces ***/
/*** formularios ***/
/*** Seccion marcas internacionales ***/ etc ...
saludos
# · noth · hace 1681 días
@noth Yo tengo algo parecido.
http://icebeat.bitacoras.com/post/224/organizar-un-css
# · IceBeat · hace 1680 días
No se si es el que estas buscando pero me pasaron una pagina muy interesante acerca de CSS en HTML DOG: http://www.htmldog.com/reference/cssproperties/
Si no es lo que buscabas por lo menos espero que sea util. Saludos y muy buena web!
# · Alkaucil · hace 1677 días
@Alkaucil Muchas gracias tio, esta genial la pagina, algo asi buscaba para crear un bundle para textmate.
# · IceBeat · hace 1675 días
yo crreo que deben de especificar lo que verdaderamente son las propiedades
# · soledad · hace 1295 días