• Live sample: https://jsfiddle.net/7h3eoogk/

html:

<div class="row">
  <div class="col-6 col-sm-12">
    Left column. 50% on large screens. 100% on smaller screens.
  </div>
  <div class="col-6 col-sm-12 col-right">
    Right column. 50% on large screens. 100% on smaller screens. Has different background for visual difference.
  </div>
</div>

css:

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-6 {
  flex: 0 0 50%;
  background-color: #eee;
}

.col-right {
  background-color: #dde;
}

@media (max-width: 576px) {
  .col-sm-12 {
    flex-basis: 100%;
  }
}

DRY is often misinterpreted as the necessity to never repeat the exact same thing twice. This is impractical and usually counterproductive, and can lead to forced abstractions, over-thought and over-engineered code.Harry Roberts

DRY, SRP, Modularity etc is not a ultimate goal or strict rule. It is just a principle and recommendation.

• https://smacss.com/
• https://maintainablecss.com/chapters/reuse/
• https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
• https://appendto.com/2014/04/oocss/
• https://code.tutsplus.com/tutorials/3-key-software-principles-you-must-understand–net-25161

BEM colors:

• .primary
• .secondary
• .tertiary
• .light
• .dark

BEM code sample:

<div class="c-card">
  <img class="c-card-img" src="http://via.placeholder.com/350x150">
  <div class="c-card-header">
    Featured
  </div>
  <div class="c-card-body">
    <h4 class="c-card-title">Card title</h4>
    <div class="c-card-text">Card additional content.</div>
    <a href="#" class="button button-primary">Link</a>
  </div>
  <div class="c-card-footer">
    Posted 12 days ago
  </div>
</div>

Folder structure:

• components: reusable components. For example: c-pager
• layout: layout styles, like header, footer, sidebar
• pages: context specific styles. For example: contact-us
• utilities: utility helper classes with single function. Often using !important to boost their specificity. For example: u-text-center

Links:

• https://en.bem.info/
• http://getbem.com/
• https://css-tricks.com/bem-101/
• https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
• https://philipwalton.com/articles/side-effects-in-css/
• https://medium.com/@ZeeCoder/a-practical-introduction-to-the-bem-css-methodology-eeef578bac8c
• BEM for beginners
• BEM by example
• MindBEMding – getting your head ’round BEM syntax
• Battling BEM – 5 common problems and how to avoid them
• https://en.bem.info/forum/66/
• https://github.com/getbem/awesome-bem
• https://github.com/sturobson/BEM-resources
• https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

• monkeyuser.com

Real Programmers don’t comment their code. If it was hard to write, it should be hard to understand.

Six Stages of Debugging

1. That can’t happen.
2. That doesn’t happen on my machine.
3. That shouldn’t happen.
4. Why does that happen?
5. Oh, I see.
6. How did that ever work?

https://jsfiddle.net/07x1tek8/1/

Insert javascript file into document dynamically via javascript:

(function () {
	var script = document.createElement('script');
	script.type = 'text/javascript';
    script.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
    document.head.appendChild(script);
	// document.body.appendChild(script);
	
	setTimeout(function(){
		$('div').slideUp(5000);
	}, 5000);
}());

Insert CSS file into document dynamically via javascript:

(function () {
	var styles = document.createElement('link');
	styles.rel = 'stylesheet';
	styles.type = 'text/css';
	styles.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
	document.head.appendChild(styles);
	document.body.classList.add('animated', 'infinite', 'shake');
}());

Try to isolate the issue. Copy the code that you have issues with and paste it into the clean page template.

Can you still reproduce the issue? If no – than you are missing some code from the main template. If you still can reproduce the issue than continue reading.

Now you need to start removing parts that you think are irrelevant. You should remove parts one by one with fairly small pieces of code. Refresh the page after each code remove and check if you still can reproduce the issue.

Can you still reproduce the issue? If yes – try to remove the next piece of code. If no – bring the last removed piece of code (with Ctrl+Z or what ever hot key is in your laptop). Now you found the piece of code where the issue might be. This should give you a clue to locate the issue and ways to fix it.

placeholder.com

html:

<img src="http://via.placeholder.com/350x150">

result:

Holder.js – works offline, uses svg

html:

<img data-src="holder.js/256x113?bg=#b4e6ca&amp;fg=#90b8a1" alt="256x113" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22256%22%20height%3D%22113%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20113%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1623c2041cb%20text%20%7B%20fill%3A%2390b8a1%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A13pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1623c2041cb%22%3E%3Crect%20width%3D%22256%22%20height%3D%22113%22%20fill%3D%22%23b4e6ca%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2294.25833511352539%22%20y%3D%2262.5%22%3E256x113%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">

Output: