dúvida resolvida Front-End: Como você se organiza?

Luiiiz · Junho 7, 2019

Olá, tudo bom?

Estou querendo me organizar mais em meus futuros projetos, mas não tenho uma base de como fazer essa organização, de como iniciar. Peço a ajuda de vocês: Como é sua organização? Existe um padrão? Se possível, pode responder os tópicos abaixo?

Como é a separação de pastas?
No css, por onde começam?
Como você separa os items do css (Temas, classes comuns (background-color, buttons, links), classes principais (navigation, section))?
Um grande problema para min (Por mais que pareça ser simples): Como vocês nomeiam as classes?

Se tiver algo a mais a acrescentar, ficarei agradecido em saber mais.

Atenciosamente, Luiiiz

Editado Junho 24, 2019 por lucakiksd07
Ativo

Lennard · Junho 7, 2019

7 horas atrás, Luiiiz disse:

Como é a separação de pastas?

No css, por onde começam?

Como você separa os items do css (Temas, classes comuns (background-color, buttons, links), classes principais (navigation, section))?

Um grande problema para min (Por mais que pareça ser simples): Como vocês nomeiam as classes?

Eu, geralmente faço uma pasta assets, que por sua vez tem a pasta imagens, css, js, etc

No css costumo começar com o basico do site (Fonte, background, etc) e dai começo a fazer os styles de cima para baixo (Header, corpo, footer, mais ou menos assim)

a 3a pergunta não sei como responder pq sempre costumo fazer diferente

Eu nomeio as classes com o nome do que ela é, para ser mais facil de encontrar

Luiiiz · Junho 11, 2019

Em 07/06/2019 em 10:05, Lennard disse:

Eu, geralmente faço uma pasta assets, que por sua vez tem a pasta imagens, css, js, etc

No css costumo começar com o basico do site (Fonte, background, etc) e dai começo a fazer os styles de cima para baixo (Header, corpo, footer, mais ou menos assim)

a 3a pergunta não sei como responder pq sempre costumo fazer diferente

Eu nomeio as classes com o nome do que ela é, para ser mais facil de encontrar

No backgrounds, voce coloca diversas cores(prontas) ou vai colocando apenas a que vai usar? E com as fontes?

EduardoMGP · Junho 11, 2019

Eu utilizo a estrutura MVC
a pasta Model é onde fica as classes do php
a pasta View é onde fica os únicos arquivos que o usuário poderá ver

a pasta Controller eu coloco os arquivos php que se comunicará com o banco de dados

Fica mais ou menos assim

Model ->
	ModelAcesso.php
	ModelUsuario.php

View ->
	Assets ->
		cdn ->
			js ->
				script.js
			css ->
				estilo.css
		perfil ->
			perfil-tester.png
			perfil-fulano.png
		background ->
			fundo1.png
			fundo2.png
	ViewIndex.php
	ViewContatos.php
	ViewSobre.php

Controller ->
	ControllerConexao.php
	ControllerUsuarios.php

Já o css eu organizo desta maneira ou de alguma outra parecida

/*
	1.0 - Cores
	2.0 - Resetando valores padroes
	3.0 - Menu de navegação
	3.1 - Menu de navegação escondido
	4.0 - Formulario de login / register
*/


/* 1.0 -- /////////////////////////////*/
:root {
	--redBerry: #990000;
	--alabaster: #f8f8f8;
	--silver: #ccc;
	--branco: #fff;
	--mercury: #E6E6E6;
	--verde: #00a000;
	--cinza: #727b80;
}


/* 2.0 -- /////////////////////////////*/
* {	margin: 0;	padding: 0;}

body {
	background-image: url('../cdn/imagens/background.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;
	width: 100%;

}
.row {	margin: 0; padding: 0; }


/* 3.0 -- /////////////////////////////*/
.nav-lateral {
	background-color: var(--alabaster);
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.2);
	left: 0;
}

ul {width: 100%; margin-top: 15px;}
li, .dropdown-li { list-style: none; width: 100%; padding: 10px; border-bottom: var(--mercury) 1px solid; transition: 0.5s;}
.dropdown-li { padding: 3px 20px; }
li:hover, .dropdown-li:hover { background-color: var(--redBerry); border-radius: 5px; transition: 0.5s;}
a { color: black; }
li:hover a, .dropdown-li:hover a { color: var(--alabaster); text-decoration: none; transition: 0.5s;}
.logo-nav { width: 100%; margin-bottom: 10px;}
.logo-nav-foto { width: 100%; }


/* 3.1 -- /////////////////////////////*/
.nav-top {
	background-color: var(--alabaster);
	height: 60px;
	width: 82%;
	box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.2);
	margin-bottom: 7px;
	line-height: 60px;
	padding: 0 15px;
	position: fixed;
	z-index: 9999999;
	top 0;
	right: 10px;
	margin-top: 3px;
	border-radius: 5px;
}
.nav-click{
	position: absolute;
	background-color: var(--alabaster);
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 5px;
	transition: 0.5s;
	padding: 15px;
	right: 19px;
	top: 60px;
	width: 300px;
	box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.2);
	z-index: 9999999;
}

O html eu organizo da seguinte forma

<!doctype html>
<html lang="pt">
<head>
	<title>Titulo</title>
	<?php include "header.php" ?>
