Can both underscores and hyphens be used together in CSS ID naming conventions?

Recently, I proposed to my team the idea of using dashes (hyphens) for our class names and underscores for our IDs. For IDs, I suggested following a naming convention where the element tag is separated from the rest of the ID name by an underscore, resulting in ID names that look like #element_class-name. An example would be: 

<div id="div_generic-name" class="generic-name">Stuff</div>
Are there any potential issues with this approach? What are the consequences of mixing underscores and hyphens in our code?

csshtmlnaming-conventions

Answer №1

Absolutely, that won't be an issue at all. According to guidelines from the W3C, when it comes to naming CSS classes, there are two key rules to keep in mind:

  • Within the ASCII range, all CSS syntax is case-insensitive (meaning [a-z] and [A-Z] are considered equivalent) except for certain parts not controlled by CSS. For example, values of attributes like "id" and "class", font names, and URIs may have their own case-sensitivity rules beyond what's covered in this specification. It's important to note that element names are case-insensitive in HTML but case-sensitive in XML.
  • In CSS, identifiers (this includes element names, classes, and IDs in selectors) can only consist of characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, along with the hyphen (-) and underscore (_). Identifiers cannot begin with a digit, two hyphens, or a hyphen followed by a digit. Additionally, identifiers can incorporate escaped characters and any ISO 10646 character represented as a numeric code (details on this in the next point). For example, the identifier "B&W?" could be expressed as "B\&W\?" or "B\26 W\3F".

Answer №2

Feel free to proceed with your desired action. The content enclosed within the quotation marks will not be processed by the browser, but rather treated as plain text and will not be executed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

Retrieve the HTML tag content as a string using jQuery

For my OSINT project, I am developing a tool that needs to extract text from a specific HTML code string. $("p").text(); I'm looking for a way to make my variable work with the above code. Any suggestions? Share your ideas! Solution: $.ajax({ ...

jqueryhtmljsonparsing

Using PHP's DOM to extract the text within a td class

I'm brand new to working with the Document Object Model (DOM), so please be patient with me. I am attempting to extract specific content from a web page where there are citations, with the webpage URL. The target element I'm trying to access is: ...

phphtmlparsingdom

Text included in the body of an email sent through Outlook

Whenever I click on a specific button, it opens Outlook with the provided details. Additionally, there is a TEXTAREA element containing certain texts. Is there a way to display this text in the body of my Outlook email? Below is the sample code - & ...

javascripthtmloutlook

Is it possible to apply CSS hover effects to this intricate, irregularly shaped link?

I've tried numerous solutions to no avail. My goal is to make my links glow on hover using CSS. I attempted to use rectangles to link my images, but they are small and overlapping. Can I utilize polygon coordinates in CSS? The main issue I face is th ...

htmlcsshoverhyperlink

Generating a label on a leaflet map with htmltools results in a minuscule label

When creating a leaflet map, the first step is to specify the label. The code used on the Leaflet GitHub includes %>% lapply(htmltool::HTML) after the sprintf() function. However, when doing this, the label is created as type "list," which results in ...

htmlrleaflet

A guide on extracting data from a customized HTML table on the client side and sending it to the Flask backend

I am looking to implement a feature where users can add as many rows as they want and input information into them. Once the user has finished adding the desired data, I need to process it using Flask on the server-side. Can someone please provide guidanc ...

javascripthtmlajaxflaskbackend

Combining fixed pixel width with the max-width property in CSS

My container has a nested <p/> tag serving as the message text. The container is set to have a width of 200px, with a max-width of 600px to allow for expansion if the message length exceeds the initial 200px. However, despite these settings, the div ...

htmlcss

Steps to obtain an Element binding from a Svelte component

Is it possible to retrieve the bounding client rect of an anchor element? I typically mark this using the syntax bind:this={someVariable}. However, when I add this code to a Svelte component, I receive a different object that Svelte uses to represent a c ...

javascripthtmlsvelte

Updating a CSS file through jQuery is proving to be ineffective

After searching extensively on Stack Overflow and other websites, I have not been able to find a clear answer to my question regarding changing a CSS class (#navbar a) after a specific function is triggered. My understanding of jQuery and JavaScript is lim ...

jqueryhtmlcss

When an abundance of columns are present, the Asp.net gridview spills out of its containing div

Struggling to contain a gridview within a div with relative widths? It always seems to overflow its parent container when there are too many columns. A fixed width can help, but resizing the window causes the gridview to overflow once again due to its spe ...

cssasp.netgridviewresponsive-design

What is the best way to place a logo image within a react component list?

Seeking guidance on how to position logo images similar to what is shown here. I've been struggling with positioning multiple logo images outside of each card's container. I attempted using absolute positioning, but it seems to be relative to th ...

htmlcssreactjsstyling

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...

jquerycssjquery-uijquery-selectorshover

Efficiently loading html controls in Angular through dynamic mechanisms

Currently, I am developing a data reporting solution using Angular 7. The application is expected to accommodate over 200 reports, and my goal is to create reusable components to avoid creating all 200+ components upfront. Additionally, I aim to ensure th ...

jqueryhtmlangularangular7

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

javascripthtmlcssjsonbootstrap-4

Using HTML: The trick to obtaining selection offsets in relation to HTML tags

Let's say I have HTML code like this: <div> <p> start<span>span</span>end </p> </div> I am looking for a way to retrieve the offsets when text is selected, while still taking into account the presence of span ...

javascriptjqueryhtml

Incorrect modal placement

I am new to CSS and currently working on customizing a modal window. My main issue lies with its positioning, especially when the browser resolution changes, causing a misalignment as seen in the screenshot. I would like to specify the width and height dim ...

htmlcsscss-float

The radio button fails to register the selection

I need to ensure a radio button is checked if it has a value, but the output of my code is not displaying as expected: <input id="radio2" type="radio" checked="checked" value="2" name="radio"> Despite specifying checked="checked", the radio button ...

phphtmlradio-button

What is the process for accessing fontawesome pro css files using NPM?

Seeking some assistance here! Our team recently invested in a Font Awesome Pro license and we are looking to utilize it across multiple sub-domains. However, adding each sub-domain under the services tab on the Font Awesome site to enable CDN access is p ...

cssnpmfont-awesome

Names picked at random and presented in the innerHTML

I am currently working on a project that involves displaying random names from an array in a text area named "textbox". Currently, I am using math.random() to pick a name randomly, but it only generates a new random name when the page is reloaded. How ca ...

javascriptphpjqueryhtml