New CSS class won't apply during development
<p>I am developing a static website in a local environment with gulp, sass, atom as my text editor and an up-to-date Chrome.</p>

<p>For some reason, sometimes when I create a new class, my browser will constantly refuse to recognise it.</p>

<p>Most recent example:</p>

<pre><code>.projects {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 10px solid red;
    width: 1000px;
    height: 1000px;
}

.project {
    width: 400px;
    height: 200px;
    border: 1px solid white;
}
</code></pre>

<p>You can see it in the markup, right there:</p>

<p><a href="https://i.stack.imgur.com/kELrB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kELrB.png" alt="DOM view of the code"></a></p>

<p>If I check my page sources, it's there:</p>

<p><a href="https://i.stack.imgur.com/imR53.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/imR53.png" alt="Sources view of the CSS"></a></p>

<p>The child element, <code>.project</code>, is getting its CSS just fine:
<a href="https://i.stack.imgur.com/jhfHY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jhfHY.png" alt="project CSS gets there correctly"></a></p>

<p>But the <code>.projects</code> element absolutely refuses to apply its styling:
<a href="https://i.stack.imgur.com/rbhvd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rbhvd.png" alt="No styling for me"></a></p>

<h2>I have tried:</h2>

<ol>
<li>Restarting gulp</li>
<li>Restarting Chrome</li>
<li>Renaming the class (still doesn't work) </li>
<li>Applying a different class just to check (applies the styling with no problem)</li>
<li>Using it on a different page, same CSS files access (no luck)</li>
<li>Mainly, everything works just as expected, but that element in particular will not get any new styles regardless of what I do.</li>
</ol>

<h2>Full disclaimer</h2>

<p>I've been working in this field for years and this just doesn't make sense. I believe the fault might be related to some kind of caching, live reloading with BrowserSync or something like that.</p>

<p>Attached is my <code>gulpfile.js</code> as well, if it sheds any light:</p>

<pre><code>const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create();

gulp.task('sass', function(){
  return gulp.src('app/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream())
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './app'
    },
  })
})


gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/sass/*.scss', ['sass']);
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/**/*.html', browserSync.reload);
  gulp.watch('app/about-us/index.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
  gulp.watch('app/css/*.css', browserSync.reload);
});
</code></pre>