Why are dashes preferred for CSS selectors / HTML attributes?
Why are dashes preferred for CSS selectors / HTML attributes?
I use dashes because I don't have to hit the shift key.
Code completion
Whether dash is interpreted as punctuation or as an opaque identifier depends on the editor of choice, I guess. However, as a personal preference, I favor being able to tab between each word in a CSS file and would find it annoying if they were separated with underscore and there were no stops.
Also, using hyphens allows you to take advantage of the |= attribute selector, which selects any element containing the text, optionally followed by a dash:
span[class|="em"] { font-style: italic; }
This would make the following HTML elements have italic font-style:
<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>
Ambiguity with arithmetic operator
I'd say that access to HTML elements via dot notation in JavaScript is a bug rather than a feature. It's a terrible construct from the early days of terrible JavaScript implementations and isn't really a great practice. For most of the stuff you do with JavaScript these days, you'd want to use CSS Selectors for fetching elements from the DOM anyway, which makes the whole dot notation rather useless. Which one would you prefer?
var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;
I find the two first options much more preferable, especially since '#first-name'
can be replaced with a JavaScript variable and built dynamically. I also find them more pleasant on the eyes.
The fact that Sass enables arithmetic in its extensions to CSS doesn't really apply to CSS itself, but I do understand (and embrace) the fact that Sass follows the language style of CSS (except for the $
prefix of variables, which of course should have been @
). If Sass documents are to look and feel like CSS documents, they need to follow the same style as CSS, which uses dash as a delimiter. In CSS3, arithmetic is limited to the calc
function, which goes to show that in CSS itself, this isn't an issue.
Inconsistency with variable naming across languages
All languages, being markup languages, programming languages, styling languages or scripting languages, have their own style. You will find this within sub-languages of language groups like XML, where e.g. XSLT uses lower-case with hyphen delimiters and XML Schema uses camel-casing.
In general, you will find that adopting the style that feels and looks most "native" to the language you're writing in is better than trying to shoe-horn your own style into every different language. Since you can't avoid having to use native libraries and language constructs, your style will be "polluted" by the native style whether you like it or not, so it's pretty much futile to even try.
My advice is to not find a favorite style across languages, but instead make yourself at home within each language and learn to love all of its quirks. One of CSS' quirks is that keywords and identifiers are written in lowercase and separated by hyphens. Personally, I find this very visually appealing and think it fits in with the all-lowercase (although no-hyphen) HTML.
Why are dashes preferred for CSS selectors / HTML attributes?的更多相关文章
- BeautifulSoup高级应用 之 CSS selectors /CSS 选择器
BeautifulSoup支持最常用的CSS selectors,这是将字符串转化为Tag对象或者BeautifulSoup自身的.select()方法. 本篇所使用的html为: html_doc ...
- 转:SELENIUM TIPS: CSS SELECTORS
This page will show you some CSS rules and pseudo-classes that will help you move your XPATH locator ...
- (3)选择元素——(4)css选择器(CSS selectors)
The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, ...
- CSS selectors for Selenium with example,selenium IDE
CSS selectors for Selenium with example http://seleniumeasy.com/selenium-tutorials/css-selectors-tut ...
- [Selenium] 在Chrome的开发者工具中验证检查XPath/CSS selectors
Evaluate and validate XPath/CSS selectors in Chrome Developer Tools Method 1 : From Elements panel U ...
- css selectors tips
from https://saucelabs.com/resources/articles/selenium-tips-css-selectorsSauce Labs uses cookies to ...
- CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id ...
- flight.Archives001 / CSS Selectors选择器
Title/CSS选择器 序 : 这是flight.Archives 梦开始的地方, 作者我熬夜肝出来了这篇文章... 保证这是最简洁高效的 CSS Selectors 教程 Note : 暂时没有能 ...
- Review CSS Selectors
Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. L ...
随机推荐
- STM32F10xxx_启动模式
目录 STM32F10xxx_启动模式 更新记录 启动配置 参考: STM32F10xxx_启动模式 更新记录 version status description date author V1.0 ...
- Dedecms 生成速度慢 的解决办法
从dedecms官网论坛找到个合适的代码 include/inc/inc_fun_SpGetArcList.php for($i=0;$i<$ridnum;$i++){ if($tpsql==& ...
- centos 7 搭建 LNMP ( Linux+Nginx+MySQL+PHP )
操作系统 | CentOS Linux release 7.6.1810 (Core) [root@localhost ~# cat /etc/redhat-release CentOS Linux ...
- 网络初级篇之DHCP原理与配置(原理与实验)
一.什么是DHCP DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境 ...
- 标准C语言(3)
操作符用来描述对数字的处理规则根据操作符所需要配合的数字个数把操作符分为单目操作符,双目操作符和三目操作符 C语言里用+,-,*和/表示加减乘除四则运算,它们都是双目操作符,如果参与除法计算的两个数字 ...
- parfile解决exp时tables过多问题
parfile 一般用于表数据过大.使用导出.导入命令参数过多等场景: 在对oracle数据库使用exp命令导出数据时,如果tables=后面跟的表比较多,就是导致命令行放不下,从而不能导出.百度一把 ...
- DeepFM: A Factorization-Machine based Neural Network for CTR Prediction (2017)论文要点
论文链接: https://arxiv.org/pdf/1703.04247.pdf FM原理参考: Factorization Machines with libFM 论文阅读 https://w ...
- php和redis实现消息队列
php+redis消息队列是php+mysql性能不足时的一个中间间处理方案.通过这个中间的处理,保证的数据的可用性和准确性.用于服务器瞬间请求大,数据库压力大的情况.如并发量大导致的超卖.并发量大导 ...
- Gym - 101234J Zero Game (单调队列)
题意:有一个长度为n的01序列,你可以移动k次,每次将一个数移到任意一个位置,求经过操作后区间连续最大的连续0的个数. “移动”操作看似情况很复杂,不好讨论,但其实无非就两种情况: 一.移动的是1:显 ...
- 【CF451E】Devu and Flowers
题目大意:求多重集合的组合数, \(N \le 1e14,M \le 20\). 题解: 考虑容斥原理,具体做法是枚举所有情况,即:枚举子集,第 i 位为 1 表示满足第 i 个条件,正负号采用 si ...