How to avoid overriding elements with other CSS files/classes?

Question

so I have two different CSS codes (separate things) that both have svg and path elements in them. This is a problem since they both override each other. Is there a way to rename either one of the code differently, so that both CSS codes do not override each other?

This is my code for preloader that mostly have svg and path elements (renaming this code would just be hectic but I will just show incase):

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');



.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 2s linear infinite;
}

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}
#preloader {
  position: absolute;
  margin: auto;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.z-logo svg {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  display: flex;
  width: 50%;
}

.z-logo::before {
  content: "";
    top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  background: black;
  position: absolute;
  display: inline-flex;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

This is the code for skills section:

.services .icon-box {
  text-align: center;
  padding: 70px 20px 80px 20px;
  transition: all ease-in-out 0.3s;
  background: #fff;
  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05);
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .icon-box .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.services .icon-box .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .icon-box .icon svg path {
  transition: 0.5s;
  fill: #f5f5f5;
}

.services .icon-box h4 {
  font-weight: 600;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .icon-box h4 a {
  color: #45505b;
  transition: ease-in-out 0.3s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .icon-box:hover {
  border-color: #fff;
  box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);
}

.services .iconbox-blue i {
  color: #47aeff;
}

.services .iconbox-blue:hover .icon i {
  color: #fff;
}

.services .iconbox-blue:hover .icon path {
  fill: #47aeff;
}

.services .iconbox-orange i {
  color:rgb(92, 19, 160);
}

.services .iconbox-orange:hover .icon i {
  color: #fff;
}

.services .iconbox-orange:hover .icon path {
  fill: #4a2fc4;
}

.services .iconbox-pink i {
  color: #e80368;
}

.services .iconbox-pink:hover .icon i {
  color: #fff;
}

.services .iconbox-pink:hover .icon path {
  fill: #e80368;
}

.services .iconbox-yellow i {
  color: #ffbb2c;
}

.services .iconbox-yellow:hover .icon i {
  color: #fff;
}

.services .iconbox-yellow:hover .icon path {
  fill: #ffbb2c;
}

.services .iconbox-red i {
  color: #ff5828;
}

.services .iconbox-red:hover .icon i {
  color: #fff;
}

.services .iconbox-red:hover .icon path {
  fill: #ff5828;
}

.services .iconbox-teal i {
  color: #11dbcf;
}

.services .iconbox-teal:hover .icon i {
  color: #fff;
}

.services .iconbox-teal:hover .icon path {
  fill: #11dbcf;
}


      

        
          Skills
        

        

          
            
              
                
                
              
              Java
              Java is my main programming language to use, as I am proficient in it. I mainly use this language for my side projects (check this website frequently to see a portfolio of my projects!) I have an extensive knowledge in this language, which is why I started to post tutorial videos on YT for anyone who would like to learn it! 
            
          

          
            
              
                
                
              
              C++
              Currently learning C++ through CodeAcademy and implementing the knowledge onto small and basic side-projects. I hope to use this as on of my main programming languages, later on!
            
          

          
            
              
                
                
              
              HTML/CSS/Javascript
              Self-taught HTML/CSS/JS as I thought it would be a fun experience to try web development. I am now at the stage of designing websites from scratch and using it for my side-projects. My first ever website using HTML/CSS/JS when I was a complete beginner can be viewed here
            
          

          
            
              
                
                
              
              Growth Mindset
              I have always found myself growing outside my comfort zone and taking on new challenges that facilitate my personal growth. This is skill that I continue to work on, as you can never fully equip this skill but strengthen it, each time.
            
          

           
            
              
                
                
              
              Opportunity Seeker
              If you are on the path to do something incredible either for your own benefit or the community as a whole, you will find yourself seeking opportunities whenever you possibly can. Seeking an opportunity becomes a part of you and you find yourself instinctively taking on challenges to make a postive impact on your world
            
          
           
            
              
                
                
              
              Leadership
              I take upon a leadership role whenever I get a chance such as school clubs or other organizatons, where I have the role of organizing events/activities while also contributing to the organizational success.
            
          

           
            
              
                
                
              
              Interpersonal
              This is a skill I developed through my work experience and through my time working for welfare organizations that allowed me to interact with customers on a daily basis. Resolving customer complaints, working at a cashier, and in-store customer service are all some of the key roles that allowed me to strengthen my interpersonal skills
            
          

           
            
              
                
                
              
              Street Smart
              From interacting with people, and developing positive relationships with them, I am able to further strenghthen this skill, as it only develops through having different perspectives of life. For instance, being able to withstand tough situations or knowing what others may be thinking in a particular scenario are all examples of street smarts.

This skills section code may look very long, but this code's CSS only has SVG and path only like 2 times, and renaming this would be easier than renaming all the instances of SVG and path in the above code. Both of the CSS files or codes collide with each other, as both have SVG and path that is being used. I tried renaming it but it does not work, as I don't get an output, some of the elements just disappear.

Any suggesstions?

user2560539 · Accepted Answer

In your code snippets the only thing that seems to be not very specific as CSS rule and that could cause a conflict with other rules regarding svg or path is this one:

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

which could be written, in order not to conflict other CSS rules as such:

.svg-file.z-logo svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

How to avoid overriding elements with other CSS files/classes?

Answers (1)

Related Questions