You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Now that the project has fully embraced third-party customization with plugins, please make the markup more accessible to styling. We can start by simply adding id and data attributes wherever relevant.
id attribute
Lets use the id attribute to define unique structural sections on each page. This would make styling more accessible (requiring less convoluted selector declarations) and help to determine particular pages.
I propose something like a #pageName-section format for ID attribute names.
/* Declares the "main" container of scene grid view page i.e. <div class="main container ..." id="scenes_gridview-main"> */#scenes_gridview-main/* Other sample declarations... */#scenes_detailview-main#scenes_detailview-sidebar#scenes_detailview-video#images_detailview-main#images_detailview-sidebar#images_detailview-video
data-* attribute
Lets add more data-* attributes where relevant. Some of these might be redundant or overly simple, but I'm just spitballing. I welcome people to provide feedback for more pragmatic examples
every rating containers -> data-value="$rating"
watch container -> data-value="$count"
o-count container -> data-value="$count"
organized container -> data-value=boolean
where image placeholders exist for performer image, studio image, etc -> data-value=boolean
etc
The text was updated successfully, but these errors were encountered:
I'd argue that "value" in every data-value= should be replaced with something descriptive for each case.
If I were the one adding data attributes, I'd try to add them to the highest-level element that contains the entity whose properties are in the attributes (or the one that best describes the entity, in case it has some boilerplate wrappers).
That would mean, for example, that watch counter, o-counter, etc. all will be added to the same element.
I don't know what the most common approach is - adding data attributes to most specific element or highest-level element.
I guess it might depend on what selectors are most expected.
(Before introduction of :has() selectors, having attributes higher in the tree was obviously beneficial.)
Synopsis
Now that the project has fully embraced third-party customization with plugins, please make the markup more accessible to styling. We can start by simply adding
id
anddata
attributes wherever relevant.id attribute
Lets use the
id
attribute to define unique structural sections on each page. This would make styling more accessible (requiring less convoluted selector declarations) and help to determine particular pages.I propose something like a
#pageName-section
format for ID attribute names.data-* attribute
Lets add more
data-*
attributes where relevant. Some of these might be redundant or overly simple, but I'm just spitballing. I welcome people to provide feedback for more pragmatic examplesetc
The text was updated successfully, but these errors were encountered: