I mam kilka uwag odnośnie zwykłego frontu.
- https://validator.w3.org/nu/?doc=https%3A%2F%2Fdemo.crocoder.pl%2Fcloudy-blog-demo%2F&showoutline=yes - kilka rzeczy do poprawy :)
-
<ul class="menu" id="main-menu">
<li class="menu-item current-menu-item menu-item-has-children">
<a href="/">Home</a>
<ul class="sub-menu">
<li class="menu-item"><a href="">Example Item</a></li>
<li class="menu-item"><a href="">Example Item</a></li>
</ul>
</li>
<li class="menu-item"><a href="/">About Me</a></li>
<li class="menu-item"><a href="/">Contact</a></li>
</ul>
</nav>
</header><!-- .site-header -->
<div class="site-content container">
<div class="content-area">
<main>
<article class="std-post std-post--tile">
<div class="std-post__thumbnail-wrap">
<a href="/" class="post-thumbnail-link" aria-hidden="true" tabindex="-1"><img src="assets/cloudy-blog-post-5.jpg" width="840px" height="420px" alt=""></a>
<div class="std-post__author">
<a href="/" class="post-author-link"><img src="assets/cloudy-blog-author.jpg" width="40px" height="40px" alt="" title="Johanna Doe"></a>
</div>
</div>
Jakieś te odstępy takie średnie w tym kodzie.
-
Odnośnie nazewnictwa klas:
menu-item-has-children
std-post
std-post--tile
std-post__thumbnail-wrap
Tak lekko zalatuje BEMem, ale jednak i to BEM nie jest. Fajnie by było, jakbyś zdecydował się na jakąś metodologię - ułatwia to pracę.
-
Zmienne w Sass:
$color__background-body: #fcfcfc;
$color__background-hr: #ccc;
$color__background-hr-dark: #333;
$color__background-main-content: #fff;
$color__background-secondary-content: #f5f5f5;
$color__background-item-active: #fd2749;
$color__background: #0c0e14;
Wydaje mi się, że skorzystanie z map (?) byłoby tutaj odpowiedniejsze. Spójrz co można dzięki nim zrobić:
$colors: (
primary: #ed5144,
secondary: #ff8f00,
success: #00c8b4,
warning: #cba775,
error: #ed5144,
info: #539fff,
facebook: #3a56a1,
google: #dd4b39,
twitter: #1dadeb,
pinterest: #c92631,
linkedin: #0077b5,
white: #fff,
black: #333,
)
.button {
@each $color, $value in $colors {
&--#{$color} {
background-color: $value;
}
}
}
Tylko tyle kodu, a masz przy okazji button z tłem w każdym kolorze, który sobie przechowujesz w zmiennych.
A żeby sobie po prostu wykorzystać jakiś kolor możesz stworzyć funkcję, np:
@function get-color($name) {
@return map-get($colors, $name);
}
Albo używać po prostu map-get.
-
Zamiast tworzyć osobny plik na @media ja jednak wrzucałabym je od razu pod dany selektor. Zdecydowanie łatwiej się wtedy w kodzie odnaleźć - masz wszystko w jednym miejscu. Zerknij na jakiś tam przykładowy mój kod:
.header {
&__bg {
position: relative;
}
&__image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@media (min-width: 768px) {
position: relative;
}
@media (min-width: 1024px) {
width: 115%;
}
}
&__aside {
display: none;
@media (min-width: 768px) {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
}
}
- Jeśli chodzi o połączenie BEM i Sass to przy ich wykorzystaniu kod taki:
.site-branding {
position: relative;
z-index: 1;
display: table-cell;
vertical-align: middle;
color: #fff;
& > .site-title{
display: inline-block;
margin: 0;
@include font-size(3.125);
font-weight: 700;
}
& > .site-description{
margin: 10px 0 0 0;
padding: 0;
text-transform: uppercase;
@include font-size(0.875);
}
}
Można by było elegancko przerobić na:
.site-branding {
position: relative;
z-index: 1;
display: table-cell;
vertical-align: middle;
color: #fff;
&__title {
display: inline-block;
margin: 0;
@include font-size(3.125);
font-weight: 700;
}
&__description {
margin: 10px 0 0 0;
padding: 0;
text-transform: uppercase;
@include font-size(0.875);
}
}
Przy założeniu oczywiście, że i site-brandig__title i site-branding__description są elementami bloku site-branding.
-
Polecałabym też ogarnąć strukturę plików Sass, wydzieliłabym je nawet na mniejsze komponenty, bo co jak jakiś element z header pojawia się też w stopce? Ciężko jest innej osobie (w sensie przyszłemu programiście, który miałby coś w kodzie poprawić) znaleźć style pod dany element. Może ITCSS?
-
Zdarza Ci się stylować w niektórych miejsca po tagach (jak wiemy nie jest to uważane za coś dobrego), aaale robisz to ze względu na WP, racja? Więc może warto by było o tym wspomnieć? I chyba w takim razie masz niepotrzebne klasy dla elementów listy w nawigacji, czy tam menu.
Ale generalnie pomysł na serię fajny, liczę, że się czegoś nauczę. W końcu WordPressa raczej nie znam 
Powodzenia!
