O que é CSS?

#ChallengeCommunitWeek

Bem, eu comecei na programação a um certo tempo, mais especificamente a 3 anos com um curso técnico integrado ao ensino médio. Atualmente com 17 anos eu trilhei um caminho incrível passando por diversas tecnologias, porém à que eu mais fiquei preso foi de longe o CSS.

O CSS (Cascading Style Sheets) é a ferramenta utilizado por desenvolvedores FrontEnd e que lhes permite adicionar estilo à sua documentação web, e existem coisas muito importantes a serem lembradas ao começar.

Cascata (Cascading)

Como o próprio nome diz, o CSS segue uma ordem, a ordem cascata onde seu estilo é lido de cima para baixo.

Porém, quando á mais de uma estilização para o mesmo elemento o browser leva em conta 3 fatores para a escolha de qual estilização será utilizada, são eles:

1. Origem do estilo;
2. Especificidade;
3. Importância.

ORIGEM DO ESTILO: inline > css interno > css externo

ESPEFICIDADE: Calculo matemático, onde cada seletor de estilo tem valores a serem considerados:

• 0 - Seletor Universal, combinadores, pseudo-class (:not()) e etc;
• 1 - Seletores de elemento e pseudo-elements (::before, ::after)
• 10 - Classes e seletores de atributo ([type="radio"])
• 100 - Seletor ID
• 1000 - CSS Inline

IMPORTÂNCIA: O !important é totalmente desaconselhável e talvez um dos únicos usos que seja aceitável utiliza-lo é caso você precise substituir um estilo que não pode ser substituído de nenhuma outra maneira. Isso pode acontecer se você estiver trabalhando em um sistema de gerenciamento de conteúdo (CMS) e não puder editar o código CSS. Em seguida, você pode definir alguns estilos personalizados para substituir alguns dos estilos do CMS.

Exemplos da utilização !important:

p {
background-color: red !important;
}

À Sintaxe:

Quando você começa no CSS uma coisa muito importante à ser lembrada é a Sintaxe, que é bem simples.

Seletor: O seletor nada mais é do que um padrão que o Browser utiliza para saber qual ou quais elementos devem ser estilizados a partir daquele código. Os seletores podem ser: ID, Class, tags ou até mesmo seletores universais.

Propriedade: As propriedades são características (como a cor do fundo mostrado) cujo valor define o aspecto de como o navegador deve exibir o elemento. E essas propriedades podem ser encontradas aqui: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Reference;

Valor: O valor está atrelado sempre propriedade, ou seja, cada propriedade pode receber um valor especifico, o caso mostrado no exemplo pode receber, tanto o nome da cor, como a cor em RGB, RGBA e até mesmo a cor em hexadecimal.

Comentários

Os comentários são EXTREMAMENTE importantes e é onde muitas pessoas pecam esquecendo de comentar o código. Os comentários detalham seu código e trazem um entendimento melhor, já que outras pessoas podem olhar seu código e entender ele totalmente, mesmo sem entender nada de código. Dentro dos comentários é possível colocar textos explicativos ou até mesmo partes do seu código, que ao serem comentada param de funcionar.

Considerações

Eu preferi não colocar muito sobre o CSS porque eu pretendo fazer alguns resumos a cerca não só do CSS, mas de todas as tecnologias que me acompanharam durante minha jornada até hoje como, HTML, Javascript, ReactJS, ReactNative e NodeJS. Porém, esses são pontos cruciais e é sempre preciso lembrar ao começar.

Victor Lira - 28/06/2022;

#ChallengeCommunityWeek

FONTS: https://www.w3schools.com/css/

https://developer.mozilla.org/pt-BR/docs/Web/CSS

https://www.rocketseat.com.br/