desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Developing web - xhtml, css, web standards, usability, accessibility, web design, SEO, blogs and technology to develop the web

Neste artigo, apresento uma proposta para um arquivo CSS mínimo, quer dizer, as declarações que, ao meu ver, são indispensáveis para uma folha de estilos. In this article, presenting a proposal for a minimum CSS file, that is, statements that, in my view, are essential to a style sheet.

O que me levou a escrever este artigo What prompted me to write this article

Nos últimos dias, tive alguns problemas com arquivos CSS que tive que alterar - e que não fui eu, originalmente, quem os fiz. In recent days, I had some problems with CSS files that had to change - and that I was not myself, originally, who did. Cada desenvolvedor web tem seu estilo de codificação, isso é fato; outro fato é que fica complicado de prestar manutenção no trabalho alheio, caso os desenvolvedores não tenham acordado padrões de codificação entre si. Each developer has their style of Web coding, this is fact, another fact is that it becomes difficult to provide maintenance work on the outside, if the developers have not agreed standards for tagging one another. Foi o meu caso… It was my case…

Neste artigo, não tentarei apresentar modelos de codificação CSS, sugestões de como se deve posicionar as chaves, e como deve ser a identação dos textos. In this article, not try to make models of CSS coding, suggestions of how to position the keys, and how it should be the identação of texts. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. I am focusing on the rules, themselves, and not on how each one prefers to organize your code. Para tal, o Bruno Dulcetti já tratou muito bem , em seu blog . To this end, the Bruno Dulcetti already handled very well in your blog.

Como não desejo que o mesmo aconteça com as outras pessoas, decidi apresentar como seria, na minha opinião e não muito extensos conhecimentos em CSS, algumas regras indispensáveis para qualquer folha de estilos. How not want the same happens with other people, decided to bring in as would, in my opinion, not very extensive knowledge of CSS, some rules essential for any style sheet.

Para constar, gostaria de deixar registrado que uma das bases do que vou apresentar aqui foi tirada da compilação 70 Expert Ideas For Better CSS Coding , do Smashing Magazine - e traduzida pelo Maujor , em seu blog ; outra, vem do meu próprio conhecimento e experiência com CSS. To appear, I would like to leave a recorded that the foundations of which I will present here was taken compilation of 70 Expert Ideas For Better CSS Coding, the Smashing Magazine - and translated by Maujor in your blog; another, comes from my own knowledge and experience with CSS.

Sem mais enrolações, vamos ao que interessa! Without more enrolações, to what we matter!

“Zerar” os elementos "Reset" the elements

Para começar, é mais do que importante zerar, no o seletor universal, margin e padding : To begin with, it is more important than clear, in the universal selector, margin and padding:

* { * (
margin:0; margin: 0;
padding:0; padding: 0;
} )


[update] [Update]
O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos . The Pedro Rogerio talked about a better way to reset the elements. Maneira essa que coloco aqui, também. Way to put that here, too.
[/update] [/ Update]

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font , img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; vertical-align : baseline ; background : transparent ; } body { line-height : 1 ; } ol, ul { list-style : none ; } blockquote, q { quotes : none ; } :focus { outline : 0 ; } ins { text-decoration : none ; } del { text-decoration : line-through ; } table { border-collapse : collapse ; border-spacing : 0 ; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, quote, code, del, dfn, in, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, I read, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; Body () line-height: 1;) ol, ul (list-style: none;) blockquote, q (quotes: none;): focus (outline: 0; ins) (text-decoration: none; del (text) - decoration: line-through;) table (border-collapse: collapse; border-spacing: 0;) 

Podem ter certeza de que somente isso evitará, pelo menos, uma dezena de problemas com posicionamento - Eric Meyer , Christian Montoya e Roger Johansson , por exemplo, recomendam tal prática. They can only make sure that avoid at least a dozen problems with positioning - Eric Meyer, Christian Montoya and Roger Johansson, for example, recommend this practice.

