A better custom comment walker for WordPress and 2 threaded replies. Includes support for BEM, HTML5, Microdata, Font Awesome

walker.comments.php

<?php
class Better_Comments_Walker extends Walker_Comment {
		function __construct() {
			echo '<section class="comments__list">';
		}

		public function start_lvl( &$output, $depth = 0, $args = array() ) {
			$GLOBALS['comment_depth'] = $depth + 1;

			$output .= '<section class="comments__list__children">' . "\n";
		}

		public function end_lvl( &$output, $depth = 0, $args = array() ) {
			$GLOBALS['comment_depth'] = $depth + 1;

			$output .= '</section>' . "\n";
		}

		public function end_el( &$output, $comment, $depth = 0, $args = array() ) {
			if ( ! empty( $args['end-callback'] ) ) {
				ob_start();
				call_user_func( $args['end-callback'], $comment, $args, $depth );
				$output .= ob_get_clean();
				return;
			}

			$output .= '</article>' . "\n";
		}

		protected function ping( $comment, $depth, $args ) {
			if(! empty( $args['use-icons'] ) && $args['use-icons'] === true) {
				$edit_text = '<i class="fas fa-pencil-alt"></i>';
			} else {
				$edit_text = 'Edit';
			}
		?>
			<article id="comment-<?php comment_ID(); ?>" <?php comment_class( '', $comment ); ?> itemprop="comment" itemscope itemtype="http://schema.org/Comment">
				<div class="comment__body" itemprop="text">
					<?php _e( 'Pingback:' ); ?> <?php comment_author_link( $comment ); ?> <?php edit_comment_link( $edit_text, '<span class="edit-link">', '</span>' ); ?>
				</div>
			<?php
		}

		protected function html5_comment( $comment, $depth, $args ) {
				$commenter = wp_get_current_commenter();

				if(! empty( $args['use-icons'] ) && $args['use-icons'] === true) {
					$edit_text = '<i class="fas fa-pencil-alt"></i>';
					$reply_text = '<i class="fas fa-reply"></i>';
				} else {
					$edit_text = 'Edit';
					$reply_text = 'Reply';
				}

				if ( $commenter['comment_author_email'] ) {
					$moderation_note = __( 'Your comment is awaiting moderation.' );
				} else {
					$moderation_note = __( 'Your comment is awaiting moderation. Your comment will be publicly visible if it is approved.' );
				}
			?>
			<article id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?> itemprop="comment" itemscope itemtype="http://schema.org/Comment">
				<?php if ( 0 != $args['avatar_size'] ) {
					echo '<figure class="comment__avatar">' . get_avatar( $comment, $args['avatar_size'] ) . '</figure>';
				} ?>
				<div class="comment__body" role="complementary">
					<header class="comment__header">
						<div class="comment__author vcard">
							<?php printf( __( '%s' ), sprintf( '<span class="comment__author__name fn" itemprop="author">%s</span>', get_comment_author_link( $comment ) ) ); ?>
						</div>

						<div class="comment__metadata">
							<span class="comment__date">
								<a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>" class="comment__date__link" itemprop="url">
									<time class="comment__date__time" datetime="<?php comment_time( 'c' ); ?>" itemprop="datePublished">
										<?php printf( __( '%1$s' ), get_comment_date( '', $comment ) ); ?>
									</time>
								</a>
							</span>
							<?php edit_comment_link( $edit_text, '<div class="comment__link edit"><span class="edit-link">', '</span></div>' ); ?>
							<?php
								comment_reply_link(
									array_merge(
										$args,
										array(
											'reply_text'=> $reply_text,
											'depth'     => $depth,
											'max_depth' => $args['max_depth'],
											'before'    => '<div class="comment__link reply"><span class="reply-link">',
											'after'     => '</span></div>',
										)
									)
								);
							?>
						</div>
					</header>

					<div class="comment__content" itemprop="text">
						<?php comment_text(); ?>
					</div>

					<?php if ( '0' == $comment->comment_approved ) : ?>
						<div class="comment__waiting"><p><?php echo $moderation_note; ?></p></div>
					<?php endif; ?>

				</div>
			<?php
		}

		function __destruct() {
			echo '</section>';
		}
}

walker.comments.scss

%inline-block {
	display: inline-block;
}

%inline-top {
	@extend %inline-block;
	vertical-align: top;
}

%inline-middle {
	@extend %inline-block;
	vertical-align: middle;
}

%comments-before {
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 32px;
		width: 2px;
		height: 100%;
		background: #bcbcbc;
	}
}

%comments-after {
	&:after {
		content: '';
		position: absolute;
		background: #bcbcbc;
		left: 24px;
		bottom: 0;
		width: 13px;
		height: 13px;
		border: 2px solid #e9e9e9;
		border-radius: 50%;
	}
}

