What Is Vanilla CSS and Why

What is the difference between vanilla css and modular css

There is no difference between them rather than how you structure your css.
Think of modular css as a style of writing vanilla (i.e. normal) css.

In modular CSS, the CSS is grouped by modules. Robin Rendle wrote a good article about these css modules.

It's merely a set of guidelines, on how to approach your css architecture and name your classes.

The reasoning is pretty simple, if you use smacss, for instance, anyone that joins your team can learn the smacss principles and start working on all of your projects.

Have a look at BEM, SMACSS, ITCSS, or OOCSS.

What is a vanilla web interface?

The term "vanilla" usually refers to something that's plain and unadorned (from vanilla ice-cream) or perhaps simple (as in basic), so they're asking you to look into a "simple web interface" without any unnecessary complications.

Vanilla CSS in React?

I'd say pick one that suits you best.

I used both styled components and vanilla CSS(with BEM) and I think that both are worth to try, but there are some differences.

For example, if you want to use some variables across all components (like theme etc.) than in styled components you need to use ThemeProvider and than consume it with function like:

const FancyDiv = styled.div`
    background: ${props => props.theme.colors.main)``;

But in vanilla you need to import css file in every components css file,
for example in scss:

// src/components/fancyDiv/styles.scss

@import '../../styles/settings.scss';

.fancyDiv {
    background: $main-color;
}

Another difference comes when you want to change style of element based on props/state etc.
Lets consider an example that we want to style a link in the navigation based on state which tells if link is active or not.

const [isActive, setIsActive] = useState(false);

With styled components

const FancyLink = styled.a`
    color: ${props => props.isActive ? 'red' : 'green'}`;

<FancyLink href="#aboutme" isActive={isActive}>About me</FancyLink>

With VanillaCSS

.nav__link--active {
    color: 'red';
}

<a href="#aboutme" className=`nav-link ${isActive ? 'nav__link--active' : ''}`>About me</a>

As you can see both of them will fit most of use cases but in a bit different way.

Styling in React using var vs vanilla css

Issue is in this line:

var backgroundStyle = React.createClass({

Reason is simple one, style accept an object and React.CreateClass returns and html part not an object, you missed that part in the mentioned link, where they defined the style in a separate object instead of as a react component and used that inside return. check the link again, Run the below snippet, it will work:

class Test extends React.Component { render(){  var backgroundStyle = {        padding: 10,        margin: 10,        backgroundColor: "#ffde00",        color: "#333",        display: "inline-block",        fontFamily: "monospace",        fontSize: "32",        textAlign: "center"      };           return (        <div style={backgroundStyle}>Hi there</div>      );    }}

ReactDOM.render(<Test/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

Why the CSS of a vanilla JS project getting overwritten by React JS compiler?

TL;DR: Bootstrap included in one build but not the other was the cause of the difference.

From my comment on the question:

Looks like you're loading Bootstrap (a mostly CSS framework) in the React build but not in the vanilla build. This could be because you've included it only in your react build, or because it's failing to load in your vanilla build, or something else.

And asker's response:

It seems the fontawesome icon I used suggested me to include certain links in index.html head that includes bootstrap and causes the clash. In the vanilla project no bootstrap links are used.

Footer is sticky, until I expand my accordion (html, css, vanilla js)

You could nest your footer inside the overall container if you want to keep the flow with the accordions and then use either position: fixed or position: sticky depending on your intention. Let me know how this works for you.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {

  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 2%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content {
  display: none;
}

.active,
.collapsible:hover {
  background-color: #555;
}

#footerContainer {
  position: aboslute;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="projectsContainer" id="projectsContainer">

  <button type="button" class="collapsible">Front End</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>

      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>

  <button type="button" class="collapsible">Back End</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>
      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>

  <button type="button" class="collapsible">Full Stack</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>
      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>
                   
                 <footer id = "footerContainer">
                    <button id = "githubBtn"><img class= "socials"></button> 
                    <button id = "linkedinBtn"><img class= "socials"></button> 
                    <button id = "instagramBtn"><img class= "socials"></button> 
                  
                  </footer>
  </div>

Responsive application with vanilla css

Congrats on building your first app!

1) When posting questions on Stackoverflow, it is always helpful to provide either an example of your code directly in your post, and/or to include a link to a running version of your code on a site like jsfiddle.net, JSbin.com, codepen.io, etc.

2) For most responsive apps, there are almost always a couple of widths where things do not look exactly perfect. These points are usually right before/after a breakpoint transition.

3) In general, you don't want to use position relative or absolute for handling page layout. There are a number of situations where they can be helpful, but I think its safe to say that they should never be the first thing you reach for when trying to create the layout of a page.

4) Right now, the best way to handle page layout with regular CSS -- no library -- is probably Flexbox because of its versatility and adoption of all major browsers. I highly recommend you learn it and become familiar with it.

5) There is nothing wrong with using a library for general page structure stuff. Because of its use with a ton of companies, I highly recommend you become familiar with Bootstrap -- specifically its grid framework. If you do go this route, read the rules for certain things very carefully. For example, I cannot tell you how many people have their apps look screwed up because they don't follow the cardinal rule of Bootstrap's grid system: The only children of a row should be col. Say that 10 times.

Best of luck to you!