Um font-size “especial” para html A font-size "special" to html

O próximo - e, aparentemente, excêntrico - passo é colocar um valor “especial” para font-size , na estilização do html : The next - and apparently eccentric - step is to place a value "special" for font-size, the styling of html:

 html { font-size : 100 . 01 % ; } html (font-size: 100. 01%;) 

Essa veio, também, das 70 dicas , ea explicação é a seguinte: It came, too, from 70 tips, and the explanation is as follows:

Este estranho valor de 100.01% para o tamanho de fonte, corrige uma série de bugs em diversos navegadores. This strange value of 100.01% for the font size, corrects a number of bugs in various browsers. Primeiro, definir um tamanho de fonte no elemento body em percentagem (no lugar de EM) previne um problema no IE/Win que tende a aumentar ou diminuir desproporcionalmente o tamanho de fontes para textos contidos dentro de elementos onde for definido tamanho de fonte em EM. First, define a size of the source element body as a percentage (instead of MS) prevents a problem in IE / Win that tends to disproportionately increase or decrease the size of sources for text contained within elements where size is set to source in MS . E mais, algumas versões do Opera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. What's more, some versions of Opera renderizam default sizes from 100% to sources much smaller compared with other browsers. Safari, por sua vez não se comporta bem com font-size igual a 101%. Safari in turn does not behave well with font-size equal to 101%.

Retirar a borda feia das imagens que são link Remove the edge of the ugly images that are link

Quando se coloca uma imagem para servir de link , uma borda aparece para indicar isso. When you place an image to serve as a link, a border appears to indicate that. Entretanto, ela é muito feia e, na maioria das vezes, “quebra” toda a harmonia do design web que está sendo utilizado. However, it is very ugly and, in most cases, "breaking" the entire line of web design being used. Para resolver isso, basta zerar o border do elemento img : To address this, simply reset the border of the element img:

 img { border : 0 ; } (img border: 0;) 

O tal “CSS mínimo” The such "minimum CSS"

Então, o arquivo final - ou seria “inicial”? Then, the file end - or would be "original"? :-) - ficaria da seguinte maneira: :-) - Would be as follows:

* { * (
margin:0; margin: 0;
padding:0; padding: 0;
} )

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font , img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; vertical-align : baseline ; background : transparent ; } body { line-height : 1 ; } ol, ul { list-style : none ; } blockquote, q { quotes : none ; } :focus { outline : 0 ; } ins { text-decoration : none ; } del { text-decoration : line-through ; } table { border-collapse : collapse ; border-spacing : 0 ; } html { font-size : 100 . 01 % ; } img { border : 0 ; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, quote, code, del, dfn, in, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, I read, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; Body () line-height: 1;) ol, ul (list-style: none;) blockquote, q (quotes: none;): focus (outline: 0; ins) (text-decoration: none; del (text) - decoration: line-through;) table (border-collapse: collapse; border-spacing: 0; html) (font-size: 100. 01%;) (img border: 0;) 

Por fim… Finally…

Essas dicas que eu coloquei são meras “medidas de segurança”, a fim de se evitar problemas com estilizações. These tips that I raised are mere "security measures" in order to avoid problems with estilizações. Certamente outras mais existem, porque, a cada dia, uma nova técnica e/ou maneira de se codificar aparece - e/ou a própria tecnologia é aperfeiçoada. Certainly there are other more, because every day, a new technique and / or how to tag appears - and / or the technology itself is improved. Quem conhecer mais dicas, macetes e artimanhas para um CSS mínimo, por favor, coloque um comentário aqui ou me envie um email para eu possa atualizar o artigo. Who know more tips, and macetes Trick for a minimum CSS, please, put a comment here or send email to me I can update the article.

Ah! E confiram as 70 dicas de CSS , porque realmente são muito boas ! And give the 70 tips for CSS, because they really are very good!