Forem: Ana Luisa Santos

Diário de bordo #9

Ana Luisa Santos — Thu, 02 Feb 2023 17:03:23 +0000

Operadores de Sufixo e Prefixo em JavaScript

A maiória dos operadores das linguagens de programação são muito importantes para a utilização no dia a dia de um desenvolvedor, mas alguns deles podem causar um pouco de confusão ao realizar uma explicação de como eles funcionam por de baixo dos panos, ou até mesmo entender realmente como eles agem. Então neste post eu irei trazer um breve resumo do que é e qual a diferença entre os Operadores de Sufixo e Prefixo no JavaScript

O que são os Operadores Sufixo e Prefixo?

Estes operadores são extremamente uteis para quando queremos incrementar(adicionar) ou decrementar(remover) um determinado valor númerico.

Uma das formas que já foram vistas para quem estuda ou já estudou alguma linguagem de programação pela primeira vez é a partir do exemplo abaixo:

let x = 10
x = x + 1

A variável x está sendo re-atribuida ao seu valor atual e sofrendo uma incrementaçõ através do operador + 1. Sabendo disso, existe uma outra forma mais simples de se realizar o mesmo procedimento atual, que é utilizando os operadores Prefixo e Sufixo:

Operador Prefixo

// Operador Prefixo ++<variável>
let x = 10
let y = 0
y = ++x
console.log( y ) // Retorna 11

A principio ele realmente atribui o valor de X para Y somado +1, mas o que ele faz de baixo dos panos é literalmente fazer essa re-atribuição o valor de x que é 10, adicionando +1, atualizando o seu valor de 10 para 11 e re-atribuindo o valor de y com o valor atualizado de x. Veja o exemplo do que literalmente acontece sem ser visto:

let x = 10
let y = 0
x = x + 1
y = x
//y = ++x (Operador Prefixo)
console.log( x ) // Retorna 11
console.log( y ) // Retorna 11

PS: Basicamente ele re-atribui e incrementa antes da variável y receber o valor 'real' de x que é 10, fazendo-o receber um novo valor.

Operador Sufixo

Também faz a atribuição da mesma forma, trazendo o valor da variável e aumentando o seu valor para +1. Só que com uma pequena diferença, atribuindo e incrementando o valor depois, veja o exemplo abaixo:

// Operador de Sufixo <variável>++
let a = 24
let b = 0
b = a
a = a + 1
// b = a++ (Operador Sufixo)
console.log( a ) // Retorna 25
console.log( b ) // Retorna 24

PS: Esse operador faz o contrário do Prefixo, atribuindo a variável b ao valor da a e logo em seguida incrementando +1, fazendo com que a tenha o valor elevado à +1 e b tendo o valor antigo, que é 24.

Diário de Bordo #8

Ana Luisa Santos — Wed, 01 Feb 2023 15:17:02 +0000

OBS: Estive um pouco sumida esses dias por conta dos estudos que estava realizando, pretendo ser mais ativa de agora em diante em meus relatórios no diário de bordo.

Estou fazendo um curso na Rocketseat pela trilha Explorer e estou aprendendo muita coisa em JavaScript, alguma delas eu irei comentar no diário de hoje, e com o avançar, irei trazer nos demais diários dos próximos dias.

Manipulação de Arrays

Com o avançar dos meus estudos, eu aprendi alguns métodos novos em JavaScript que são muito importantes para realizar a manipulação de dados de uma Array. E outros eu só realizei a revisão, logo abaixo será listado cada um deles com uma breve explicação.

Push()

Adiciona um novo item/dado ao fim do Vetor.

Retorno no console:

unshift() - NEW!

Adiciona um novo item ao início do Vetor.

Retorno no console:

Pop()

Remove um item no final do Vetor.

Retorno no console:

shift() - NEW!

Remove um item no início do Vetor.

Retorno no console:

slice() - NEW!

Retorna uma cópia de parte de um array a partir de um subarray criado entre as posições início e fim. Ele irá aceitar dois argumentos, onde o primeiro argumento será a posição de início do elemento a ser retirado e o segundo, é a posição final do Array solicitado. Basicamente ele é um método que retorna os elementos selecionados de um Vetor, com um novo Vetor. Esse método não faz modificações do Vetor, e sim retorna o que foi solicitado.

