Beginners CSS Best Practices Melhores Práticas de CSS para Iniciantes Mejores Prácticas de CSS para Principiantes

Here are some CSS best practices for those learning CSS. No one will start writing better CSS overnight, it takes practice and fine tuning. Every experience is unique and you should keep an open mind in order to try things until they feel right for you. Aqui estão algumas melhores práticas de CSS para quem está aprendendo CSS. Ninguém começa a escrever CSS melhor da noite para o dia, isso requer prática e ajuste fino. Cada experiência é única e você deve manter a mente aberta para tentar coisas até que elas pareçam certas para você. Aquí hay algunas mejores prácticas de CSS para quienes están aprendiendo CSS. Nadie comenzará a escribir mejor CSS de la noche a la mañana, se necesita práctica y ajuste fino. Cada experiencia es única y debe mantener la mente abierta para intentar cosas hasta que se sientan correctas para usted.

Don't be afraid to adopt tools to help you but also don't be too eager to jump into something just because everybody is doing so. There is an art level in understanding, writing, and organizing CSS. Whatever the rules you end up adopting, remain consistent. Não tenha medo de adotar ferramentas para ajudá-lo, mas também não seja apressado em entrar em algo só porque todo mundo está fazendo isso. Há um nível de arte em entender, escrever e organizar CSS. Seja quais forem as regras que você acabar adotando, mantenha a consistência. No tenga miedo de adoptar herramientas para ayudarlo, pero tampoco sea demasiado ansioso en adoptar algo solo porque todos lo están haciendo. Hay un nivel de arte en entender, escribir y organizar CSS. Cualesquiera que sean las reglas que adopte, mantenga la consistencia.

• Plan you CSS Planeje seu CSS Planifique su CSS

  Before writing your CSS, plan your page layout and plan how you are going to use your CSS. What general styles are going to be needed, what different layouts do you need to create, what specific overrides need to be created, and are they reusable? Above all, you need to try to avoid too much overriding. If you keep finding yourself writing styles and then canceling them again a few rules down, you probably need to rethink your strategy. Antes de escrever seu CSS, planeje o layout da sua página e planeje como você vai usar seu CSS. Quais estilos gerais serão necessários, quais layouts diferentes você precisa criar, quais substituições específicas precisam ser criadas e elas são reutilizáveis? Acima de tudo, você precisa tentar evitar substituições em excesso. Se você continuar encontrando-se escrevendo estilos e depois cancelando-os algumas regras adiante, provavelmente precisa repensar sua estratégia. Antes de escribir su CSS, planifique el diseño de su página y planifique cómo va a usar su CSS. ¿Qué estilos generales se necesitarán, qué diseños diferentes necesita crear, qué anulaciones específicas deben crearse y son reutilizables? Sobre todo, debe intentar evitar demasiadas anulaciones. Si continúa encontrándose escribiendo estilos y luego cancelándolos algunas reglas más adelante, probablemente necesite repensar su estrategia.

• Use flexible/relative units Use unidades flexíveis/relativas Use unidades flexibles/relativas

  For maximum flexibility over the widest possible range of devices, it is a good idea to size containers, padding, etc. using relative units like ems and rems or percentages and viewport units if you want them to vary depending on viewport width. Para máxima flexibilidade em uma ampla gama de dispositivos, é uma boa ideia dimensionar contêineres, padding, etc. usando unidades relativas como ems e rems ou porcentagens e unidades de viewport se você quiser que elas variem dependendo da largura da viewport. Para máxima flexibilidad en la más amplia gama posible de dispositivos, es buena idea dimensionar contenedores, padding, etc. usando unidades relativas como ems y rems o porcentajes y unidades de viewport si desea que varíen dependiendo del ancho del viewport.

