Ocena i krytyka kodu

pytanie zadane 5 maja 2016 w HTML i CSS przez Barus Stary wyjadacz (14,120 p.)

Witam!
Tworzę stronę opartą na HTML5 i CSS3. Na razie stworzyłem na szybko jedną główną podstronę (dlatego umieściłem ją w znacznikach <header>), a będzie ich 5. Bardzo proszę o ocenę tego krótkiego kodu, komentarze czy w ogóle idę w złą czy w dobrą stronę oraz konstruktywną krytykę.

<body>

	<header id="header">
		
		<nav id="nav">
			
			<div class="outside-menu">
				<ul>
					<li><a href="#">Strona główna</a></li>
					<li><a href="#">O mnie</a></li>
					<li><a href="#">Projekty</a></li>
					<li><a href="#">Opinie</a></li>
					<li><a href="#">Kontakt</a></li>
				</ul>
			</div>
		
		</nav>
	
			<div class="logo">
				<h1>imie nazwisko</h1>
				<p>...Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span></p>
			</div>
	
	</header>

</body>

*{
	box-sizing: border-box;
}

body
{
	margin: 0;
	padding: 0;
}

#header
{
	background: linear-gradient(to left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("tlo.jpg");
	background-repeat: no-repeat;
	height: 100vh;
	width: 100%;
	background-size: cover;
}

#nav
{
	width: 100%;
	background-color: rgba(193, 193, 184, 0.8);
	color: #2E2D00;
	border-bottom: 1px solid #C1C1B8;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

.outside-menu
{
	width: 1152px;
	margin: 0 auto;
	height: 45px;
}

ul
{
	margin: 0;
	padding: 0;
	font-size: 18px;
	list-style-type: none;
	line-height: 250%;
	text-align: center;
	display: inline-block;
	color: #888;
	font-family: 'Roboto Condensed', sans-serif;
}

ul a
{
	color: #FFF;
	text-decoration: none;
	display: block;
}

ul > li
{
	float: left;
	width: 170px;
	margin-right: 75px;
	height: 40px;
	font-weight: 400;
	text-transform: uppercase;
}

ul > li:last-child
{
	margin-right: 0;
	text-align: right;
}

ul  > li::before
{
	content: "";
	display: block;
	clear: both;
}

ul > li:hover a
{
	color: #000;
	font-weight: 700;
}

.logo
{
	width: 100%;
	position: absolute;
	top: 25%;
	left: 0;
	text-align: center;
	font-family: 'Josefin Sans', sans-serif;
}

.logo h1
{
	color: #ddd;
	font-size: 90px;
	text-transform: uppercase;
	text-shadow: 5px 7px 10px black;
}

.logo p
{
	margin-top: 100px;
	color: #ccc;
	font-size: 30px;
	font-style: italic;
	text-shadow: 3px 5px 5px black;
}

Z góry dziękuję!

2 odpowiedzi

odpowiedź 5 maja 2016 przez kubaapk Nałogowiec (44,270 p.)

Nie styluj po tagach. Mam na myśli np. to:

ul > li
{
    float: left;
    width: 170px;
    margin-right: 75px;
    height: 40px;
    font-weight: 400;
    text-transform: uppercase;
}

Co jeśli później będziesz chciał użyć jeszcze raz <ul> gdzieś dalej w kodzie?

Nie wiem co planujesz robić np. z nav i headerem, ale napiszę - ID używaj do elementów do których będziesz odwoływał się w JS. Raczej skłaniaj się ku klasom.

komentarz 5 maja 2016 przez Barus Stary wyjadacz (14,120 p.)

Dziękuję bardzo, poprawione :)

odpowiedź 5 maja 2016 przez Comandeer Guru (601,110 p.)

Podstrona w header? Robisz onepage, tak?

Kodu jest na tyle mało, że nie da się nic sensownego powiedzieć – po prostu. Na razie Wszystko OK™.

P.S. Oczywiście CSS lepiej rozpisać na BEM ;)

komentarz 5 maja 2016 przez Barus Stary wyjadacz (14,120 p.)

Tak, dokładnie, to będzie onepage :) Na BEM rozpiszę jak już skończę pozostałe podstrony.

P.S Wow, Numer 1 na forum ocenił kod na "ok", tyle wygrać :D

Dziękuję bardzo za ocenę i sugestie :)