%box-shadow {
  box-shadow: 0 2px 3px rgba(#000, 0.3);
}

.comments {
	text-align: left;
	background: #e9e9e9;
	padding: 1em;

	&__list {
		position: relative;
		z-index: 1;
		padding-bottom: 20px;
		margin-top: 30px;
		@extend %comments-before;
		@extend %comments-after;

		&__children {
			margin-top: 0;

			.comment {
				margin-top: 20px;
				margin-left: 8px;

				&__avatar {
					width: 50px;
					height: 50px;
				}
			}

			& & {
				margin-left: -8px;
				@extend %comments-before;
				@extend %comments-after;

				&:before {
					left: 25px;
				}

				&:after {
					left: 19px;
					width: 9px;
					height: 9px;
				}

				&:before,
				&:after {
					display: none;
				}
			}
		}

		& + .comment-respond {
			margin: -10px 0 0;

			&:before {
				content: '';
				position: absolute;
				z-index: 2;
				left: 20px;
				top: -11px;
				width: 17px;
				height: 17px;
				border: 2px solid;
				border-color: transparent #bcbcbc #bcbcbc transparent;
				border-radius: 50%;
				transform: rotate(45deg);
			}
		}
	}
}

.comment {
	position: relative;
	z-index: 1;
	display: block;
	margin-bottom: 20px;

	&__avatar {
		position: relative;
		@extend %inline-top;
		z-index: 99;
		width: 65px;
		height: 65px;
		border: 3px solid #fff;
		@extend %box-shadow;

		img {
			width: 100%;
			height: 100%;
		}
	}

	&__body {
		position: relative;
		@extend %inline-top;
		width: calc(100% - 84px);
		background: #fff;
		@extend %box-shadow;
		margin-left: 15px;

		&:before,
		&:after {
			content: '';
			position: absolute;
			display: block;
			top: 8px;
			left: -12px;
			height: 0;
			width: 0;
			border: solid transparent #fff;
			border-width: 10px 12px 10px 0;
		}

		&:before {
			border-width: 11px 13px 11px 0;
			border-color: transparent rgba(#000, 0.1);
			left: -14px;
		}
	}

	&__header {
		display: flex;
		font-size: 14px;
		align-items: center;
		border-bottom: 1px solid #e9e9e9;
		padding: 8px 16px;
	}

	&__author {
		display: flex;
		font-weight: bold;
		padding-right: 16px;

		.bypostauthor &__name {
			&:after {
				content: 'author';
				position: relative;
				top: -1px;
				font-size: 11px;
				color: #fff;
				text-transform: uppercase;
				background: #FFC107;
				border-radius: 3px;
				padding: 3px 5px 2px;
				margin: 0 0 0 8px;
			}
		}
	}

	&__metadata {
		display: flex;
		flex: 1;
		justify-content: stretch;
	}

	&__date {
		@extend %inline-middle;

		&__link {
			color: #bcbcbc;
		}
	}

	&__link {
		@extend %inline-middle;
		margin-left: auto;

		& ~ & {
			margin-left: 8px;
		}
	}

	&__content {
		padding: 16px 16px 0;
	}

	&__waiting {
		font-size: 12px;
		font-style: italic;
		color: #f44336;
		padding: 0 16px;
	}

	p {
		padding: 0 0 16px;
		margin: 0;
	}
}

.pingback {
	position: relative;
	margin: 0 0 20px 40px;
	@extend %comments-after;

	&:after {
		top: 13px;
		left: -12px;
		width: 6px;
		height: 6px;
		background: #e9e9e9;
		border-color: #bcbcbc;
	}

	.comment {
		&__avatar {
			display: none;
		}

		&__body {
			width: calc(100% - 15px);
			background: #f7f7f7;
			padding: 10px;

			&:after {
				border-color: transparent #f7f7f7;
			}
		}
	}

	.edit-link {
		float: right;
	}
}

.comment-respond {
	position: relative;
	background: #f7f7f7;
	border: 2px solid #bcbcbc;
	@extend %box-shadow;
	padding: 16px;

	h3 {
		padding-top: 0;
		margin-top: 0;
	}
}

@media only screen (min-width: 48em) {
	.comments {
		padding: 3em;

		&__list {
			&__children {
				margin-top: 0;

				.comment {
					margin-left: 84px;

					&:before {
						content: '';
						position: absolute;
						top: 25px;
						left: -51px;
						width: 51px;
						height: 2px;
						background: #bcbcbc;
					}
				}

				& & {
					margin-left: 0;

					&:before,
					&:after {
						display: block;
					}

					.comment {
						margin-left: 69px;

						&:before {
							left: -42px;
							width: 42px;
						}
					}
				}
			}
		}
	}
}