Retorno no console:

splice() - NEW!

Remove um ou mais itens de qualquer posição do Vetor. Ele também aceita dois argumentos, onde o primeiro é a posição do elemento a ser removido, e o segundo, é a quantidade de elementos a serem removidos.

Retorno no console:

indexOf()

Encontra a posição de um elemento.

Retorno no console:

Diário de bordo #7

Ana Luisa Santos — Wed, 25 Jan 2023 12:56:35 +0000

Arrow Functions

Com as atualizações do ES6 do ECMAScript em 2015, nos foram trazidas várias novas funcionalidades interessantes, e uma das que mais se destacaram e que eu as vejo serem bastante utilizadas, foram as Arrow Functions. Que são uma forma mais simples, poderoza e bastante eficiente de utilizar funções em JavaScript.

Sintaxe

Uma função na qual formos apresentados convêncionalmente quando aprendemos javaScript tem esse escopo function nomeDaFuncao(){}, já as Arrow functions são definidas a partir deste escopo () => {}, onde o => faz referência flecha, fazendo jus ao nome dado a esse tipo de função.

Para que serve?

As Arrow Functions são uma forma mais elegante e atualizada de declarar funções em JavaScript, como foi mencionado nos primeiros paragrafos do artigo. Elas nos traz várias possibildades que podem melhorar a legibilidade e usabilidade do nosso código, tais dessas possibilidades são: Refatoração de código, código enxuto e limpo (clean code), além de nos ajudar nas desestruturações.

Veja um exemplo de código refatorado utilizando esse recurso do JavaScript

function saveDay() { // Código Antigo utilizando uma maneira "antiga" de declarar funções em JavaScript
  localStorage.setItem("CompletedDays@habits", JSON.stringify(nlwSetup.data))
}

Agora veja o mesmo código, só que refatorado

const saveDay = () => localStorage.setItem("CompletedDays@habits", JSON.stringify(nlwSetup.data))

Diário de bordo #6

Ana Luisa Santos — Tue, 17 Jan 2023 15:52:05 +0000

classList

É uma propriedade do JavaScript que funciona como uma alternativa para acessar a lista de classes CSS de um elemento.

Sintaxe

 const html = document.documentElement

 html.classList.toggle('bg-black')

Neste exemplo de sintaxe que estou utilizando funciona da seguinte forma:

A declaração da varíavel HTML recebe o retorno do elemento de um documento
Faço a chamada dessa váriavel atribuindo a ela a propriedade classList que irá ser responsável por realizar a leitura da classe CSS bg-black e o toggle que é usado para alternar entre o estado do nosso elemento HTML, inserindo nossa classe CSS como parâmetro e fazendo essa mudança em nosso documento HTML.

Observação: A classList é uma propriedade read-only, ou seja, ela apenas faz a leitura das classes CSS. Mas ela tem compatibilidade com os metodos abaixo na qual você consegue adicionar, remover ou alterar essas classes CSS:

add();
// Adiciona um ou mais tokens à lista
contains();
// Retorna verdadeiro se a lista contiver uma classe
remove();
// Remove um ou mais tokens da lista
length();
// Retorna o número de tokens na lista
replace();
// Substitui um token na lista
toggle();
// Alterna entre tokens na lista
value;
// Retorna a lista de tokens como uma string
values();
// Retorna um Iterator com os valores da lista
forEach();
// Executa uma função de retorno de chamada para cada token na lista
entries();
// Retorna um Iterator com pares chave/valor da lista
supports();
// Retorna verdadeiro se um token for um dos tokens suportados por um atributo
keys();
// Retorna um Iterator com as chaves da lista
item();
// Retorna o token em um índice especificado

Diário de bordo #5

Ana Luisa Santos — Mon, 16 Jan 2023 21:09:45 +0000

Minha última atualização foi no dia 11, desde lá eu passei alguns dias aprendendo algumas coisas novas e estou fazendo a revisão destes conteúdos a partir de hoje. Logo, o que irei abordar hoje é uma propriedade do JavaScript chamada setAttribute().

