Usually when I have a div, I use the id attribute to uniquely identify an element.
Ex:
<div id="F123" class="sidebar-item">
My first item goes here
</div>
Now, I need a double 'key' for my div element: a 'slug' attribute and a 'category' attribute.
E.g.:
<div slug="my-first-item" category="techno" class="sidebar-item">
My first item goes here
</div>
The compilator warns me that these attributes are not valid. What is the best way to have a double key on a div? I'm pretty sure there are various ways to proceed but I'm curious about the best way?
<div data-slug="my-first-item" data-category="techno" class="sidebar-item">
My first item goes here
</div>
New HTML data attributes. Why do think you need it if I may ask?
HTML5 allows you to user data-[info].
<div data-slug="my-first-item"></div>
https://developer.mozilla.org/en/HTML/Global_attributes
One way to do this would be to use a class and an id. An element can have any number of classes, so you can create a class for each category (with no styles), and then use the id to be more specific (although each id will still have to be unique, even across classes).
Another alternative is to have each id be of the form id="<category>_<slug>", and find ids that start with the category to get all the elements in a category.
I don't know what or how you are going to process the date but this is my idea:
<div id="name['slug_value']['category_value']" class="sidebar-item">
My first item goes here
</div>
Which translates to:
<div id="name['my-first-item']['techno']" class="sidebar-item">
My first item goes here
</div>
But like the first answer I'm curious about why do you need to do this.
Related
From the reading I've done so far I don't think it's possible but in the off chance it is, here goes:
Given the following overly simplified HTML (based on HTML generated from a CMS, so no real control over it)
<div class="random">
<div class="random"> <-- This is the one I want
<div class="random">
<div class="random">
<span class="random">
<input id="experiment-randomnumbers-textinput-2">
</span>
</div>
</div>
</div>
</div>
I have hacked together the following XPath expression to get the node that I want:
//input[contains(#id,'experiments') and contains(#id,'textinput-2')]/parent::span/parent::div/parent::div/parent::div
The question is, is there a neater way of doing this? I'm assuming it can't be done in CSS?
Cheers
Rob
Let BASE_XPATH = //input[contains(#id,'experiments') and contains(#id,'textinput-2')].
Then, if the target is four ancestors up, and you don't care about the ancestor elements' names:
BASE_XPATH/../../../..
If there's a unique condition (in elided parts of your markup) among ancestors:
BASE_XPATH/ancestor::*[ UNIQUE_PREDICATE ]
For example:
<div class="menu">
<div class="menu__item">
<div class="menu__item-title">
</div>
</div>
</div>
There's some solution like menu__title.
But if menu has its own title, then how to recognize menu's title and menu item's title?
The main difference is that block__element__element is not a valid BEM selector. The markup you showed in your question is the CORRECT way of naming your elements.
Create a block
If a section of code might be reused and it doesn't depend on other
page components being implemented.
Create an element
If a section of code can't be used separately without the parent
entity (the block).
The exception is elements that must be divided into smaller parts –
subelements – in order to simplify development. In the BEM
methodology, you can't create elements of elements. In a case like
this, instead of creating an element, you need to create a service
block.
More info in the official documentation: https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element
If you want to have Menu title, the markup should look something like this:
<div class="menu">
<h2 class="menu__title">..</h2>
<div class="menu__item">
<div class="menu__item-title">
</div>
</div>
</div>
BEM gets a bit tricky when you have "children" of an element. But either use the menu__item-title naming convention or rethink your element, perhaps it can be separated and reused as a Block?
this is my first question, so please, do not judge strictly. The essence is in follows: I imagine block structure of document as a printing press - but very remotely, of course - because press already hase content and semantic, while div's structure of document - only skeleton for it, and both mentioned subjects must be added. An object of concern to me is where I should put this semantic in document skeleton, formed with twitter bootstrap and defining structure - for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
I see two different ways, but dont know, what way is better practice in marking down html documents:
1) Adding semantic class to element, which already have class that forming my document structure - col-xs-12 - or press in my analogy.
<div class="container">
<div class="row">
<div class="col-xs-12 article-preview">
'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
</div>
</div>
</div>
2) Or adding brand new semanit block under structuring block and putting my content here:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="article-preview">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
</div>
I apologize if the question seems a little stupid to you, but I thinking about it for really long time and from now on can not do anything until it is resolved.
Thank you!
I will prefer the second way. Because bootstrap cols have their own styles and structure, so if you have additional styles or codes try to do like second way.
I think we should keep the bootstrap structure.
Go with the first approach because I feel the second approach will make your code long unnecessarily.
With the first approach as well you can add your custom styles. just add your stylesheet after the bootstrap css.
I am rendering tables of data in two ways, one using semantic table tags and the other a non-semantic groups of <div>s using css display: table and the like.
<div class="table">
<div class="table-header">
<div class="table-header-row">
<div class="table-header-cell"></div>
</div>
</div>
<div class="table-body">
<div class="table-body-row">
<div class="table-body-cell"></div>
</div>
</div>
</div>
I would still like the non-semantic table to be as accessible as possible, so I am wondering what combination of ARIA attributes I can use to describe to the user that they are interacting with a table or something table-like? I have never seen a role of "table" "table-row" or anything like that.. so i am not sure if i understand correctly what is needed?
From http://www.w3.org/TR/wai-aria/roles#grid
grid (role)
A grid is an interactive control which contains cells of tabular data
arranged in rows and columns, like a table.
See also treegrid, row, rowgroup, gridcell, rowheader and columnheader
However, if these are appropriate, then you should probably be using an HTML table.
this more a conceptual question. Recently i found myself to be more confident with this kind of html (example)
<div id="mainCont">
<div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div>
<div id="mainContSecond">Other Text</div>
</div>
Having all important tag marked with an ID you can easly write down css:
#mainContFirst {} etc
is this a bad pratice? Should I use just css selector? Is this faster then use selector?
Thanks
Grouping (edit)
Ok now What about elements that should have the same style?
let's say for example in every divs the second <span> should have font-size:10px; it's better this:
<div>
text text <span></span> <span id="firstDivSpan"></span>
</div>
<div>
text text <span></span> <span id="secondDivSpan"></span>
</div>
and then the css:
#firstDivSpan, #secondDivSpan {...}
Or like this?
<div>
text text <span></span> <span id="firstDivSpan" class="commonStyle"></span>
</div>
<div>
text text <span></span> <span id="secondDivSpan" class="commonStyle"></span>
</div>
.commonStyle{...}
What's better?
ID selectors are the fastest. That is not bad practice at all; you're simply operating under the assumption that there will only be one element with that ID on your pages.
That said you shouldn't abuse IDs for lame reasons like rendering performance. Use IDs to mark truly unique elements, not to mark everything so you can forget about stuff like descendant combinators, classes, groups etc. Those other selectors are what make CSS so powerful, not just the ID selectors.
Re question edit: there isn't any better one in this case. Performance issues aside (because they don't matter at all) it largely depends on the meaning of the selectors.
If your styles apply to any element with the .commonStyle class then use the class selector. If you only want to target those two specific spans regardless of the class then the ID selectors are more appropriate.
It is better to use the ID like in your example.
It is easier for the browser to fetch a particular ID element rather than have to find all parents, then descendants...
As someone expanded on my answer in a separate thread, article regarding this: http://www.css-101.org/descendant-selector/go_fetch_yourself.php
ID, class, element name - they are all CSS selectors.