Jak budować strony internetowe porady triki i zasady

Question

Jak w temacie szukam porad, wskazówek i zasad związanych z budowaniem stron www. Chodzi mi o wyjaśnienia dlaczego używać czegoś a nie czegoś innego i w skrócie co jest potrzebne.

Przykład którego nie rozumiem czemu u pana Zelenta clearfix to tylko clear both a w bootstrap tak

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

 

Answer 1

Bo akurat pan Zelent stosuje dość przestarzałą wersję clearfixa - de facto najstarszą z możliwych i najbardziej hackowatą.

Pomyślmy: clearfix jest częścią prezentacji, zatem nie powinien być częścią HTML-a. HTML to warstwa treści i powinna wiedzieć jak najmniej o tym jak jest wyświetlana. Z tego powodu atrybut [style] łamie podział aplikacji na warstwy (prezentacja jest wciśnięta w treść) i mogą się pojawić problemy przy aplikacjach korzystających np. z Content Security Policy (które w pień wycina wszelkie style czy skrypty inline). 

Zgodnie z architekturą BEM czy metodologiami takimi jak OOCSS jedynym łącznikiem między HTML a CSS powinna być klasa elementu. Ona oznacza stan danego elementu na stronie (np. czy dany przycisk jest wciśnięty itd.) i ten stan dopiero stylujemy przez CSS. Stąd pojawia się klasa .clearfix. Natomiast puste elementy HTML można w 99% zastąpić tzw. pseudoelementami ::before i ::after, które mają czysto prezentacyjny charakter - zwłaszcza, że w tym wypadku potrzebujemy ich głównie do celów prezentacji (żeby nam się float nie rozpadł).

Clearfix w BS to jego najbardziej skrócona i najszerzej przetestowana wersja, jaka istnieje i wywodzi się stąd: http://nicolasgallagher.com/micro-clearfix-hack/ - od człowieka, który stworzył normalize.css (więc wie co robi ;)). Jednak clearfix i tak jest najbardziej skomplikowanym sposobem na tego typu rzeczy. O łatwiejszych można poczytać tutaj: http://www.forumweb.pl/porady-i-tutoriale-www/css-clearowanie-czyli-problemy-z-float,47914 i wydaje mi się, że nadanie rodzicowi overflow: hidden jest o wiele łatwiejsze niż dostawienie nowego, pustego elementu ;)

Answer 2

Skromnie dodam, że warto zainteresować się preprocesorami CSS: 

• SASS/SCSS
• LESS
• Stylus 

choć nie zapominajmy, że istnieje jeszcze kilka alternatyw, ale te trzy są chyba najlepsze i najczęściej spotykane (SASS i LESS na pewno).

Answer 3

Dlatego, że bootstrap jest frameworkiem rozbudowanym bardzo mocno... to tak jak by spytać, dlaczego frameworki używają  np gii(yii2)  a kowalski sam generuje CRUD.

Answer 4

Dziekuje a znacie może coś więcej w sensie triki i zasady, co warto używać i jak pisać kod aby był dobry, czysty i łatwo skalowalny pod rozbudowe stron internetowych.