SetAttribute();

Trabalha para adicionar ou atualiza os valores de um atributo existente em um elemento especifico.

Sintaxe

A sintaxe do setAttribute() funciona da seguinte forma:

element.setAttribute(name, value), sendo o element o elemento HTML na qual deseja fazer alterações, name o nome do atributo deste elemento e value o valor a ser inserido/alterado. Veja o funcionamento na prática

let linkedinLink = document.getElementById('link');

linkedinLink.setAttribute('href', 'https://www.linkedin.com/in/ana-luisa-/');

O funcionamento destas duas linhas de código neste exemplo funciona da seguinte forma: Dentro do JavaScript eu faço uma chamada ao elemento na qual quero obter o valor, e em seguida eu realizo a chamada dela setando-a junto com o elemento setAttribute(), trazendo como primeiro parametro o atributo na qual quero realizar as alterações, que no caso é o href do elemento <a></a> do HTML, e em seguida o valor que quero passar, que neste caso foi a URL do perfil do meu linkedIn.

Valendo a pena ressaltar que: Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe, então o atributo é criado.

Diário de bordo #4

Ana Luisa Santos — Wed, 11 Jan 2023 13:19:51 +0000

Spreat Operator

Trazendo uma definição mais objetiva e simples de para que serve o Spreat Operator, é imaginando um cenário na qual você, desenvolvedor precisa reaproveitar os dados de um Vetor ou uma Função em outras partes de seu código, que porventura poderia ser feito de uma maneira 'menos eficiente', extendendo para mais linhas de código o que poderia ter sido feita em uma, por exemplo. E basicamente é isso que o Spreat Operator faz, ele serve para que você consiga copiar os dados de um Objeto ou Array e realizar uma espécie de concatenação destas informações em outros lugares do seu código, como por exemplo dentro de outros Objetos, Arrays ou Funções, através do ...nomeDoObjeto ou ...nomeDoArray, na qual o ... serve para indicar que todos os dados dentro deste objeto/array serão copiados e inseridos em um outro lugar, acompanhado de mais outros tipos de informações com base na necessidade de cada programa. Veja um exemplo prático abaixo:

const dataUser = [
    'Ana Luisa', 'Desenvolvedora Front-End', 20, 2002
]; 

const newDataUser = [...dataUser, 'Geek', 'Mãe de pet']; 

console.log(newDataUser); 

/* Resultado da impressão do console.log()
[
    'Ana Luisa',
    'Desenvolvedora Front-End',
    20,
    2002,
    'Geek',
    'Mãe de pet'
  ]*/

O que foi feito no bloco de código acima foi a criação de uma variável chamada dataUser que recebe um vetor na qual contém os dados de um usuário.

Caso quisermos criar uma nova variável que receba um Vetor com informações diferentes e quisermos realizar uma especie de concatenação destes dados utilizamos o ... do Spreat Operator que tem a função de coletar todos os dados de um Objeto ou Vetor e adicionar onde for cabivel para você. Como estou trazendo o newDataUser como exemplo, o que fiz foi exatamente como feito nesta explicação, trazer todos os dados do vetor dataUser, adiciona-los dentro do newDataUser e inserir novos valores.

Além disso, podemos utilizar o spreat operator para funções, veja o exemplo abaixo:

function sum(a, b, c) {
    return a + b + c
};

const numbers = [15, 20, 45];

console.log(sum(...numbers)); // retorna o resultado da soma: 80

Rest Operator

Como o próprio nome sugere, o Rest Operator é utilizado para quando temos a necessidade de fazer uma recuperação do resto dos dados de um array ou objetos.
Veja um exemplo prático abaixo:

const person = ['Ana Luisa', 2002, 'Desenvolvedora Front-End', '1.64m'];

const [name, yearBirth, ...personData] = person;

console.log(name); // Ana Luisa

console.log(yearBirth); // 2002

console.log(personData); // ['Desenvolvedora Front-End' , '1.64m']