• Don't use a preprocessor Não use um pré-processador No use un preprocesador

  Don't use preprocessor syntax, such as Sass, Less, or Stylus. These just add a layer of complexity that most sites do not need. Não use sintaxe de pré-processador, como Sass, Less ou Stylus. Eles apenas adicionam uma camada de complexidade que a maioria dos sites não precisa. No use sintaxis de preprocesador, como Sass, Less o Stylus. Estos solo agregan una capa de complejidad que la mayoría de los sitios no necesitan.

• Don't use resets Não use resets No use resets

  For maximum control over CSS across platforms, a lot of people used to use CSS resets to remove every style, before they building the CSS themselves. This certainly has its merits, but especially in the modern world, CSS resets can be an overkill, resulting in a lot of extra time spent re-implementing things that weren't completely broken in the first place, like default margins, list styles, etc. Para máximo controle sobre CSS em diferentes plataformas, muitas pessoas costumavam usar CSS resets para remover todos os estilos, antes de construírem o CSS eles mesmos. Isso certamente tem seus méritos, mas especialmente no mundo moderno, CSS resets podem ser excessivos, resultando em muito tempo extra gasto reimplementando coisas que não estavam completamente quebradas no começo, como margens padrão, estilos de lista, etc. Para máximo control sobre CSS en diferentes plataformas, muchas personas solían usar CSS resets para eliminar todos los estilos, antes de construir el CSS ellos mismos. Esto ciertamente tiene sus méritos, pero especialmente en el mundo moderno, los CSS resets pueden ser excesivos, resultando en mucho tiempo extra gastado reimplementando cosas que no estaban completamente rotas en primer lugar, como márgenes predeterminados, estilos de lista, etc.

• CSS comments Comentários CSS Comentarios CSS

  Use CSS-style comments to comment code that isn't self-documenting. Also note that you should leave a space between the asterisks and the comment for readability only. Use comentários no estilo CSS para comentar código que não é autoexplicativo. Note também que você deve deixar um espaço entre os asteriscos e o comentário apenas para legibilidade. Use comentarios de estilo CSS para comentar código que no es autoexplicativo. También tenga en cuenta que debe dejar un espacio entre los asteriscos y el comentario solo para legibilidad.

   /* This is a CSS-style comment */

   /* Este é um comentário no estilo CSS. */

   /* Este es un comentario de estilo CSS. */

  Put your comments on separate lines preceding the code they are referring to, like so: Coloque seus comentários em linhas separadas antes do código ao qual eles se referem, assim: Coloque sus comentarios en líneas separadas antes del código al que se refieren, así:

  					h3 {
  
  								       /* Creates a red drop shadow, offset 1px right and down, with a 2px blur radius */ 
  
  								   text-shadow: 1px 1px 2px red;
  
  								   /* Sets the font-size to double the default document font size */
  
  								   font-size: 2rem;
  
  								}
  
  					
  				

  					h3 {
  
  								       /* Cria uma sombra vermelha projetada, deslocada 1px para a direita e para baixo, com um raio de desfoque de 2px. */ 
  
  								   text-shadow: 1px 1px 2px red;
  
  								   /* Define o tamanho da fonte para o dobro do tamanho da fonte padrão do documento. */
  
  								   font-size: 2rem;
  
  								}
  
  					
  				

  					h3 {
  
  								       /* Crea una sombra roja, desplazada 1px a la derecha y hacia abajo, con un radio de desenfoque de 2px */ 
  
  								   text-shadow: 1px 1px 2px red;
  
  								   /* Establece el tamaño de fuente al doble del tamaño de fuente predeterminado del documento */
  
  								   font-size: 2rem;
  
  								}
  
  					
  				

• Double quotes around values Aspas duplas em torno de valores Comillas dobles alrededor de valores

  Where quotes can or should be included, use them, and use double quotes. For example: Onde aspas podem ou devem ser incluídas, use-as e use aspas duplas. Por exemplo: Donde las comillas pueden o deben incluirse, úselas y use comillas dobles. Por ejemplo:

  					[data-vegetable="liquid"] {
  
  								   background-color: goldenrod;
  
  								   background-image: url("../../media/examples/lizard.png");
  
  								}
  
  					
  				

