Re Ciclismo é Buzzword e em Desenvolvimento Web isso significa não é diferente. Ele conserva a energia, em termos de esforço!
Ao longo de anos de escrita e criação de HTML CSS a partir de desenhos, eu tenho seguido algumas das melhores práticas, em busca de economia de tempo e energia naquilo que comumente termo como "Re-inventar a roda". E outra vez, eu disse a mim mesmo, que eu preciso criar alguns modelos, alguns CSS reutilizável padrão que eu usaria OUT OF THE BOX no meu trabalho futuro. Embora não completamente, mas eu consegui atingir alguns dos objetivos.
Ao promover, Re-utilização de CSS, eu tinha um olhar para os quadros alguns CSS que são comumente disponível para nós e decidiu colocá-los para usar, uma vez que estes são experimentadas e testadas e criadas por muito desenvolvedores experientes, do que eu. Mais importante "evitar a re-inventar".
Apesar de conhecimento comum para os veteranos, eu tentei caneta alguns dos principais conceitos / melhores práticas / pensamentos que tem ido para a criação dessas estruturas, para fazer reciclagem de CSS possível. Espero que isto ajude alguns desenvolvedores CSS que estão prestes a embarcar e, recentemente, o bandwagon CSS!
Teclas de reciclagem de CSS:
Use Convenções de Nomeação
Isso tem que ser o fator mais importante para tornar a CSS / HTML re-utilizável. Dando nomes consistentes para os elementos da página permite a reutilização dos componentes PAGE, e suas cores, com pouca ou modificações. De acordo com este argumento, Mesmo HTML5, em uma mudança grande mudança em relação aos seus antecessores, é apresentar alguns viz marcas estrutural. <article>, <section>, <header>, <aside> e <nav> [ O que vai trazer HTML5? ]. Mesmo com HTML 4 (ou inferior), é melhor para nomear seções padrão da sua página consistanly como no exemplo simples abaixo ...
Lembre-se, A maioria das páginas do seu projeto, acabam por ter os mesmos elementos principais estruturais. Identificar esses elementos de página comuns núcleo ....
<div id="container">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Redefinir estilos padrão (CSS Redefine): Se você usa um quadro ou escrever o seu próprio, você deve fornecer CSS Redefine [ Quais são CSS Redefine? ], como eles às vezes reduzir ou eliminar as inconsistências visuais que ocorrem entre vários navegadores. Em palavras simples o Mecanismo Redefinir CSS define os estilos de Elemento HTML para valores zero ou nulo, portanto, substituindo os valores padrão do navegador podem coloca. Isso fornece uma ardósia limpa para definir as propriedades destes elementos vazio de quaisquer padrões User-Agent [ CSS2.1 User Agent Padrões de folha de estilo ]. Todos os quadros CSS têm de mecanismo de reset. Se você está escrevendo você próprio CSS Redefine, uma palavra de cautela é que, se acontecer de você se esqueça de repor uma propriedade de chave, ele pode levar a questões cross-browser, que são muito difíceis de depurar. Lembre-se, Mantenha uma cópia dos estilos de reset e deixá-los em cada novo projeto que você criar.
corpo, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pré formulário, fieldset, input, select, textarea,
p, blockquote, tabela, th, td
{
margem: 0px;
margin: 0;
padding: 0;
} Padrões definidos (Estilos de linha de base) para elementos:
Depois de ter definido (a zero ou nulo) os valores padrão de certos atributos de certos elementos de HTML, é necessário aplicar alguns estilos em todas as instâncias desses elementos. Estes configuração padrão pode variar de acordo com o projeto ou de acordo com as melhores práticas que você segue.
A maioria dos quadros CSS, sempre apresenta alguns novos padrões, além de redefinir estilos padrão do navegador.
Esses padrões estar vazio dos Padrões de User-Agent (arrancada pela redefinição CSS), estes irão ser consistente em todos os navegadores.
Lembre-se, estilos de referência são utilizados para definir estilos que vão ser usados projeto como um todo. por exemplo.
html {font-size: 77%; font-family: Arial, sans-serif;}
forte, H1, H2, H3, H4, H5, H6 {font-weight: bold;} Estilos comuns abstratos para componentes HTML e classes comuns:
A maior parte do projeto que consiste em várias páginas terá elementos HTML comuns utilizados em todo o site, por algum tipo de formas, por exemplo, alertas e erros, Popups personalizados, etc Lightboxes Como esses componentes são usados mais uma vez entre os projetos, ele vai ser útil para fornecer uma conjunto de classes associadas com estilos pré-definidos para estes componentes e você pode salvar um monte de tempo.
Além de definir definições reutilizáveis estilos para os componentes comuns em HTML, poderíamos classes abstratas estilos pertencentes a cor tipografia, ou mesmo layout. Eu mesmo tendem você usa ... as classes comuns, como Clearfix, Font08, FontGrey, AlignL, DisplayB etc
formulário de entrada {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
formulário textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em; line-height: 1.5em; overflow: visível;}
. Fbold {font-weight: bold; color: # cccccc;}
. Fgrey {color: # 666666;}
. Flightgrey {color: # bbbbbb;}
. Clearfix {clear: both;}
. Divisor {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; height: 0px;}
. Displayb {display: block;}. Displayn {display: none;}
. Alignr {text-align: right}. Alignc {text-align: center}
. Floatr {float: right;}. Floatl {float: left;} Correções para peculiaridades comuns do navegador
Vários navegadores implementar o código CSS e proporcionar variação do nível de suporte para as especificações de CSS. O resultado desta .... "Peculiaridades do Navegador", que nós, os desenvolvedores são deixados para enfrentar. Especialmente, IE6 assombra mais codificadores CSS com um prazo a cumprir. A boa notícia é experiência reuniu possíveis correções reutilizáveis para estas questões (muitas vezes denominado como CSS Hacks ).
Lembre-se, Mantenha estes hacks / correções à mão
/ * O zoom seguinte: 1 regra é especificamente para IE6 + IE7. * /
* Html. Clearfix,
*:. First-child + html {clearfix
zoom: 1;
} Mantenha refinar sua CSS
- O hábito de reciclagem não vai chegar até você em dia. Tem que desenvolvido. Portanto, planeje sua reciclagem. Tenha isto em mente que você poderia padrões abstratos, definições estilos de tipografia, Layouts, Estilos Elemento HTML etc Tente pensar no futuro.
- Também olhar para trás em seus projetos anteriores, vai ajudar a identificar estilos que tendem a usar muitas vezes através porjects. Resumo-lo.
- Remova todos os estilos não utilizados. Esta prática irá manter o seu quadro de CSS a partir de um sintoma comum chamado de "inchaço" -
- Remover estilos repetitivos.
- Construir um conjunto de estilos que são flexíveis o suficiente para transportá-lo através de projetos.
Um olhar sobre CSS Frameworks
Finalmente. Se você está inspirado e pretende usar um ou mais dos quadros CSS, Heres é rápida lista de alguns populares ....
- 960 Grid System : The Grid System 960 é um esforço para agilizar o fluxo de trabalho de desenvolvimento web, proporcionando dimensões comumente usados, com base em uma largura de 960 pixels. Existem três variantes: 12, 16 e 24 colunas, que podem ser utilizados separadamente ou em conjunto. Pensamento nada que você não pode criar um para o seu próprio com bastante facilidade, o quadro fornece modelos de grade para impressão em formato PDF, que pode-se usar a esboçar o seu designs.Bet página, faria uma impressão profissional, se você levar algumas folhas quando você vai a um cliente para levantamento de requisitos de interface do usuário. Ele também fornece modelos de grade básicas para design de software populares, como Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc fornecendo um "Starter for Ten" para começar o seu trabalho de design.
- Blueprint : Blueprint fornece arquivos distintamente classificados CSS para Redefine, Grades, formulários, impressão, tipografia, Plugins para botões, abas e sprites etc Ele também fornece suporte para IE como um separado incluir.
- SenCSs : Ao contrário dos dois acima, SenCSs (Sense pronunciado), não tem definições de CSS para layout. Ele inclui fontes, preenchimentos, margens, tabelas, listas, cabeçalhos, blockquotes, formulários e muito mais.
- BlueTrip : Seu pedido inicial para a fama era isso, era uma combinação dos melhores recursos fornecidos por outros frameworks outros como azul de viagem de impressão, oli ... de onde vem seu nome. Seu conjunto de recursos inclui 24-coluna de grade, estilos de tipografia, estilos ORM, impressão, botões, etc
- YUI Grids : Trazido a você pelo Developer Network Yahooo, suporta fluido largura (100%), bem como layouts pré-definidos de largura fixa layouts em 750px, 950px, 974px e, ea capacidade de personalizar facilmente para qualquer número. Como você pode ver, sua técnica apenas os componentes de layout. YUI também forneceu HTML / CSS conjuntos para outros elementos da página
- YAML (Yet layout Outra várias colunas)
- Emastic
Lembre-se, utilizando frameworks CSS não implica que você é preguiçoso para criar o seu próprio ... Isso implica que você é inteligente para aprender com outras experiências e erros, economizar tempo e aumentar a produtividade!!