Cada identificador dado na segunda linha de código tem que ser relacionados a ordem de cada posição dos itens do nosso vetor person, onde a posição[0], recebe o name como variável para identificar essa informação, e assim sucessivamente, já o ...personData irá trazer todo o resto dos dados que faltavam ser informados.

Veja outro exemplo utilizando objetos:

const employee = {
    firstName: 'Ana',
    lastName: 'Luisa',
    city: 'Salvador',
    country: 'Brazil',
    age: 20
};

const {firstName, lastName, ...theRest} = employee;

console.log(firstName); // Retorna 'Ana'

console.log(lastName); // Retorna 'Luisa'

console.log(theRest); // Retorna { city: 'Salvador', country: 'Brazil', age: 20 }

Diário de bordo #3

Ana Luisa Santos — Mon, 09 Jan 2023 20:15:47 +0000

A partir do dia 5 de janeiro eu aprendi um tópico novo em JavaScript relacionado a introdução de tratamento de erros utilizando try catch e finally, e é sobre este assunto que será focado o diário de hoje.

Acredito que uma das habilidades essênciais para qualquer software é realizar o tratamento de erros, sejam eles erros de sintaxe, alguma informação digitada incorretamente pelo usuário em algum lugar do sistema ou até mesmo erro em tempo de execução.

Sintaxe Try Catch e Finally

A sintaxe do Try Catch é relativamente simples de aprender, ela é dívidida em dois blocos de código, onde o Try é responsável por executar o código caso ocorra algum problema dentro dos comandos digitados, o Catch recebe via parametro uma função do tipo Error e o Finnaly irá executar sempre o código escrito nele independente de erros.

try {
    //sua linha de código onde é informado o processo onde possívelmente ocorra algum erro
} catch(error) {
  // sua linha de código onde é responsável pelo tratamento de erro trazido pelo try
} finnaly {
   // sua linha de código onde será executado o comando independente de erros
}

Além disso é possível referênciar o Objeto Error das seguintes formas:

TypeError: Onde o argumento passado para a função é de um tipo diferente da esperada.

ReferenceError: Passado quando uma variável ou função é inválida ou inexistente.

SyntaxError: Como o próprio nome diz, ela é passada quando ocorre um erro de sintaxe na interpretação do código.

RangeError: É lançado quando um valor é passado como argumento em uma função que não está em conjunto com os valores permitidos.

URIError: Ocorre quando há algum erro no tratamento da URI.

Diário de bordo #2

Ana Luisa Santos — Sat, 07 Jan 2023 11:31:12 +0000

Olá a todos, como uma atualização do que eu estou aprendendo eu trouxe algumas funções do JavaScript que achei bacana a utilização e gostaria de compartilhar o que eu aprendi sobre elas e as suas diferenças.

Temporização

Como o próprio nome diz, eles servem para setar um determinado tempo para que uma determinada ação ocorra, ou a repetição desta ação(veremos isso logo abaixo).

setTimeout()

Em resumo ela serve para definir a quantidade de tempo de espera para que uma determinada ação aconteça, veja o exemplo de código abaixo.

function executeMessage() {
  document.write('Executando a mensagem...');
};

setTimeout(executeMessage, 3000)

Neste bloco de código eu trouxe uma função que executa uma mensagem em JavaScript retornando isso no corpo do documento no HTML. Para que o setTimeout funcione precisamos trazer 2 parametros, o primeiro é a função a ser executada, que no meu caso é a executeMessage e o tempo de espera para que ela seja executada. Neste exemplo ela é executada após 3 segundos após sua inicialização.

setInterval()

Já essa função trabalha de forma parecida com a do setTimeout(), trazendo como primeiro parametro a função a ser executada e o tempo de execução, mas a principal diferença deles dois é que o setInterval() não irá parar de executar a função, ele irá trazer uma especie de looping infinito, retornando o resultado que você definiu através de uma função, juntamente com o tempo de espera para a execução sem parar.

function executeMessage() {
  document.write('Executando a mensagem...');
};

setInterval(executeMessage, 3000) // Irá executar a mensagem da função sem nenhuma pausa.

