Foros del Web » Creando para Internet » CSS »

Desarrollando un Modelo de trabajo CSS

Estas en el tema de Desarrollando un Modelo de trabajo CSS en el foro de CSS en Foros del Web. Estoy interesado en tener un modelo de buenas practicas, hasta donde he leído he escrito mi modelo experimental, busco sugerencias para mejorarlo y partir de ...
  #1 (permalink)  
Antiguo 13/11/2014, 01:00
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Desarrollando un Modelo de trabajo CSS

Estoy interesado en tener un modelo de buenas practicas, hasta donde he leído he escrito mi modelo experimental, busco sugerencias para mejorarlo y partir de el próximos proyectos, gracias

Referencias:
http://sisneting.com.mx/blog/guia-de...practicas-css/
http://octuweb.com/organizacion-del-...yectos-grandes

Código HTML:
/**
 * ^navigation ^lists
 */
.nav{}

/**
 * ^grids ^lists ^tables
 */
.matrix{}

/*------------------------------------*\
	$RESET
		zona zero.
	$ELEMENTOS
		h1 sin clase, ul sin clase etc.
	$OBJETOS (Esqueleto) y $ABSTRACCIONES
		Patrones de diseño genéricos y subyacentes.
	$COMPONENTES
		Componentes construídos a partir de objetos y sus extensiones.
	$TEXTURAS
		Estados de error, info, etc…
	$MIXINS
		Funciones personalizadas...
\*------------------------------------*/





/*------------------------------------*\
		$RESET
\*------------------------------------*/





/*------------------------------------*\
		$ELEMENTOS
\*------------------------------------*/





/*------------------------------------*\
		$OBJETOS (Esqueleto) y $ABSTRACCIONES
\*------------------------------------*/
/*div*/.page-wrapper{}




/*------------------------------------*\
		$COMPONENTES
\*------------------------------------*/
//OOCSS(Object Oriented CSS) .persona--mujer{}
	//estructura (objetos)
	//skin (extension)

//Convenciones BEM .persona--mujer

//Selectores Cuasi-calificados /*div*/

/*div*/	.persona{}
/*div*/	.persona--mujer{}
/*div*/		.persona__mano{}
/*div*/		.persona__mano--izquierda{}
/*div*/		.persona__mano--derecha{}

/**
 * Extiende `.foo` en theme.css
 */
 .foo{}




/*------------------------------------*\
		$TEXTURAS
\*------------------------------------*/
/**
 * Extendido de `.foo` en base.css
 */
 .bar{}





/*------------------------------------*\
	$MIXINS (LESS)
\*------------------------------------*/
.font-size(@font-size: 16) {
	@rem: (@font-size / 10);
	font-size: @font-size * 1px;
	font-size: ~"@{rem}rem";
}
  #2 (permalink)  
Antiguo 13/11/2014, 13:57
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Desarrollando un Modelo de trabajo CSS

yo por lo general ordeno mi codigo css de la siguiente maneta

Etiquetas

ID

Clases
------
Mediaqueries

si uso varios @Keyframes, lo hago en otro archivo css para hacerlo mas practico

claro, las etiquetas, IDś y Clases las ordeno Alfabeticamente, por igual sus propiedades (cakcground, border, color, height, margin, witdh, etc.)
  #3 (permalink)  
Antiguo 13/11/2014, 20:56
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Desarrollando un Modelo de trabajo CSS

uhmm, tengo entendido que las IDs están en desuso y mal vistas a nivel CSS profesional
  #4 (permalink)  
Antiguo 14/11/2014, 00:21
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Desarrollando un Modelo de trabajo CSS

Cita:
Iniciado por quico5 Ver Mensaje
uhmm, tengo entendido que las IDs están en desuso y mal vistas a nivel CSS profesional
me gustaria consultar tu fuente amigo, igual puede ser que yo este en un error.

