Make sure CSS does not affect all pages with a parent class

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



Make sure CSS does not affect all pages with a parent class



I got the adminstrator of a webpage that consist of around 20.000 pages. All the pages are using part of the bootstrap components.



I am making and designing some new pages. Therefore I would like to be sure, that i do not change anything global with my CSS. An example can be the row, where I have to make a padding on this one.



I am posting an example of some CSS I am using on the mainpage. In this code the two classes will change things gloabally:


.row [class*="col-"]
padding-right: 5px;
padding-left: 5px;


.row
margin-left: -5px;
margin-right: -5px;



So is it possible to make some kind of prefix on all my classes? Fx a parents class called .mk , and then all my classes are going inside this class.


.mk



I hope the question make sence - otherwise please tell me that it is unclear where I am going.




#front .row
padding-bottom: 0px!important;

body
background-color: #f5f5f5;


/* Set width between grid elements */

.small-padding.top
padding-top: 10px;


.small-padding.bottom
padding-bottom: 10px;


.small-padding.left
padding-left: 5px;


.small-padding.right
padding-right: 5px;


.margin_bottom
margin-bottom: 10px;


.row [class*="col-"]
padding-right: 5px;
padding-left: 5px;


.row
margin-left: -5px;
margin-right: -5px;


.img-responsive
height: 100%;


/* Position of buttons/text in a single grid element */

.inner-wrapper
background: none;


.centered
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);


.bottom-right
position: absolute;
bottom: 8px;
right: 16px;


.bottom-left
position: absolute;
bottom: 2%;
left: 6%;

/* Position text on full width banner */
.header-container
color: white;
margin: 0 5%;

.banner-text
position: absolute;
bottom: 16%;
left: 6%;


/* Color on text */

.dark-font
color: #333;


.light-font
color: #fff;
text-transform: uppercase;

.blue-font
color: #00a9ff;


/* Set full width on columns */

@media (max-width: 768px)
.img-responsive
width: 100%;
height: auto;

/* Maybe delete btn-success: */
.btn-success
width: fit-content;



@media (max-width: 991px)
h3
font-size: 1.2em;


.image-overlay
position:relative;

.overlay
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;

.image-overlay:hover .overlay
opacity:1;

.overlayFade
background: rgba(27, 27, 27, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 15px;
padding-left: 35px;
padding-right: 35px;





There are multiple approaches but a common one is to wrap all your HTML elements in a container with your unique id (i.e. <div id="mkContainer">...</div> - then all your CSS will need to have that specified (i.e. #mkContainer .dark-font... ) if you defined it, it will override the parent .dark-font but not globally, only on your new pages (with the new container)
– ochi
Aug 7 at 17:28


id


<div id="mkContainer">...</div>


#mkContainer .dark-font...


.dark-font




2 Answers
2



So is it possible to make some kind of prefix on all my classes?



Why not?



Just add some base class to your pages, and create stylesheets that fall under it.


<style>
.mk .row [class*="col-"]
padding-right: 5px;
padding-left: 5px;


.mk .row
margin-left: -5px;
margin-right: -5px;

</style>



And add your class somewhere close to the body tag, or wherever your changes are different than the site template.


<body class="mk">
<!-- Your code here -->
</body>



Doing this will allow you to import all the stylesheets so that you can build on top of them and override with your own styles.





Thank you for your answer. So I have to set mk on all my classes if i define <body class="mk"> <!-- Your code here --> </body>?
– MK-DK
Aug 7 at 17:32


mk


<body class="mk"> <!-- Your code here --> </body>





Just need to set class="mk" on a common parent container element that has your fixes.
– Sunny Patel
Aug 7 at 20:09


class="mk"



Yes, you can add prefixes, but I guess instead of overwriting the bootstrap classes by nesting inside your own class name is also not a good idea. i.e.,


.custom-class .row
// Changing margins and padding here



Instead, you can make your own helper classes for spacing and positioning purposes or if you are already using Bootstrap v4, In the utility section they have provided a huge bundle of spacing and positioning classes .px-* .p-* .mx-* .p-* etc you can take a look at them here.


helper


.px-*


.p-*


.mx-*


.p-*



Or simply make your own classes for different values according to your needs. But I'll still suggest don't overwrite them.


classes





But no matter what, if I touch the row class I am messing with Bootstrap right, because that is a core class from bootstrap? Unfortunately I am forced to work with Bootstrap 3. So take your example, should it look like this: .mk .row // Changing margins and padding here and the html: <div class="mk row"><div class="col-sm-12">text</div></div>. But would I still get the responsive grid Bootstrap is using with the method?
– MK-DK
Aug 7 at 17:36


row


.mk .row // Changing margins and padding here


<div class="mk row"





Using a custom class say .pad-left-10 gives padding-left of 10 units(px, if the unit you are using is pixels). for all the screen widths. To keep it responsive you can use rem units or you need to write media query CSS for your custom class also. Direct messing up with .row is not a good idea.
– Yashwardhan Pauranik
Aug 7 at 17:43


.pad-left-10


(px, if the unit you are using is pixels)


rem


.row






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

make 2 or more post in bootsrap

Image
Clash Royale CLAN TAG #URR8PPP make 2 or more post in bootsrap I am making a CMS and I want to add two or more content post in every row, I can made one post in one columns, please see my code below. I am using PHP , HTML and bootstrap . CMS PHP HTML bootstrap How can I add two or more content post in every row? Code: <div class="container"> <div class="row"> <!-- Post Content Column --> <div class="col-lg-4 border border-dark rounded"> <?php $query = "SELECT * FROM POSTS"; $run_query_post = mysqli_query($connection, $query); while ($row = mysqli_fetch_assoc($run_query_post)) $post_id = $row['post_id']; $post_title = $row['post_title']; $post_author = $row['post_author']; $post_date = $row['post_date']; $post_image = $row['post_image']; $post_content = substr($row['post_content'], 0, 50); $post_status = $row['post_status']; if ($post_status !=...
Read more

Store custom data using WC_Cart add_to_cart() method in Woocommerce 3

Image
Clash Royale CLAN TAG #URR8PPP Store custom data using WC_Cart add_to_cart() method in Woocommerce 3 I am creating a membership site and totally created static pages for each Membership plans (have only 3 plans). However, I have added products for each plan and when I hit SELECT PLAN button I redirect to some custom form where I ask users range of info we are going to use to fulfil the plan (same as sneakertub.com). I have written code into the PHP page which will handle SUBMIT action of the form. This PHP file, infopage.php , will process POST data I sent via POST call and stores these all data into WC session. infopage.php $customer_name = $_POST["customer_name"]; $customer_email = $_POST["customer_email"]; $customer_sex = $_POST["customer_sex"]; $customer_age = $_POST["customer_age"]; $product_id = $_POST["product_id"]; global $wp_session; $data = array( 'customer_name' => $customer_name, 'customer_email' =...
Read more

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more