%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}



%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-bem.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
BEM
\end{center}




\section*{Block Element Modifier}
\begin{itemize}
  \item Namenskonvention für CSS-Klassen
  \item Quellen: \href{https://getbem.com/}{getbem.com}, \href{https://9elements.com/bem-cheat-sheet/}{9elements.com/bem-cheat-sheet}
\end{itemize}



\begin{verbatim}
block-name__element-name--modifier-name
\end{verbatim}


\subsection*{Block}
Standalone entity that is meaningful on its own.\\
(header, container, menu, checkbox, input).


\subsection*{Element}
A part of a block that has no standalone meaning and is semantically tied to its block.\\
(menu item, list item, checkbox caption, header title).

\subsection*{Modifier}
A flag on a block or element. Use them to change appearance or behavior.\\
(disabled, highlighted, checked, fixed, size big, color yellow)

\section*{Beispiele}
\subsection*{Navigation}
\begin{verbatim}
<nav class="main-nav">
  <ul class="main-nav__list">
    <li class="main-nav__item">
      <a href="#" class="main-nav__link">Home</a>
    </li>
    <li class="main-nav__item">
      <a href="#" class="main-nav__link">Work</a>
    </li>
    <li class="main-nav__item">
      <a href="#" class="main-nav__link">About us</a>
    </li>
  </ul>
</nav>  
\end{verbatim}

\subsection*{Liste}
\begin{verbatim}
<ul class="list">
  <li class="list__item">one</li>
  <li class="list__item">two</li>
  <li class="list__item">
    three
    <ul class="list list--second">
      <li class="list__item list__item--second">Point 3.1</li>
      <li class="list__item list__item--second">Point 3.2</li>
      <li class="list__item list__item--second">Point 3.3</li>
    </ul>
  </li>
  <li class="list__item">four</li>
</ul>
\end{verbatim}
\end{document}