por lo general le asigno lo que tenga como estructura en la web (claro, del lado de CSS, ya que con javascript le doy mas uso)
  #5 (permalink)  
Antiguo 14/11/2014, 09:47
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Desarrollando un Modelo de trabajo CSS

Hola juangemelo01

Yo antes maquetaba sobre la marcha y hace años usaba los IDs

En el siguiente enlace comentan buenas y malas practicas y las ventajas de adoptar buenos hábitos (Esta publicación me pareció mas elaborada y completa con respecto a otras publicaciones mas básicas en otras webs, estas practicas se usan en Frameworks populares como Bootstrap o Fundation y permite un CSS mas legible y re-utilizable):
http://sisneting.com.mx/blog/guia-de...practicas-css/

Me parece una web interesante para mejorar las practicas, y no cometer errores típicos que pueden echar abajo el control total sobre el código anteriormente escrito



Hay otras propuestas interesantes para agrupar grupos de clases de un conjunto y que se reconozca fácilmente que forman una familia de etiquetas que por lo general se repiten y no es necesario indicar una ruta jerárquica css que es mas compleja para el rende-rizado del navegador y muchas veces también hace menos reutilizable/mantenible nuestro código
http://octuweb.com/organizacion-del-...yectos-grandes
  #6 (permalink)  
Antiguo 14/11/2014, 10:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Desarrollando un Modelo de trabajo CSS

Es una tontería bastante grande que los identificadores estén en desuso. Si acaso están en auge. Es mucho más rápido mediante JavaScript seleccionar un elemento por su identificador que por otra cosa.

Obviamente si estás montando un framework CSS, que es lo que a mí me parece —sea o no para un sólo proyecto— no vas a estar utilizando identificadores, porque la base del código es que se pueda reutilizar.

Pero bueno, los identificadores son para lo que son y las clases son para lo que son. No he escucha ni leído a nadie que forme parte de la W3C que piensen en quitarlos. Realmente es una discusión ya algo vieja y sin sentido realmente.
__________________
(:
  #7 (permalink)  
Antiguo 14/11/2014, 20:38
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Desarrollando un Modelo de trabajo CSS

Gracias a los dos, veo que puedo sacar cosas útiles de los frameworks y quizás disponer de uno propio, he experimentado dificultades en una web compleja donde las modificaciones se volvían inviables indicando que necesito disponer de un modelo de trabajo que evite malas practicas mientras mejoro las habilidades de maquetador web, por guías y frameworks parecía indicar que los IDs ya no se usaban, aunque acabo de ver que eskeleton los usa exclusivamente, puede resultar confuso seguir aprendiendo mas si al final no siempre es fácil buscar y fiarse de lo que hay en internet

Por lo que veo, algunos no quieren los IDs porque no pueden reutilizarse y deben tener mas prioridad que una clase

Código HTML:
<div id="header">
<p>
<a href="#">Foo</a>
<a href="#">Bar</a>
</p>
<div class="tweet">
<a href="#">Follow me on twitter</a>
</div>
</div>
<div class="tweet">
    <a href="#">Follow me on twitter</a>
</div>
/* CSS */
#header a { color: #f90;  }
.tweet     a { color: #000; }

Última edición por quico5; 14/11/2014 a las 21:25
  #8 (permalink)  
Antiguo 15/11/2014, 01:44
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Desarrollando un Modelo de trabajo CSS

Cita:
Iniciado por quico5 Ver Mensaje
Por lo que veo, algunos no quieren los IDs porque no pueden reutilizarse y deben tener mas prioridad que una clase
Pero es que no usar identificadores por esa razón es una obviedad. Es como decir que no usas paraguas en un día soleado.

Cada cosa para lo que es.

Siguiendo con el asunto primario… Yo personalmente pondría que usar pre/post-procesadores de CSS como Sass o Autoprefixer como buenas prácticas. Queda todo muy ordenado y limpio —si se quiere, claro.
__________________
(:

Etiquetas: modelo, trabajo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:29.