Ułożenie elementów w nagłówku i inne nurtujące pytania

pytanie zadane 3 lutego 2019 w HTML i CSS przez bugs55 Obywatel (1,090 p.)

Witam wszystkich!

Jestem w trakcie pisania własnego motywu pod Wordpressa, który docelowo będzie blogiem. Miałem problem z ułożeniem zdjęcia i nava tak aby były wyśrodkowane wertykalnie w sekcji header. Rozwiązałem to paddingami, jednak chciałbym dowiedzieć się czy jest to dobre rozwiązanie? Macie inne propozycje?
Przy okazji chciałbym Wam zadać kilka pytań które nurtują mnie od jakiegoś czasu:
1. Czy uzależnienie wysokości header od paddingu to dobry pomysł, czy raczej używać stałej wysokości?
2. Przy dodawaniu przejść do elementu trzeba dodawać wszystkie opcje typu -moz, -o, -webkit, czy wystarczy tylko -webkit?
3. Czy używacie opcji "minify" do waszych plików?

Niżej dodaję mój kod

<!DOCTYPE html>
<html lang="pl-PL">

<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
<header>
    <div class="container">
        <img src="img/hereads-logo.png" alt="He Reads!" class="float">
        <nav class="float">
            <ul>
                <li><a href="#">Książka</a></li>
                <li><a href="#">Serial</a></li>
                <li><a href="#">Wylosuj</a></li>
            </ul>
        </nav>
        <div style="clear: both;"></div>
    </div>
</header>

</body>

</html>

.float {
  float: left;
}
body {
  background-color: #E5E5E5;
  font-family: 'Montserrat', sans-serif;
}
header {
  background-color: #fff;
  border-bottom: 4px solid #E88F30;
  font-weight: 800;
  overflow: auto;
  padding: 25px 0;
  box-shadow: 0 8px 25px #c2c2c2;
}
header img {
  width: 250px;
  margin-right: 30px;
}
header nav {
  text-transform: uppercase;
  padding: 20px 0 0;
  box-sizing: border-box;
}
header nav ul li {
  float: left;
  padding: 10px;
  border-radius: 7px;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
  background-color: #EDB034;
}
header nav ul li a:link {
  color: #121212;
}
header nav ul li a:hover {
  text-decoration: none;
}

Z góry dziękuję za wszystkie odpowiedzi

1 odpowiedź

odpowiedź 3 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

2. Przy dodawaniu przejść do elementu trzeba dodawać wszystkie opcje typu -moz, -o, -webkit, czy wystarczy tylko -webkit?

Od tego używaj css prefixera przy buildzie np. webpacka. Takie rzeczy w ogóle nie powinny Cię interesować przy kodowaniu :)

3. Czy używacie opcji "minify" do waszych plików?

Podobnie jak wyżej, minifikacja css, html, js to zadanie dla automatów (np. webpack z odpowiednim pluginem), nie zastanawiaj się nad tym jako developer.

komentarz 3 lutego 2019 przez bugs55 Obywatel (1,090 p.)

Rozumiem. Nie zamierzam tego robić własnoręcznie, używam pluginów w Visual Studio Code, chodziło mi bardziej o to, w szczególności przy 3 pytaniu, czy robić taką operację czy nie.

komentarz 3 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Generalnie zasada jest taka - w repo trzymasz kod "normalny", bez żadnych minifikacji itp., a w buildzie masz kod przemielony przez minifikatory, autoprefixery itp. itd. I nie korzystaj z pluginów do edytora. Od tego jest np. webpack. A to z prostej przyczyny - nie uzależniaj się od edytora czy IDE. Gdybyś teraz zmienił edytor to leżysz :) Czy chociażby pójdziesz na innego kompa i musisz od zera wgrać edytor i go skonfigurować. Naprawdę, nie bój się webpacka, zobaczysz, użyjesz go raz i już nie wrócisz do rozwiązani z pluginami :)

komentarz 3 lutego 2019 przez bugs55 Obywatel (1,090 p.)

Dziękuję bardzo za pomoc, jednak mogę prosić a jakiś słowniczek do Pana wypowiedzi? ;x Mam pewien bagaż doświadczeń w pisaniu stron internetowych, ale znaczenia niektórych słów (repo, build, webpack), których Pan użył nie rozumiem...

komentarz 3 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Mam pewien bagaż doświadczeń w pisaniu stron internetowych

jak Tyś się uchował jako front-end, że nie znasz builderów itp. :)?

Repo no to chodzi mi po prostu o repozytorium GIT, tu chyba nie ma co wyjaśniać, git to jak ręka, bez tego nie wyobrażam sobie robić jakiegokolwiek projektu.

Build, to chodzi mi po prostu o wersję produkcyjną aplikacji, czyli tą wyplutą już przez webpacka po wszystkich przetworzeniach, minifikacje, prefixy, transpilacja kodu jeśli potrzebujesz wspierać jakieś starsze środowiska i pisać w nowych ES itp.