Para que você consiga pausar esse looping que o setIntervalretorna, é nescessário criar uma funcionalidade para isso, como um botão para pausar/parar por exemplo, ou até o uso do clearInterval() resolve, mas para isso você deverá passa-lo dentro de uma variável para que ele consiga parar de executar, como no exemplo abaixo (a definição do comportamento de inicialização e termino ficará ao seu critério).

 let timer =  setInterval(executeMessage, 3000);

No exemplo citado, o que eu fiz foi criar uma variável chamada timer e faze-la receber a função que o setIntervalirá executar, e para exemplificar o uso do clearInterval, eu esperei alguns segundos para que ela pudesse executar algumas mensagens e logo em seguida o defini passando o valor da variável que foi criada agora pouco, fazendo com que desta forma, neste exemplo, ele pare de executar o looping que o setInterval trás.

OBS: Lembrado que se o clearIntervalfor definido ao mesmo tempo que o setInterval, ele já irá parar a função antes que ela execute, então para ver ela executando e testando essa funcionalidade, ele deverá ser setado um tempo depois da execução da mensagem.

Diário de Bordo #1

Ana Luisa Santos — Mon, 02 Jan 2023 23:44:18 +0000

Essa é uma documentação diária do meu processo de estudos e evolução como desenvolvedora Front-End. Os objetivos deste diário é trazer a tona os principais fatores que será preciso melhorar para que o proveito dos meus estudos sejam amplificados, além de trazer um breve resumo direto ao ponto e simplificado de cada tópico estudado ou de qualquer coisa que eu aprenda de novo e que tenha me pego de surpresa xD.

Para iniciar meu diário, resolvi trazer algumas coisas que eu pude identificar através de uma observação do meu desempenho como Desenvolvedora e descobri tais coisas:

É necessário ter um desenvolvimento detalhado dos projetos/exercícios que eu gradativamente desenvolva.
Mais treino de Lógica, resolução de diversos problemas, desde o mais simples ao mais avançado que eu puder resolver e análise do problema em questão e análise.
Compartilhamento do que é aprendido.

Bom, como podem ver esses são três tópicos que atualmente eu preciso desenvolver e melhorar, e irei fazer um breve comentário sobre eles agora. Em relação ao primeiro tópico, eu resolvi utilizar diagramas para detalhar melhor cada problemas que eu irei resolver daqui pra frente, então vocês verão alguns diagramas que eu criarei nos próximos diários de bordo. Segundo tópico, eu percebi pois estou tendo alguns problemas nas resoluções de exercícios, acredito que deve ser pelo fato do conteúdo ainda não ter sido fixado corretamente, além da melhoria que preciso ter em meu pensamento lógico, logo, pegarei diversos exercícios para resolver utilizando JavaScript, não importa se eu demore 1h, 2h, 3h ou 1 dia para resolver, será feito 100% com base nos meus conhecimentos adquiridos gradativamente. E terceiro e último tópico, irá ser trabalhado junto com o segundo, pois servira como uma forma de fixar melhor o que eu for aprendendo, para não esquecer no dia seguinte xD (o que é normal quando se aprende algo novo e não tem nenhum tipo de convivência com ele).

Por fim, para não deixar esse diário só na introdução, vou trazer um resumo do que eu aprendi de JavaScript nessas semanas (alguns dos tópicos a serem inseridos eu já tinha aprendido antes, mas aproveitei o tempo para revisar).

Sintaxe Básica.
Manipulação do DOM.
Funções.
Vetores/Arrays.
Condições e Loops.
Includes, endsWith e startsWith.
Spreat Operator.
Rest Operator.
Desconstrução de Objetos e Arrays.

Além disso eu pretendo estudar mais sobre funções e objetos, Fetch API/Ajax, mais do ES6+, entender alguns conceitos de Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM e strict, um pouco de NodeJS e JSON, modularização e RegEx. Assim que passar dessa etapa e ficar ferinha em JavaScript, irei focar 100% em ReactJS para aproveitar o máximo do meu foco, depois disso irei decidir entre aprender Styled Components ou TypeScript(Já tenho uma vivência breve com essa linguagem).

Por enquanto é isso, até mais!

A importância do LinkedIn para Dev's e como usar

