Powtarzalność kodu CSS - pytanie.

Question

Witam, mam pytanie.

Pytanie raczej skierowane do "profesjonalistów".

Otóż jak powinno się pisać Css'a?

Na przykład mam 4 identyfikatory w CSS. Każdy z nich wygląda mniej więcej tak:

#div1 { width: 100%; overflow: hidden; padding: 75px 0px; }

#div2 { width: 100%; overflow: hidden; padding: 75px 0px; background-color: #202020; }

#div3 { width: 100%; overflow: hidden; padding: 75px 0px; }

#div4 { width: 100%; overflow: hidden; padding: 75px 0px; }

Lepiej jest powtarzać ten kod w tych divach? Czy zrobić coś takiego:

#div1, #div2, #div3, #div4 { width: 100%; overflow: hidden; padding: 75px 0px; }

div2 { background-color: #202020; }

 

Answer 1

Najlepiej to nie stylizować po ID jak i nie tworzyć klas o tych samych wartościach dla powtarzających się elementów strony.

Lepszą opcją jest 2 przykład.

Comments

A kolejnym logicznym krokiem jest zainteresowanie się preprocesorami.

---

Mam taki kod na swojej stronie jak podalem w pierwwzym przykladzie, ale te divy to sekcje strony wiec zostana jako id. Nie wiem po prostu czy lepiej na gorze dokumentu dac sobie wszystkie divy "polaczone" czyli kilka na raz czy powtarzac wartosci.

---

Jest to po prostu redundancja, której w programowaniu staramy się unikać.

Programowanie

W programowaniu często można się spotkać z pojęciem nadmiarowego kodu (ang. redundant code). Jest to:

• kod, który jest wykonywany, ale nie ma żadnego wpływu na wynik końcowy;
• tak zwany kod zombie, który znajduje się w programie, ale nigdy nie jest wykonywany;
• tak zwany kod zdublowany - zawarty wielokrotnie taki sam fragment kodu, pełniący tę samą funkcję (lub bardzo zbliżony), a dający się zredukować przez zastąpienie go funkcją lub procedurą.

https://pl.wikipedia.org/wiki/Redundancja

---

Witam. Jeżeli te style się powtarzają to najlepiej zrobić klasę w css z odpowiednimi właściwościami i dodać ja do html każdego diva.

---

A jak nazwac taka klase?

Mam 4divy ktore sa sekcjami strony. W kazdej z nich jest ustawiony width, overflow i padding. W jednej z nich jest background. (sytuacja jak w moim przykladzie) i jak nazwac ta klase w ktorej dam overflow width i padding? Bo nie mam pojecia jakie nazewnictwo jest stosowane w takich przypadkach

---

Dajmy na to masz 4 sekcje:

• Description of dog.
• Description of cat.
• Description of horse.
• Description of cow.

HTML:

<main>
    <section id="dog">
        <div class="grid-md-6">
            <p class="color-black font-size-18px">
                Opis psa.
            </p>
        </div>
    </section>

    <section id="cat">
        <div class="grid-md-6">
            <p class="color-black font-size-18px">
                Opis kota.
            </p>
        </div>
    </section>

    <section id="horse">
        <div class="grid-md-6">
            <p class="color-black font-size-18px">
                Opis konia.
            </p>
        </div>
    </section>

    <section id="cow">
        <div class="grid-md-6">
            <p>
                Opis krowy.
            </p>
        </div>
    </section>
</main>

CSS:

.description-animal > section > div{
    background-color: #fff;
    border: 1px solid #006dda;
}

W taki sposób nawet nie musiałem się zastanawiać nad nazwami dla elementów.

Jeżeli będziemy często korzystać z koloru czarnego dla czcionek jak i  rozmiaru 18 px. można zrobić dwie klasy:

.color-black{
    color: #000;
}

.font-size-18px{
    font-size: 18px;
}

Jeżeli nie, dajemy:

.description-animal > section > div > p{
    color: #000;
    font-size: 18px;
}

Oraz wywalamy klasy z HTML dla tagu p.

Chcemy aby wyłącznie krowa miała tło obrazkowe, więc dodajemy w CSS:

.description-animal > section#cow > div{
    background: url('http://link-to-photo.png');
}

A jak nazwac taka klase? 

Po ludzku. 

---

Trochę mi to objaśniłeś, dzięki ;)