web design conflicts

F

firstnamelastname

Regular Member
Joined
Jun 20, 2015
Messages
410
Reaction score
420
hi guys
I don't know much web design. I know how to copy and paste code and can do basic things like padding and text-align.

my question is, when you copy and paste code from different sources, how do you know whether or not they will conflict?

Example: let's say you copy and paste a header section with slider functionality from codepen.io into your website
and then you copy and paste an accordion type FAQ section from stackoverflow into you website

how do you know there won't be:
css conflicts
javascript conflicts
other conflicts that i don't think about because i am not an expert
 
Advertise on BHW
Just watch out for overwriting class names, function names, element id's, etc. Change were necessary. It's not quite rocket science, and if you can cut + paste and make something work, now it's time to learn to adapt it to suit your needs.

Dev tools are your friend here. Right click, inspect element, and you're on your way.
 
Unfortunately, I'd recommend to understand CSS basics and which CSS is loaded on the specific page if you want to answer your question. If you don't have the budget for a developer to review what you're doing, learn what CSS selectors are, it'll take you half an hour. Also inspecting in chrome/firefox so you can find/search.

Else, it would be more common for CSS than Javascript conflicts.
If I understand well, your conflict might come from copy-pasting from codepen and the CSS selectors (such as a classname or ID) already exist on your website page.
 
Last edited:
Sebastian Rooks said:
Just watch out for overwriting class names, function names, element id's, etc. Change were necessary. It's not quite rocket science, and if you can cut + paste and make something work, now it's time to learn to adapt it to suit your needs.

Dev tools are your friend here. Right click, inspect element, and you're on your way.
Click to expand...

if I look at a website in different browsers and it looks fine, does that mean I am safe and no checking is needed?
 
firstnamelastname said:
because internet explorer is very unforgiving regarding errors?
Click to expand...

Compatibility. If CSS works in one browser but not another, it means a feature is incompatible. Not unforgiving, more like in web development (if I'm being honest) we shrug over compatibility of Internet Explorer/Edge/old browsers.
 
While getting started, it's often a good idea to work within frameworks. For example, rather than copying random snippets from codepen, restrict yourself to only examples built on the latest bootstrap version. When designs are built with the same framework, there can be fewer conflicts, but more importantly, conflicts that arise are often simpler to resolve.
 
The number one thing you should be avoiding is *, body, html selectors. Those are the culprits most of the times. With that, you should learn to copy concepts instead of code. For example, if you like a widget in codepen - see how it is done instead of copying the thing. Then implement it with your own selectors. That's easier said than done, but it ultimately teaches you how css works with html.
 
I know this is older post but it might help someone
-include the css file just before the </head> tag, the css file you want to include should be the last because if there are classes or some other things to be overwritten then the last css file will be used.
-learn about specificity, there is priority order in css. In short suppose if there are 1 class 1 id to an element then which style should be applied ? Just search it on google.
-learn to use chrome developer console and inspect element as others have mentioned.
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top