Ana Luisa Santos — Fri, 29 Jul 2022 21:15:00 +0000

Com o avanço da tecnologia, aumento de vagas e a procura por bons profissionais dentro do mercado de trabalho, diariamente o mercado acaba se tornando mais competitivo, em busca de profissionais capacitados para preencherem as vagas que estão disponíveis. Além de existir uma necessidade de mostrar o seu perfil para os recrutadores, quem você é como profissional e pessoa, seus conhecimentos e habilidades (tais como soft e hard skills) e seus projetos. E é sobre isso que iremos abordar neste artigo, a real importância do LinkedIn para profissionais de TI e como utilizar essa poderosa ferramenta.

O que é o LinkedIn?

O LinkedIn é uma rede social para profissionais, com mais de 300 milhões de usuários ao redor do mundo, essa rede social surgiu com o intuito de fazer com que os profissionais tenham a possibilidade de criar um perfil (imagine como se fosse semelhante ao Facebook ou Instagram por exemplo) onde pode ser inserido informações como nome, experiência, formação acadêmica, competências, uma seção disponível para que você possa escrever um pouco sobre si mesmo no sentido profissional, de forma resumida, clara e direta ao ponto, foto de perfil e capa, título (onde são inseridas palavras chaves da sua área de atuação), localização, além de você conseguir criar publicações (não esqueça que o LinkedIn é uma rede para profissionais, e não o seu perfil pessoal do Instagram ou Facebook, ok?), além de ter disponível uma seção de busca de emprego, conexões, dentre outras opções.

Qual é a sua importância?

Como muitos desenvolvedores mais experientes devem saber, o mercado de atuação em TI é extremamente rico de oportunidades, e também, de escassez de profissionais capacitados. Trazendo esse cenário para o objetivo que abordamos aqui, pode-se ser dito em poucas palavras que, o LinkedIn é uma das suas portas de entrada para o mercado de trabalho, além de uma possível contratação, pois é lá (e em outras plataformas como o GitHub, por exemplo) que recrutadores ou até mesmo outros desenvolvedores possam te encontrar, ver o seu perfil, entender um pouco mais sobre você, ter acesso ao que você faz, suas habilidades, conhecimentos, competências, outros perfis que se, linkados da forma correta, possibilitam que o visitante se direcione a outras páginas importantes para a sua área, como o GitHub informado anteriormente, além de outras plataformas que podem ajudar a trazer mais notoriedade a você e quem você é como profissional.

Certo... agora como eu posso utilizar o LinkedIn de forma correta?

Separei alguns tópicos que irão te ajudar a criar um perfil campeão no LinkedIn, que traga mais confiança aos recrutadores e o destaque como profissional.

1° Foto de Perfil e Capa adequados

É de suma importância que você tenha uma foto sua, apresentando você como profissional. Evite fotos descontraídas, como uma foto no parque ou na praia por exemplo. Procure tirar fotos com postura e linguagem corporal corretas, com um cenário neutro. Já a capa, pode ser uma imagem relacionada a sua área de atuação, por exemplo. Procure sempre inserir uma boa foto de perfil e capa.

2° Insira palavras-chaves do seu cargo

É importante inserir palavras chaves do seu ramo de atuação dentro do seu perfil, assim fica mais fácil de te encontrar no meio da multidão.

Um bom exemplo disso é o meu perfil no LinkedIn, onde eu expresso que sou desenvolvedora Front-End e insiro minhas habilidades técnicas no perfil, que são palavras chaves da minha área como pode ver através da imagem acima.

3° Escreva sobre você

Crie uma breve descrição sobre você, apresente seus pontos fortes e seus conhecimentos de forma resumida e direta ao ponto, além de informar os seus meios de contato, como informado na foto.

PS: Na hora de escrever sobre você, você poderá inserir as informações em português, as informações no meu perfil estão em inglês, mas são opcionais.

4° Experiência Profissional e Formações

Insira as suas experiências profissionais (pode ser inserido trabalhos voluntários ou freelancers) que estejam relacionados ao seu cargo desejado/área de atuação, além de inserir as suas formações acadêmicas, como ensino médio (preferencial) e formações de ensino superior.