• Longhand vs. shorthand rules Regras longas vs. abreviadas Reglas largas vs. abreviadas

  Sometimes you want to specify the padding-top or border-right but from experience, you will often come back to these to add more so adopt the habit to always use the shorthand to make it easier to change without specifying many properties. It is easier to change and it is less code. Às vezes você quer especificar o padding-top ou border-right, mas pela experiência, você frequentemente voltará a eles para adicionar mais, então adote o hábito de sempre usar a forma abreviada para facilitar a alteração sem especificar muitas propriedades. É mais fácil de mudar e há menos código. A veces desea especificar el padding-top o border-right, pero por experiencia, frecuentemente volverá a estos para agregar más, así que adopte el hábito de siempre usar la forma abreviada para facilitar el cambio sin especificar muchas propiedades. Es más fácil de cambiar y hay menos código.

  These values go in this order: top right bottom left. Esses valores vão nesta ordem: topo direita baixo esquerda. Estos valores van en este orden: arriba derecha abajo izquierda.

   padding: 1em 2em 1em 2em;

• Selectors Seletores Selectores

  When a rule has multiple selectors, put each selector on a new line. This makes the selector list easier to read and can help to make code lines shorter. Quando uma regra tem vários seletores, coloque cada seletor em uma nova linha. Isso torna a lista de seletores mais fácil de ler e pode ajudar a tornar as linhas de código mais curtas. Cuando una regla tiene múltiples selectores, coloque cada selector en una nueva línea. Esto hace que la lista de selectores sea más fácil de leer y puede ayudar a acortar las líneas de código.

  Don't use ID selectors because they are: Não use seletores de ID porque eles são: No use selectores de ID porque son:

  • less flexible; you can't add more to the id attribute if you discover you need more than one. menos flexíveis; você não pode adicionar mais ao atributo id se descobrir que precisa de mais de um. menos flexibles; no puede agregar más al atributo id si descubre que necesita más de uno.
  • harder to override because they have higher specificity than classes. mais difíceis de substituir porque têm maior especificidade do que as classes. más difíciles de anular porque tienen mayor especificidad que las clases.

• Write CSS consistently Escreva CSS de forma consistente Escriba CSS de forma consistente

  Consistency is key. Even if you are doing everything wrong, remain consistent as it will be easier to fix them later. Find a naming convention that works for you, adopt a CSS methodology, organize styles the same way, define how many levels you nest selectors, etc. Define your style and stick to it and improve it over time. Consistência é fundamental. Mesmo que você esteja fazendo tudo errado, mantenha a consistência, pois será mais fácil corrigi-los mais tarde. Encontre uma convenção de nomenclatura que funcione para você, adote uma metodologia CSS, organize os estilos da mesma forma, defina quantos níveis você aninha seletores, etc. Defina seu estilo e mantenha-o e melhore-o ao longo do tempo. La consistencia es clave. Incluso si está haciendo todo mal, mantenga la consistencia, ya que será más fácil corregirlos más tarde. Encuentre una convención de nomenclatura que funcione para usted, adopte una metodología CSS, organice los estilos de la misma manera, defina cuántos niveles anida los selectores, etc. Defina su estilo, manténgalo y mejórelo con el tiempo.