</head>
<body>
  
	<?php include "menu.php" ?>
  
	<div class="site ">
      
		corpo do site aqui

		<?php include "rodape.php" ?>
	</div>    
	<?php include "scripts.php" ?>
</body>
</html>

Coloco os <?php include ?> para não ficar reescrevendo o código em todas as páginas já que é o mesmo para todas elas

Editado Junho 11, 2019 por EduardoMGP

Luiiiz · Junho 11, 2019

54 minutos atrás, EduardoMGP disse:

Eu utilizo a estrutura MVC
a pasta Model é onde fica as classes do php
a pasta View é onde fica os únicos arquivos que o usuário poderá ver

a pasta Controller eu coloco os arquivos php que se comunicará com o banco de dados

Fica mais ou menos assim


Model ->
	ModelAcesso.php
	ModelUsuario.php

View ->
	Assets ->
		cdn ->
			js ->
				script.js
			css ->
				estilo.css
		perfil ->
			perfil-tester.png
			perfil-fulano.png
		background ->
			fundo1.png
			fundo2.png
	ViewIndex.php
	ViewContatos.php
	ViewSobre.php

Controller ->
	ControllerConexao.php
	ControllerUsuarios.php

Já o css eu organizo desta maneira ou de alguma outra parecida


/*
	1.0 - Cores
	2.0 - Resetando valores padroes
	3.0 - Menu de navegação
	3.1 - Menu de navegação escondido
	4.0 - Formulario de login / register
*/


/* 1.0 -- /////////////////////////////*/
:root {
	--redBerry: #990000;
	--alabaster: #f8f8f8;
	--silver: #ccc;
	--branco: #fff;
	--mercury: #E6E6E6;
	--verde: #00a000;
	--cinza: #727b80;
}


/* 2.0 -- /////////////////////////////*/
* {	margin: 0;	padding: 0;}

body {
	background-image: url('../cdn/imagens/background.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;
	width: 100%;

}
.row {	margin: 0; padding: 0; }


/* 3.0 -- /////////////////////////////*/
.nav-lateral {
	background-color: var(--alabaster);
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.2);
	left: 0;
}

ul {width: 100%; margin-top: 15px;}
li, .dropdown-li { list-style: none; width: 100%; padding: 10px; border-bottom: var(--mercury) 1px solid; transition: 0.5s;}
.dropdown-li { padding: 3px 20px; }
li:hover, .dropdown-li:hover { background-color: var(--redBerry); border-radius: 5px; transition: 0.5s;}
a { color: black; }
li:hover a, .dropdown-li:hover a { color: var(--alabaster); text-decoration: none; transition: 0.5s;}
.logo-nav { width: 100%; margin-bottom: 10px;}
.logo-nav-foto { width: 100%; }


/* 3.1 -- /////////////////////////////*/
.nav-top {
	background-color: var(--alabaster);
	height: 60px;
	width: 82%;
	box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.2);
	margin-bottom: 7px;
	line-height: 60px;
	padding: 0 15px;
	position: fixed;
	z-index: 9999999;
	top 0;
	right: 10px;
	margin-top: 3px;
	border-radius: 5px;
}
.nav-click{
	position: absolute;
	background-color: var(--alabaster);
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 5px;
	transition: 0.5s;
	padding: 15px;
	right: 19px;
	top: 60px;
	width: 300px;
	box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.2);
	z-index: 9999999;
}

O html eu organizo da seguinte forma


<!doctype html>
<html lang="pt">
<head>
	<title>Titulo</title>
	<?php include "header.php" ?>
</head>
<body>
  
	<?php include "menu.php" ?>
  
	<div class="site ">
      
		corpo do site aqui

		<?php include "rodape.php" ?>
	</div>    
	<?php include "scripts.php" ?>
</body>
</html>

Coloco os <?php include ?> para não ficar reescrevendo o código em todas as páginas já que é o mesmo para todas elas

Utilizo uma framework bastante conhecida(laravel) que utiliza o padrão MVC. Eu curto muito esse estilo de organização. Quanto ao CSS: Está bem completo e me ajudará melhor nessa questão. Saber por onde começar e como prosseguir, etc. Já o HTML, utilizo o próprio sistema da framework, o que já facilita muito pra min. Curti muito a forma o qual organiza.

Luiiiz · Junho 24, 2019

#up

Lightwood · Junho 26, 2019

Tópico movido para Programação > Geral por se tratar de uma discussão e não de uma dúvida, não necessitando de um fechamento.

LucasCas · Dezembro 19, 2019

gb-white.png?width=400&height=225

Sua dúvida foi marcada como resolvida pela nossa equipe. Caso sua dúvida não tenha sido sanada, crie outro tópico.

OBS: Essa mensagem é automática.

Entrar

dúvida resolvida Front-End: Como você se organiza?

Pergunta

Luiiiz

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

Lennard

Link para o comentário

Compartilhar em outros sites

Luiiiz

Link para o comentário

Compartilhar em outros sites

EduardoMGP

Link para o comentário

Compartilhar em outros sites

Luiiiz

Link para o comentário

Compartilhar em outros sites

Luiiiz

Link para o comentário

Compartilhar em outros sites

Lightwood

Link para o comentário

Compartilhar em outros sites

LucasCas

Link para o comentário

Compartilhar em outros sites

Conteúdo Similar

Popular Agora

Quem está navegando 0 membros estão online

Equipe