Is it correct to use element and block classnames on the same DOM node as in the example below?
<div class="b-panel">
<div class="b-panel__head"></div>
<div class="b-panel__body"></div>
<!-- b-nav is an individual block but also element of b-panel -->
<div class="b-nav b-panel__nav">
Prev
<span class="b-nav__label">Label</span>
Next
</div>
</div>
Thanks.
Yes, it is a mix:
You can also mix an element with a block using BEMHTML templates of a block. Let's specify that each item element from a goods block has the same formatting as a head block. For this you need to mix each item from a goods block with a box block from j library. [source: a tutorial from bem.info]
In your code:
<div class="b-panel">
<div class="b-nav b-panel__nav"></div>
</div>
The inner DOM element is a mix of the block b-nav and the element b-panel__nav.
Related
https://interactjs.io/docs/action-options/#ignorefrom shows how to use ignoreFrom to disable dragging from certain elements. My movable element look something like:
<article>
<div>
<h1>My Article</h1>
<p>Hello World</p>
</div>
</article>
It could contain any HTML tags within the <div>, not just <h1> and <p>
I want to ignore dragging from any child element except the <div>. I've tried using ignoreFrom: ':not(div)', but that does not work (I'm guessing that the :not pseudo-selector is not supported). The only option I can get to work is to provide a list of all possible HTML tags as the value for the ignoreFrom. So, for this specific example, setting ignoreFrom: 'h1,p' works, but this approach will become unmanageable in the general case. Is there an easier way?
Just started coding with BEM naming methodology. I wondered how to name nested tiny parts.
I attached sample layout below, please take a look.
There are two spans inside h3 and I want them to have different style.
Then shall I just name them like they belong to their parent:
class="en product-lineup__title-en"
class="non-en product-lineup__title-non-en"
or like they belong to their title (but it looks like BEEM...):
class="en product-lineup__title__en"
class="non-en product-lineup__title__non-en"
or just leave it blank then in CSS
.product-lineup__title span:first-child
.product-lineup__title span:nth-child(2)
Which is the best way or do I misunderstand BEM rule in the first place?
BEM is a methodology about reusable blocks. If you see a visual pattern that is repeated in the UI, then you should consider to see it as a block, not an element. Elements are the block details.
For your wireframe, I suggest two blocks: the lineup block is responsible for the global layout:
<ul class="lineup">
<li class="lineup__item"></li>
<li class="lineup__item"></li>
…
</ul>
In each <li>, there is an instance of a product block:
<article class="product">
<img class="product__img">
<h3 class="product__title">…</h3>
<div class="product__text">…</div>
</article>
If you want to keep your current HTML structure, then you have a mix on <li> markups:
<ul class="lineup">
<li class="lineup__item product">
<img class="product__img">
<h3 class="product__title">…</h3>
<div class="product__text">…</div>
</li>
…
</ul>
Here the lineup__item CSS class is responsible for positioning the child block product in the parent block linup. A block should not position by itself (it wouldn't be reusable).
Then, your element product__title has two children en and non-en. With BEM, an element cannot be parent of other elements. But it can nest brother elements. You can do:
<h3 class="product__title">
<span class="product__title-en"></span>
<span class="product__title-non-en"></span>
</h3>
In the BEM tree, title, title-en, title-non-en are all child elements of the product block. It is the light solution.
But maybe you'll realize that this kind of dual titles is a visual pattern used outside the product block, or maybe just for clarity, you can decide to make a dual-title block for that.
<h3 class="product__title dual-title">
<span class="dual-title__en"></span>
<span class="dual-title__non-en"></span>
</h3>
Here the CSS class product__title is responsible for positioning the child block dual-title in the parent block product.
I have implemented inline styles as well as block element styles in ckeditor from configuration. But when I apply wrapper element on multiple elements, it gets applied on each item individually.
e.g
<p class="wrapper">some text here</p>
<ul class="wrapper">list here</ul>
Whereas, I want to have a wrapper element like this:
<div class="wrapper">
element#1
element#2
Elements#3
</div>
Do let me know if it doesn't make sense.
Thanks.
I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
Guys, I'm trying to write xpath or css to find/click on list element "All" based on known span(in this case SNG NAME below). On page, there are different lists Which can contain same list item called as "All". So we have to identify "All" based on span(in this case SNG NAME below)
can someone shed some light on my issue
<html>
<head>
<body>
<div class="grc_selected">
<div class ="lbl_selected">
<span> SNG NAME </span>
</div>
<div id="id1" class="cl1">
<ul id="id_ul">
<li class="tclass" title="[1] All">
<img class="treeIcon" src="1/2/3.gif"/>
<span class="inA">All</span>
</li>
</ul>
</div>
</body>
</head>
</html>
You could use an XPath query like:
//div[span=" SNG NAME "]/following-sibling::div//span[.="All"]
That targets the div which contains the span whose text value is SNG NAME, then moves to the following div (id1) and finally targets the span inside it containing the text All. This makes the assumption that the HTML is fixed (there's currently mismatching div tags) in such a way that the above query structure makes sense (by placing the missing closing div tag between the </ul> and final </div>).