5° Insira competências e certificados de importância para sua carreira/área

Insira cursos, bootcamps, hackathons que você participou, inserindo um link para ter o acesso ao certificado (é opcional, o que vale realmente é o conhecimento, mas é muito bom inserir os certificados também), além de informar quais as suas principais competências que você tem, hard-skill e soft-skill.

6° Seção de Destaques

A seção de destaques do perfil são pontos importantes que você queira deixar em destaque, eles podem ser publicações, certificados, links, dentre outros.

OBS: Tente sempre destacar as melhores informações que você tem a oferecer

7° Publicações

Lembre-se que, suas atividades na plataforma, artigos escritos, posts que você faz ou documentos que você envia(como publicação), ficam gravados em seu perfil, então tome cuidado com o que você publica, que tipo de post você curte e comenta. Lembrando que, o LinkedIn é uma rede social para profissionais, sempre tenha uma postura de profissionalismo na plataforma.

Esse post foi útil para você? Curta, Compartilhe e Me siga nas minhas principais redes sociais 👇

LinkedIn: https://www.linkedin.com/in/ana-luisa-/

GitHub: https://github.com/analuisadev

CSS BEM - Saiba tudo sobre essa metodologia!

Ana Luisa Santos — Sat, 16 Jul 2022 09:59:19 +0000

🤔 Você em algum momento de sua carreira deve ter ouvido falar sobre a metodologia BEM em CSS, e caso não nunca tenha ouvido falar, ou muito menos sabia que ela existe, fique neste artigo até o final para entender a real importância da sua utilização.

O que é BEM?

BEM é uma abreviação para Block, Element and Modifier, que em português significa Bloco, Elemento e Modificador. Criada em volta de 2005 por um buscador russo bem famoso chamada Yandex, com o objetivo de padronizar o código em vários em vários projetos, te auxiliando a criar códigos reutilizáveis e sustentáveis por meio da nomeação de classes. Fazendo com que você tenta total autonomia na na escrita e manutenção de qualquer tipo de projeto.

Qual o significado da abreviação?

Cada bloco desta metodologia são divididos em 3 pilares importantes, que são:

BLOCO
É um componente independente de uma aplicação, que tem o seu próprio significado. O Bloco é um container, que contém elementos de marcação HTML como seu conteúdo, ou até mesmo, outros blocos iguais.

Um bom exemplo de bloco séria

<div class="menu">
   <h1>Conteúdo do elemento...</h1>
</div>

Elemento

O elemento filho faz parte de um bloco, sendo semanticamente ligado ao elemento pai, não podendo ser utilizado fora desse bloco, como estão sempre atrelados a esse bloco, geralmente o nome do elemento é separado, contendo o nome do bloco, 2 underlinhas (__) e nome do elemento.

.menu{} /*Bloco*/ 

.menu__link{} /*Elemento*/

Modificador

Como o próprio nome diz, ele modifica os comportamentos, estados e aparência dos blocos e/ou elementos.

.menu{} /* Bloco */

.menu__link{} /* Elemento */

.menu_ChangeColor{} /* Modificador */

Qual é a ideia por trás e quais são as suas boas práticas

A ideia por trás da utilização da estrutura da metodologia BEM é fazer com que as informações sejam mais fáceis de entender tanto para você, quanto para outros desenvolvedores terem uma maior facilidade de entender o seu código.

<div class="card">
    <div class="card__header">
        <h2>Título do Card</h2>
    </div>
    <div class="card__boxRed">
        <img src="" alt="" class="card__img">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
    </div>
    <div class="card__boxBlue">
        <img src="" alt="" class="card__img">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
    </div>
    <div class="card__boxGreen">
        <img src="" alt="" class="card__img">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
    </div>
</div>

Principais Vantagens

Reutilização de Código
Ajuda na nomeação do código CSS sem esforço e complicação
Melhor Compreensão do código
Desenvolvimento mais rápido com resultados duradouros
A arquitetura garante a longevidade e a sustentabilidade para o desenvolvimento
Menos problemas com o avanço do código HTML
Facilita na manutenção do código
Cria uma estrutura escalável