• Avoid too many font files Evite muitos arquivos de fonte Evite demasiados archivos de fuente

  Maybe the designers handed you too many font files which is a red flag. A website with too many fonts can be chaotic and confusing so, always make sure you are including the fonts you will need for the page. Fonts can take time to load and be applied and when you have too many fonts your UI normally jumps into place after the fonts are loaded. Talvez os designers tenham lhe entregado muitos arquivos de fonte, o que é um sinal de alerta. Um site com muitas fontes pode ser caótico e confuso, então sempre certifique-se de incluir as fontes que você precisará para a página. As fontes podem levar tempo para carregar e serem aplicadas e quando você tem muitas fontes, sua UI normalmente salta para o lugar depois que as fontes são carregadas. Quizás los diseñadores le entregaron demasiados archivos de fuente, lo cual es una señal de alerta. Un sitio web con demasiadas fuentes puede ser caótico y confuso, así que siempre asegúrese de incluir las fuentes que necesitará para la página. Las fuentes pueden tardar en cargarse y aplicarse, y cuando tiene demasiadas fuentes, su UI normalmente se coloca en su lugar después de que las fuentes se cargan.

  Always try to keep your fonts to just 2 font names. Sempre tente manter suas fontes em apenas 2 nomes de fonte. Siempre intente mantener sus fuentes en solo 2 nombres de fuente.

• Use CSS variables Use variáveis CSS Use variables CSS

  The #1 reason to use a pre-processor in the past was the variables. CSS variables are way better because they stick around when loaded in the browser. The support is good and it allows you to create a more flexible and reusable UI, without mentioning it helps you create a more powerful design system and features. A razão número 1 para usar um pré-processador no passado eram as variáveis. As variáveis CSS são muito melhores porque persistem quando carregadas no navegador. O suporte é bom e permite criar uma UI mais flexível e reutilizável, sem mencionar que ajuda a criar um sistema de design e recursos mais poderosos. La razón número 1 para usar un preprocesador en el pasado eran las variables. Las variables CSS son mucho mejores porque permanecen cuando se cargan en el navegador. El soporte es bueno y permite crear una UI más flexible y reutilizable, sin mencionar que ayuda a crear un sistema de diseño y características más poderosos.

• Format Text with CSS Formate texto com CSS Formatee texto con CSS

  CSS can format your HTML text. No need to manually write all caps, all lower or capitalized words in your HTML. Changing a CSS property value is way faster to change than going around changing all the text in HTML, and it is also better for internationalization as it allows you to write the text as you want and manipulates how it looks with CSS. O CSS pode formatar seu texto HTML. Não é necessário escrever manualmente tudo em maiúsculas, minúsculas ou palavras capitalizadas no seu HTML. Alterar um valor de propriedade CSS é muito mais rápido do que ir mudando todo o texto no HTML, e também é melhor para internacionalização, pois permite escrever o texto como você quer e manipular como ele parece com CSS. CSS puede formatear su texto HTML. No es necesario escribir manualmente todo en mayúsculas, minúsculas o palabras capitalizadas en su HTML. Cambiar un valor de propiedad CSS es mucho más rápido que ir cambiando todo el texto en HTML, y también es mejor para la internacionalización, ya que permite escribir el texto como desee y manipular cómo se ve con CSS.

• Let the content define the size Deixe o conteúdo definir o tamanho Deje que el contenido defina el tamaño

  Instead of setting the width and height of a button, for example, consider setting some padding for spacing and including a max-width instead and max-height instead unless the design calls for a strict size. Em vez de definir a largura e a altura de um botão, por exemplo, considere definir algum padding para espaçamento e incluir um max-width e max-height em vez disso, a menos que o design exija um tamanho estrito. En vez de establecer el ancho y la altura de un botón, por ejemplo, considere establecer algo de padding para el espaciado e incluir un max-width y max-height en su lugar, a menos que el diseño requiera un tamaño estricto.

• Avoid color names Evite nomes de cores Evite nombres de colores

  Prefer to specify your color values with hex and color functions instead of saying red, purple, or cyan. There are millions of hex color values and no name for all of them. For consistency's sake, find one way to add colors and stick to it. Prefira especificar seus valores de cor com hex e funções de cor em vez de dizer red, purple ou cyan. Existem milhões de valores de cor hex e não há nome para todos eles. Por consistência, encontre uma forma de adicionar cores e mantenha-a. Prefiera especificar sus valores de color con hex y funciones de color en lugar de decir red, purple o cyan. Hay millones de valores de color hex y no hay nombre para todos ellos. Por consistencia, encuentre una forma de agregar colores y manténgala.

