Desarrollando un Modelo de trabajo CSS

[quico5]

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

[juangemelo01]

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.)

[quico5]

uhmm, tengo entendido que las IDs están en desuso y mal vistas a nivel CSS profesional

[juangemelo01]

Iniciado por quico5

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)

[quico5]

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

[pzin]

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.

[quico5]

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

[pzin]

Iniciado por quico5

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.