Discussão sobre o uso do xCSS

[Anderson Ferreira]

Boa tarde a todos,

Então, não sei se você's conhecem, mais o xCSS é um framework CSS. Vamos dizer, q é a própria linguagem do CSS, juntamente com o PHP.

Ou seja, pode-se criar variáveis PHP, e armazenar uma cor HexaDecimal, e utilizar esta variável no CSS. Como o Exemplo abaixo:

vars { $laranja = #FFAD00; }


.menu { background: $laranja; }
.conteudo { color: $laranja; }

É muito útil e prático para o programador :D O framework funciona estilo uma linguagem de programação mesmo, ele até possui estilo um 'compilador'. Ou seja, você escreve todo o código com as variáveis PHP e com o CSS, e depois ele 'compila (converte)', tudo para CSS, para q o navegador possa entender. No caso do exemplo anterior, depois de 'compilado' pelo framework, ficaria da seguinte maneira o código:

.conteudo {
    color: #FFAD00;
}
.menu {
    background: #FFAD00;
}

Mais o problema é... Quando ele compila, ele não fica com uma boa semântica (na minha opinião). Como por exemplo a tag 'body' q deveria ficar no início do CSS, fica lá pro meio =\ No caso do meu CSS (depois de compilado pelo framework), olha como ficou:

.conteudo,
.barra1,
.barra2,
.barra3,
.barra4 {
	float: left;
	background: #FFF;
}
.conteudo .texto,
.barra1 .texto,
.barra2 .texto,
.barra3 .texto,
.barra4 .texto {
	padding: 10px 0;
	line-height: 20px;
	border: solid;
}
.conteudo .titulo,
.barra1 .titulo,
.barra2 .titulo,
.barra3 .titulo,
.barra4 .titulo {
	width: 100%;
	line-height: 30px;
	color: #FFF;
	text-align: center;
}
.barra1,
.barra2,
.barra3,
.barra4 {
	width: 140px;
}
.barra1 .titulo,
.barra2 .titulo,
.barra3 .titulo,
.barra4 .titulo {
	height: 30px;
	font-size: 20px;
}
.barra1 .menu li,
.barra2 .menu li,
.barra3 .menu li,
.barra4 .menu li {
	line-height: 20px;
}
.barra1 .img,
.barra2 .img,
.barra3 .img,
.barra4 .img {
	margin-top: 10px;
}
.barra1 .img img,
.barra2 .img img,
.barra3 .img img,
.barra4 .img img {
	border: 2px solid;
}
.barra1 .texto,
.barra2 .texto,
.barra3 .texto,
.barra4 .texto {
	border-width: 0 0 1px 0;
}
.barra1 .menu,
.barra2 .menu,
.barra3 .menu,
.barra4 .menu {
	margin-top: 10px;
	height: 100px;
	padding-bottom: 10px;
}
.barra1 a,
.barra2 a,
.barra3 a,
.barra4 a {
	color: #000;
}
.barra1 .img .texto,
.barra2 .img .texto,
.barra3 .img .texto,
.barra4 .img .texto {
	font-weight: bold;
	line-height: 20px;
}
.conteudo,
 .barra1,
 .barra2,
 .barra3 {
	margin-right: 15px;
}
.barra4 .titulo {
	background: #aa00ff;
}
.barra4 .menu {
	border-bottom: #aa00ff 1px solid;
}
.barra3 .texto {
	color: #df1322;
}
.barra3 .titulo {
	background: #df1322;
}
.barra3 .menu {
	border-bottom: #df1322 1px solid;
}
.barra3 .menu li {
	color: #df1322;
}
.barra4 .menu li {
	color: #aa00ff;
}
.barra4 .img img {
	border-color: #aa00ff;
}
.barra1 .img img {
	border-color: #00b6e7;
}
.barra2 .texto {
	color: #FFAD00;
}
.barra2 .img img {
	border-color: #FFAD00;
}
.barra3 .img img {
	border-color: #df1322;
}
.barra4 .texto {
	color: #aa00ff;
}
.barra1 .menu li {
	color: #00b6e7;
}
.cabecalho {
	background: #FFF;
	width: 100%;
	height: 100px;
	margin-bottom: 10px;
	padding-top: 20px;
	border-bottom: #000 1px solid;
}
.logotipo {
	background: url('../../img_np/logotipo.png');
	width: 290px;
	height: 67px;
	margin-left: 30px;
}
.nuvemdetags {
	width: 100%;
}
.cadastro {
	margin: 20px 0 50px 0;
}
.bordas {
	background: #000 url('../../img_np/bordas.png');
	width: 350px;
	height: 11px;
}
.titulo ul li {
	padding: 0 10px;
	color: #FFF;
	display: inline;
	position: relative;
}
.geral {
	background: #FFF;
	width: 970px;
	position: relative;
	left: 50%;
	margin-left: -485px;
}
.conteudo {
	background: #FFF;
	width: 350px;
}
h3 {
	color: #00b6e7;
	font-size: 18px;
	font-weight: bold;
}
.titulo {
	background: #000;
	height: 19px;
	font-size: 18px;
}
.cadastro p {
	margin: 20px 0 5px 0;
}
.cadastro .input {
	width: 200px;
	height: 25px;
	border: #999 1px solid;
}
.barra1 .texto {
	color: #00b6e7;
	border-color: #00b6e7;
}
.barra2 .titulo {
	background: #FFAD00;
}
.barra2 .menu {
	border-bottom: #FFAD00 1px solid;
}
body {
	min-width: 1000px;
	font-family: Arial;
}
.barra1 .menu {
	border-bottom: #00b6e7 1px solid;
}
.cadastro .submit {
	background: #DDD;
	width: 200px;
	height: 25px;
	border: #999 1px solid;
}
.barra1 .titulo {
	background: #00b6e7;
}
.barra2 .menu li {
	color: #FFAD00;
}

Ai qria perguntar isto para você's, o que acham deste framework? Aprovado? :D

Tipo, pela parte do programador, acho q TODOS irão aprovar, pois facilita MUITO o trabalho. Mais gostaria da opinião de você's em relação a semêntica do CSS do site, se vale a pena utilizar ele (o framework).

Obrigado,

Anderson Ferreira

[Thelon]

Cara nunca tinha ouvido falar dele

porém vou dar minha humilde opinião

Acho que CSS já é simples o suficiente para precisar de um framework se você souber administrar seu código e pensar antes de fazer

consegue aproveitar muita coisa de outras partes dele em tudo economizando muitas linhas e trabalho de edição

Eu tenho muito o que aprender para fazer um código mais simples e estou estudando para isso.

Porém se você pensar em questão de KB esse framework vai deixar seu codigo bem diferente.

Sem contar que não vejo vantagem em usar variáveis pelo menos não pela breve pesquisa que fiz

Ainda fico com o CSS simples e pratico de sempre.

vou tentar me informar mais ;)

[Anderson Ferreira]

Sim, a questão de facilidade dele, na minha opinião, é principalmente nas cores.

Como por exemplo, eu como estou criando um site com basicamente 2 cores, azul e laranja. Então inúmeros lugares do meu código CSS, irá usar essas cores.

Vamos supor q no futuro, eu precisaria trocar o azul, por um azul mais escuro? Seria um baita de trabalho, olhar linha por linha do CSS, procurando aqla cor, e colocar outra no seu lugar.

No meu ponto de vista atual, só estou utilizando ele pra isso mesmo ... Por questão de cores principalmente, q ficam todas armazenadas em uma variável, e se eu quiser trocar no futuro, só precisaria trocar de 1 variável, e automaticamente trocaria de todo o site.