Lets says I am creating a component "Component" and its children or modifier.
BEM style would be
<div class="Component Component--modifier">
<div class="Component__child"></div>
</div>
I'd like write it as this way
<div class="Component Component--modifier">
<div class="_child"></div>
</div>
In CSS, I would strictly write _child class inside Component scope so there isn't any globle _child class.
I wonder what potential risk or cons my style guide would cause?
You can't.
An example:
<div class="MyRoundedBlock MyRoundedBlock--blue">
<div class="_title"></div>
<div class="OtherBlock">
<div class="_title"></div>
</div>
</div>
CSS:
.MyRoundedBlock ._title {
/* This rule applies to your OtherBlock's title too! */
}
Related
Is there some way how to check if sibling's child has some class and stay in current element?
E.g.:
<div>
<div className="element">
<div className="child">
</div>
</div>
<div className="element">
<div className="child expand">
</div>
</div>
<div className="element">
<div className="child">
</div>
</div>
</div>
If element "child" has class "expand" I wanna change e.g color of all elements "element".
Currently the only way to do it with SCSS is with :has(), which as mentioned is not well supported yet. At the time of answering, it's only Firefox, Firefox for Android and Samsung Internet that do not support it (according to MDN).
It would look like this:
.element:has(.expand) {
color: red;
}
You can't do that directly in SCSS because it's a preprocessor language with no access to the DOM. To accomplish this, you would need to use JavaScript.
In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.
How can I style the numbers in the following HTML code independently of each other?
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
You can add ids or another class to each the divs and style those independently.
Well, you have two options. You could add styling attributes to each of the numbers by adding this style="color:red", so that the line will look like this <div class="col-xs-4" style="color:red">. This would turn the color of the text to red. Or you could make a .CSS document and style it by adding id's to each of the div elements like this, id="firstLine" and then putting this in the .CSS document, #firstLine{color:red;}. the # character is used for styling elements by id's and the . character is used to style the elements by class. The .CSS document is the recommended method of styling as it keeps code split up and looking nice and tidy.
This might help you:
UPDATE with Demo
.col-xs-4:nth-child(1)
{
color:red;
}
.col-xs-4:nth-child(2)
{
color:green;
}
.col-xs-4:nth-child(3)
{
color:blue;
}
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
What is the best practice for implementing the bootstrap 3 grid? There are two options, via classes in html and via less mixins.
Using bootstrap classes in html and bootstrap.css (which seems to be the standard):
<div class="container">
<div class="row">
<div class="column-md-6 column-xs-8">
<p>test</p>
</div>
<div class="column-md-6 column-xs-4">
<div class="row">
<div class="column-md-8 column-xs-6">
<p>Another test</p>
</div>
<div class="column-md-4 column-xs-6">
<p>Yet another test</p>
</div>
</div>
</div>
</div>
</div>
Using LESS and bootstrap mixins and appropriate html structure:
<div id="maincontent">
<div id="maincontentarea">
<div id="blogarticles">
<p>test</p>
</div>
<div id="whatsnew">
<div id="whatsnewarea">
<div id="whatsnewheading">
<p>Another test</p>
<div>
<div id="whatsnewlist">
<p>Yet another test</p></div>
<div>
</div>
</div>
</div>
<div>
and the corresponding LESS:
#maincontent{
.container();
#maincontentarea{
.make-row();
#blogarticles{
.make-md-column(6);
.make-xs-column(8);
}
#whatsnew{
.make-md-column(6);
.make-xs-column(4);
#whatsnewarea{
.make-row();
#whatsnewheading{
.make-md-column(8);
}
#whatsnewlist{
.make-xs-column(6);
}
}
}
}
}
It sounds like a nice idea to have a .LESS file simply using the bootstrap mixins to define the structure, but is that not essentially duplicating the element structure in the less file which is already defined in LESS. Which one is more maintainable?
Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.
Using and implementing Bootstrap in a more semantic way won't be always easy:
Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of #Gravy (https://stackoverflow.com/a/18667955/1596547).
Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML
When using Twitter bootstrap's grid system, should every grid column div (with the class span*) have span* class as its only class, like:
<div class="row">
<div class="span4">
<div class="sidebar">...</div>
</div>
<div class="span8">
<div class="content">...</div>
</div>
</div>
Or can we mix span* class with other classes, like:
<div class="row">
<div class="span4 sidebar">
...
</div>
<div class="span8 content">
...
</div>
</div>
.sidebar and .content are CSS rules and not simply for Javascript/CSS rule traversal or used as IDs.
It depends on what those other classes do.
If .sidebar and .content are used exclusively to scope CSS inside those divs, or if they are labels for javascript traversal, then you are probably fine using them.
However, if you have rules attached to these classes that impact layout such as width, height, margin, and so on, you may experience problems.