Tarefa de análise por layout (sass, pug, gulp, bem)

Conheço esse truque há muito tempo, mas só o apliquei pela primeira vez na prática. Houve uma restrição no layout (wrapper = width: 1170px, borda vermelha). À direita, o conteúdo correspondia à restrição e era adjacente à borda, mas à esquerda a imagem se arrastava para fora da borda. No começo, isso pode ser assustador, mas vale a pena saber mais sobre a operação de margin-letf: -100px e você já sabe como resolver a tarefa. A propósito, isso é flexível e, em amarelo, marquei os limites dos objetos.

Estamos acostumados a usar largura, altura como 100%, e isso é compreensível, tudo para o adaptável, usando largura, é possível obter um resultado semelhante ao das margens negativas. Apenas dê o tamanho ao descendente maior que seu pai (por exemplo, largura: 130%)

Esta foi provavelmente a coisa mais difícil para mim.



Essa imagem demonstra bem meu projeto e, de fato, qualquer projeto. Quando você escreve as primeiras cem linhas, tudo parece simples e você não percebe problemas. Assim, você termina o projeto, com um comprimento de 900 linhas e, inesperadamente, decidiu percorrer o arquivo, bem, ou adicionar consultas de mídia.



Você escreve estilos para um elemento na mídia, analisa o site e não entende por que os estilos não funcionam conforme necessário. Em busca de um problema que você já passou 15 minutos, verificou as tarefas no gulp e folheou o arquivo css compilado.

Por acaso, por acidente ... você encontra o problema em uma folha de estilos em cascata, ou melhor, na maneira como os estilos são aplicados aos elementos. No começo do meu caminho para a web, eu certamente li que os seletores têm prioridades de aplicativos diferentes. Em resumo, para um seletor comum (div, ul, a, p, etc.) -1 ponto, para a classe 10, para o identificador 100.



Depois de verificar cuidadosamente todo o aninhamento, ainda encontrei um erro. Acontece que você precisa monitorar o aninhamento de elementos e atribuir esse não ao último significado.

Isso pode incluir a estrutura do arquivo css (sass). Existe um bloco de "portfólio", ele tem vários elementos do tipo "portfólio __ *", mas duas classes nesse aninhamento são supérfluas, na minha opinião.

Este foi o primeiro projeto em que tentei aderir estritamente ao BEM, mas não gastei um minuto em projetar desde o início, mas criei aulas em movimento, o que levou ao fato de que o apoio é dado com dificuldade.



Mas isso, na minha opinião, é um bom exemplo do BEM

Eu li sobre esse problema em um dos artigos no BEM, mas eu mesmo o encontrei pela primeira vez. É muito parecido com problemas com o bootstrap, também teve ... existem classes longas. Como conviver com o número mínimo de aulas?

Este é o padrão btn.



E estes já são botões modificados ...

Em virtude do fato de eu ter que escrever no BEM, surgiram algumas complicações no projeto. Eu já escrevi sobre aulas longas, aqui está outro caso.

Havia 6 elementos semelhantes na página. Quando a mídia consulta, era necessário ocultar um certo número de elementos. Afinal, não crie novas classes para cada objeto. Eu tive que usar a pseudo classe n-filho (). Anteriormente, era usado apenas de maneira cortada (filho (1), filho (3), filho (4) etc.), agora era necessário ocultar todos os elementos, exceto os dois primeiros. Depois de passar 5 minutos lendo a documentação, usei enésimo filho (n + 3), obtendo assim o resultado necessário.



Outro exemplo de como você pode levar o elemento desejado por meio de um grupo de seletores e não criar uma classe especial para esse elemento.



Veja a figura abaixo. A próxima entrada div.1> p selecionará apenas objetos da classe "2", div.3> p receberá objetos da classe "4". A imagem mostra como isso funciona. Os itens mais próximos são selecionados na hierarquia.