• Try to organize CSS to match the Markup Order Tente organizar o CSS para corresponder à ordem do Markup Intente organizar CSS para que coincida con el orden del Markup

  It sure makes for an easier way to understand your markup just by looking at your CSS. It is something I do and saves me a lot of time. Certamente torna mais fácil entender seu markup apenas olhando para seu CSS. É algo que eu faço e me economiza muito tempo. Ciertamente hace que sea más fácil entender su markup solo mirando su CSS. Es algo que hago y me ahorra mucho tiempo.

• Keep HTML semantics and use CSS for styling Mantenha a semântica HTML e use CSS para estilização Mantenga la semántica HTML y use CSS para estilización

  It is common to find developers who go around changing their HTML in order to apply a certain style. In general, let the styling to CSS and let your HTML structured in a way that makes sense semantically. There are exceptions to this rule but always ensure that the adopted structure does not go against any HTML semantic rules. Write your HTML first with content in mind, not styling. Then add CSS and try your best before changing your HTML for styling reasons. É comum encontrar desenvolvedores que ficam alterando seu HTML para aplicar um determinado estilo. Em geral, deixe a estilização para o CSS e deixe seu HTML estruturado de uma forma que faça sentido semanticamente. Há exceções a esta regra, mas sempre garanta que a estrutura adotada não vá contra nenhuma regra semântica HTML. Escreva seu HTML primeiro com o conteúdo em mente, não a estilização. Depois adicione CSS e tente ao máximo antes de mudar seu HTML por razões de estilização. Es común encontrar desarrolladores que van cambiando su HTML para aplicar un determinado estilo. En general, deje la estilización al CSS y deje su HTML estructurado de una manera que tenga sentido semánticamente. Hay excepciones a esta regla, pero siempre asegúrese de que la estructura adoptada no vaya en contra de ninguna regla semántica HTML. Escriba su HTML primero con el contenido en mente, no la estilización. Luego agregue CSS y haga su mejor esfuerzo antes de cambiar su HTML por razones de estilización.

• Hyphens or underscore? Hifens ou sublinhado? ¿Guiones o guión bajo?

  The most common separator for class and id names is a hyphen but whatever you pick, stick to it. Hyphen is easier to read and troubleshoot than an underscore. O separador mais comum para nomes de classe e id é um hífen, mas seja qual for o que você escolher, mantenha-o. O hífen é mais fácil de ler e depurar do que um sublinhado. El separador más común para nombres de clase e id es un guión, pero cualquiera que elija, manténgalo. El guión es más fácil de leer y depurar que un guión bajo.

• Remove Unused CSS Remova CSS não utilizado Elimine CSS no utilizado

  For the same reason, you should ship the only CSS you will use, consider using tools like PurgeCSS to remove CSS that will not be needed in rendering. These tools will look at your CSS and HTML to determine which styles you will need. If you are not sure you need this, consider using browser tools that look for your code coverage which will tell you whether you are shipping unused style or not. Pelo mesmo motivo, você deve enviar apenas o CSS que usará. Considere usar ferramentas como PurgeCSS para remover CSS que não será necessário na renderização. Essas ferramentas analisarão seu CSS e HTML para determinar quais estilos você precisará. Se não tiver certeza se precisa disso, considere usar ferramentas do navegador que verificam a cobertura do seu código e lhe dirão se está enviando estilos não utilizados ou não. Por la misma razón, debe enviar solo el CSS que usará. Considere usar herramientas como PurgeCSS para eliminar CSS que no será necesario en la renderización. Estas herramientas analizarán su CSS y HTML para determinar qué estilos necesitará. Si no está seguro de necesitar esto, considere usar herramientas del navegador que buscan la cobertura de su código y le dirán si está enviando estilos no utilizados o no.