I am unsure of the best way to name my BEM blocks, where they require a wrapper.
For example, given the following markup:
<div class="products-list">
<div class="product__item">
<div class="product__item__title">Product 1</div>
<img class="product__item__image" />
</div>
<div class="product__item">
<div class="product__item__title">Product 2</div>
<img class="product__item__image" />
</div>
</div>
I feel that the top wrapper (products-list) is kind of lost.
It's obviously too deep to use something like:
products-list__product__item__image
So, how do we handle wrappers in BEM where the child elements are also wrappers?
With two blocks .product-list and product-item.
<div class="product-list">
<div class="product-list__item product-item">
<div class="product-item__title">Product 1</div>
<img class="product-item__image" />
</div>
<div class="product-list__item product-item">
<div class="product-item__title">Product 2</div>
<img class="product-item__image" />
</div>
</div>
Here the elements .product-list__item share the node with blocks .product-item.
Or, if the CSS rules for your list can be reused in your design, you can rename .product-list to a more generic .list:
<div class="list">
<div class="list__item product-item">
<div class="product-item__title">Product 1</div>
<img class="product-item__image" />
</div>
<div class="list__item product-item">
<div class="product-item__title">Product 2</div>
<img class="product-item__image" />
</div>
</div>
Related
I try to extract all links based on these three conditions:
Must be part of <div data-test="cond1">
Must have a <a href="..." class="cond2">
Must not have a <img src="..." class="cond3">
The result should be "/product/1234".
<div data-test="test1">
<div>
<div data-test="cond1">
Link 1
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-test="test2">
<div>
<div data-test="cond1">
Link 2
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
<img src="bild.jpg" class="cond3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm able to extract the links with the following xpath query.
//div[starts-with(#data-test,"cond")]/a[starts-with(#class,"cond")]/#href
(I know the first part is not really neccessary. But better safe than sorry.)
But I'm still struggling with excluding the links containing an descendant img tag and how to add it to the query above.
This should do what you want:
//div[#data-test="cond1" and not(.//img[#class="cond3"])]
/a[#class="cond2"]
/#href
/product/1234
I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:
My title of my image gallery has disappeared, how do I make the title "My Portfolio" be like in the 2nd file below?
How do I center my source code so that my image gallery is like in the image below (attached)?
I send the source code. And i appreciate you for your help with source code.
https://codepen.io/Quencyjones79/pen/XWYNwxj
index.html
`
<section class="container" id="portfolio">
<div class="main-title">
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
</div>
<p class="port-text">
Here is some of my work that I've done in various programming languages.
</p>
<div class="container_images">
<div class="full-view"></div>
<div class="preview-list">
<ul>
<li>
<input type="radio" id="tab-1" name="gallery-group">
<label for="tab-1">
<div class="tab">
<img
src="img/bandacoldplay.jpeg" />
</div>
</label>
<div class="content">
<img
src="img/bandacoldplay.jpeg" />
</div>
</li>
<li>
<input type="radio" id="tab-2" name="gallery-group">
<label for="tab-2">
<div class="tab">
<img
src="img/mascaraNY.jpg" />
</div>
</label>
<div class="content">
<img
src="img/mascaraNY.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-3" name="gallery-group">
<label for="tab-3">
<div class="tab">
<img
src="img/Dutchplan.jpg" />
</div>
</label>
<div class="content">
<img
src="img/Dutchplan.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-4" name="gallery-group" checked>
<label for="tab-4">
<div class="tab">
<img
src="img/planogeralPonteLima.jpg" />
</div>
</label>
<div class="content">
<img src="img/planogeralPonteLima.jpg" />
</div>
</li>
</ul>
</div>
</div>
</section>
`
(continue in codepen)
<div class="table">
<div class="table-head">
<div class="table-head-title">Ranking Equipos</div>
</div>
<div class="table-body">
<div class="table-body-row active">
<div class="col-key">Mark</div>
<div class="col-value">9233</div>
</div>
<div class="table-body-row">
<div class="col-key">Amanda</div>
<div class="col-value">7216</div>
</div>
<div class="table-body-row">
<div class="col-key">Mark</div>
<div class="col-value">6825</div>
</div>
<div class="table-body-row">
<div class="col-key">Paul</div>
<div class="col-value">6184</div>
</div>
<div class="table-body-row">
<div class="col-key">Amanda</div>
<div class="col-value">5866</div>
</div>
</div>
</div>
This is my HTML and I want to get last child of .table-body.
I tried to use JavaScript like logic and used indexing like this
$lastChild = $node->filter('.table-body .table-body-row')[4]; but it shows error. Cannot use object of type "Symfony\Component\DomCrawler\Crawler" as array
I was stuck in similar situation recently and I resolve this by using last() method. Syntax is here: $node->filter('.table-body .table-body-row')->last();
Image below is the output of my code
Are these names correct under BEM methodology?
<div class="container">
<div class="container__button-row--1">
<div class="button-row__button--first"></div>
<div class="button-row__button"></div>
<div class="button-row__button"></div>
...
<div class="button-row__button--last"></div>
</div>
<div class="container__button-row--2">
...
</div>
</div>
Given the sample code in your question I'd suggest the following. But I would also point out that container is a bad name for a component/Block since it really general and does not indicate the purpose of the Block.
For modifiers you should use both the element and the modifier in the class attribute e.g. block__element block__element--modifier
<div class="container">
<div class="container__button-row container__button-row--1">
<div class="container__button container__button--first"></div>
<div class="container__button"></div>
<div class="container__button"></div>
...
<div class="container__button container__button--last"></div>
</div>
<div class="container__button-row container__button-row--2">
...
</div>
</div>
Below is the code that I want to convert to div.
I tried html2canvas but that did not worked somehow.
The div's uppelayer middlerlayer and bottomlayer are one above other making 3 layers.
<div id="container">
<div id="bottomLayer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSivV5yARSKfCsfaFmdo1Iwc7muglbp92befBPfS7XxglZ0XrpU" id="preview2" />
</div>
<div id="mediumLayer">
<img src="http://f0.pepst.com/c/B7F2F3/402463/ssc3/home/038/amazing.beauties/diana_penty_02_12x92.jpg_480_480_0_64000_0_1_0.jpg" id="preview" />
</div>
<div id="main">
<img src="http://f0.pepst.com/c/B7F2F3/402463/ssc3/home/038/amazing.beauties/diana_penty_02_12x92.jpg_480_480_0_64000_0_1_0.jpg" id="jcrop_target" />
</div>
<div id="upperlayer"><canvas id="canvas2"></canvas></div>
</div>